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

Alex Danilo
X

לאחרונה הוספנו ל-Chromium תכונה חדשה מ-HTML5: גיליון סגנונות ברמת ההיקף, שנקרא גם <style scoped>. מחבר אינטרנט יכול להגביל את כללי הסגנון כך שיחולו רק על חלק מהדף. לשם כך, צריך להגדיר את המאפיין '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> בירוק:

div span
div span
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!‏ span!
div! span!
div!‏ span!

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

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

למה זה טוב?

תרחיש לדוגמה נפוץ הוא תוכן שמופץ ברשתות: כשאתם, ככותבי אינטרנט, רוצים לשלב תוכן מצד שלישי, כולל כל הסגנונות שלו, אבל לא רוצים להסתכן בכך שהסגנונות האלה 'ידללו' חלקים אחרים של הדף שלא קשורים אליו. היתרון הגדול כאן הוא היכולת לשלב תוכן מאתרים אחרים כמו Yelp, ‏ Twitter, ‏ eBay וכו' בדף אחד, בלי צורך לבודד אותם באמצעות <iframe> או לערוך את התוכן החיצוני בזמן אמת.

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

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

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

אחד מתרחישי השימוש המעניינים ביותר הוא מודל רכיב האינטרנט. רכיבי אינטרנט יהיו דרך מצוינת ליצור רכיבים כמו פסולים, תפריטים, בוררי תאריכים, ווידג'טים של כרטיסיות וכו'. בעזרת סגנונות ברמת ההיקף, מעצבים יכולים ליצור ווידג'ט ולארז אותו עם הסגנונות שלהם כיחידה עצמאית שאחרים יכולים לצרף ולשלב באפליקציית אינטרנט עשירה. אנחנו מתכננים להשתמש ב-<style scoped> בהיקף נרחב עם רכיבי Web ועם DOM בצל (כבר אפשר להפעיל אותו על ידי הגדרת הדגל הניסיוני '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 כי יש סיכוי גבוה שהמפרט ישתנה.

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