לאחרונה הטמיע ב-Chromium תכונה חדשה מ-HTML5: גיליונות סגנונות מוגדרים בהיקף, כלומר.
<style scoped>. מחבר אינטרנט יכול להגביל את כללי הסגנון כך שיחולו רק על חלק מהדף. לשם כך, הוא צריך להגדיר את המאפיין 'היקף' ברכיב <style> שהוא הצאצא הישיר של רכיב הבסיס של עץ המשנה שעליו רוצים להחיל את הסגנונות. הפעולה הזו מגבילה את הסגנונות כך שישפיעו רק על הרכיב שמוגדר כהורה של הרכיב <style> ועל כל הצאצאים שלו.
דוגמה
מסמך פשוט עם עיצוב סטנדרטי:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
כללי הסגנון שצוינו יצבעו את הטקסט בתוך כל אדום <div> ובתוך כל ירוק של <span>:
כל הכבוד! חם!
כל הכבוד! כל הכבוד!
כל הכבוד! מעולה!
עם זאת, אם נגדיר את scoped ברכיב <style>:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style scoped>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
אז היא מגבילה את כללי הסגנון כך שניתן להחיל אותם על ה-<div> המצורף שהוא ההורה של הרכיב <style scoped> ועל כל דבר שבתוך <div>. אנחנו מכנים את ההיקף הזה 'היקף', והתוצאה נראית כך:
div! מכסה!
div! טווח!
דיו! טווח מסוים!
כמובן שניתן לעשות זאת בכל מקום בתגי העיצוב. אם יש לכם הרפתקאות, תוכלו להציב סגנונות בהיקף מסוים בתוך חלקים אחרים של תגי העיצוב לא פחות, כדי לקבל שליטה פרטנית יותר על המיקומים שבהם הסגנונות יוחלו.
תרחישים לדוגמה
למה זה טוב?
מקרה לדוגמה נפוץ הוא תוכן בסינדיקציה: אם אתם כמחברי אינטרנט רוצים לשלב תוכן של צד שלישי, כולל כל הסגנונות שלו, אבל לא רוצים להסתכן בסגנונות האלה ש"יבלו" חלקים אחרים ולא קשורים בדף. יתרון אדיר הוא היכולת לשלב תוכן מאתרים אחרים, כמו yelp, Twitter, ebay וכו', בלי שיהיה צורך לבודד אותם באמצעות <iframe> או במהירות עריכה של התוכן החיצוני.
אם אתם משתמשים במערכת ניהול תוכן (CMS) ששולחת לכם קטעי טקסט של תגי עיצוב שמשולבים כולם יחד כדי ליצור תצוגה סופית של הדף. זו תכונה נהדרת שעוזרת לוודא שכל קטע טקסט מעוצב בנפרד מכל דבר אחר בדף. המדיניות הזו יכולה להיות שימושית גם עבור wiki.
כשרוצים ליצור קוד הדגמה נחמד בדף, קל להגביל את הסגנונות רק לתוכן ההדגמה. כך אפשר לשחק עם שירות ה-CSS בהדגמה, אבל שום דבר אחר בדף לא יושפע מהשינוי.
תרחיש נוסף לדוגמה הוא אנקפסולציה: לדוגמה, אם לדף האינטרנט יש תפריט צדדי, הגיוני להעביר סגנונות ספציפיים לתפריט הזה בקטע <style scoped> בחלק הזה של תגי העיצוב. לכללי הסגנון האלה לא תהיה כל השפעה בעת עיבוד חלקים אחרים של הדף, כך שהם מופרדים בצורה טובה מהתוכן הראשי.
ייתכן שאחד מהתרחישים לדוגמה המעניינים ביותר הוא מודל רכיב האינטרנט. רכיבי אינטרנט יהיו דרך מצוינת לבנות דברים כמו מחוונים, תפריטים, בוחרי תאריכים, ווידג'טים של כרטיסיות וכו'. המעצב יכול לבנות ווידג'ט לארוז אותו כיחידה עצמאית ולשלב אותו באפליקציית אינטרנט עשירה. אנחנו מתכננים להשתמש ב-<style scoped> במידה רבה עם רכיבי אינטרנט ועם DOM DOM (שכבר ניתן להפעיל על ידי הגדרת הדגל הניסיוני "shadow DOM" ב-chrome://flags). בשלב זה, אין דרך ממש טובה להבטיח שסגנונות יוגבלו לרכיבי אינטרנט בלי להשתמש בשיטות עבודה גרועות כמו סגנון מותאם אישית, כך שסגנונות מפורטים הם הפתרון המושלם להשגת המטרה הזו.
למה לכלול את רכיב ההורה?
הדרך הטבעית ביותר היא לכלול את רכיב ההורה כדי שכללי <style scoped> יוכלו, למשל, להגדיר צבע רקע משותף לכל ההיקף. הוא גם מאפשר לכתוב באופן 'הגנה' על גיליונות של סגנונות בהיקף בדפדפנים שעדיין לא תומכים ב-<style scoped>. לשם כך, מוסיפים לכללים תחילית של בורר מזהה או בורר מחלקה כחלופה:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
פעולה זו מחקה את ההשפעה של שימוש בסגנונות כשמוטמעת בו 'היקף', אבל עם השלכות מסוימות על הביצועים בזמן ריצה, בגלל הבורר המורכב יותר. היתרון בגישה הזו הוא שהוא מאפשר גישה חלופית חיננית עד ליום שבו יש תמיכה רחבה ב-<style scoped> ואפשר פשוט להסיר את בוררי המזהים.
סטטוס
מכיוון שההטמעה של גיליונות סגנונות בהיקף עדיין חדשה, הם מוסתרים בשלב זה מאחורי סימון זמן ריצה ב-Chrome. כדי להפעיל אותם, צריך להוריד גרסה של Chrome שבה מותקנת הגרסה 19 ואילך (Chrome Canary כרגע), ולאחר מכן לאתר את הערך 'הפעלת <style scoped>' ב-chrome://flags (בסוף), ללחוץ על 'הפעלה' ואז להפעיל מחדש את הדפדפן.
אין כרגע באגים ידועים, אבל @global וגרסאות של @keyframes ו-@-webkit-region שנמצאות עדיין בתהליך הטמעה. בנוסף, המערכת מתעלמת מ-@font-face בינתיים כי יש סיכוי טוב שהמפרט ישתנה.
אנחנו רוצים לעודד את כל מי שמעוניין בתכונה לנסות אותה ולספר לנו על החוויות שלך: הטובות, הגרועות ו (אולי) הבאגדות.