תכונה ניסיונית חדשה – גיליונות סגנונות בהיקף

אלכס דנילו
Twitter

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>:

a div! a span!
a div! a span!
a div! a 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> זה בלבד. אנחנו קוראים לזה 'היקף' והתוצאה נראית כך:

a div! a span!
a div! a span!
a div! a span!

כמובן שניתן לעשות זאת בכל מקום בתגי העיצוב. אם אתם הרפתקנים, תוכלו לקנן סגנונות עם היקף מסוים בתוך חלקים אחרים של תגי העיצוב, כמה פעמים שתרצו כדי לקבל שליטה מדויקת יותר על המקומות שבהם יוחלו הסגנונות.

תרחישים לדוגמה

למה זה טוב?

תרחיש נפוץ לדוגמה הוא תוכן מופץ: כאשר אתם, ככותבי אתרים, מעוניינים לשלב תוכן של צד שלישי, כולל כל הסגנונות שלו, אבל לא רוצים שהסגנונות האלה "זהמו" חלקים אחרים בדף שאינם קשורים, יתרון משמעותי כאן הוא היכולת לשלב תוכן מאתרים אחרים כמו 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 כרגע), לאתר את הרשומה 'Enable <style scoped>' בכתובת chrome://flags (לקראת הסוף), ללחוץ על 'הפעלה' ולהפעיל מחדש את הדפדפן.

אין כרגע באגים ידועים, אבל גרסאות @global וגרסאות תחומים של @keyframes ושל @-webkit-region נמצאות עדיין בתהליך הטמעה. בינתיים, המערכת מתעלמת מה-@font-face כי יש סיכוי טוב שהמפרט ישתנה.

אנחנו רוצים לעודד את כל מי שמביע עניין בתכונה לנסות אותה ולספר לנו על החוויות שלכם: החוויה הטובה, הרעה (אולי) עם הפגיעה.