חסימת CSS ב-Chrome 52

אמ;לק

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

יש לו כמה ערכים, ולכן התחביר שלו הוא:

    contain: none | strict | content | [ size || layout || style || paint ]

הוא זמין ב-Chrome מגרסה 52 ומעלה וב-Opera 40 ומעלה (והוא כולל תמיכה ציבורית מ-Firefox), לכן אתם מוזמנים להתנסות בו ולהודיע לנו איך אתם מרגישים.

המאפיין המכיל

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

לדוגמה, נניח שחלק מה-DOM שלכם נראה כך:

    <section class="view">
      Home
    </section>

    <section class="view">
      About
    </section>

    <section class="view">
      Contact
    </section>

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

    <section class="view">
      Home
    </section>

    <section class="view">
      About
      <div class="newly-added-element">Check me out!</div>
    </section>

    <section class="view">
      Contact
    </section>

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

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

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

'הכללת CSS' הוא מאפיין חדש, ומילת המפתח כוללת את מילת המפתח, והיא תומכת בארבעה ערכים:

• layout
• paint
• size
• style

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

פריסה (מכיל: פריסה)

בלימת הפריסה היא ככל הנראה היתרון הגדול ביותר של גבולות, יחד עם contain: paint.

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

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

צבע (מכיל: צבע)

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

• הוא משמש כבלוק מכיל עבור רכיבים במיקום קבוע ובמיקום קבוע. כלומר, כל הצאצאים ממוקמים על סמך הרכיב עם contain: paint ולא על סמך אף רכיב הורה אחר כמו המסמך עצמו.
• זה הופך להקשר של סידור בערימה. כלומר, פריטים כמו z-index ישפיעו על הרכיב, והילדים יקובצו בהתאם להקשר החדש.
• זה הופך להקשר חדש של עיצוב. פירוש הדבר הוא שאם יש לכם, למשל, רכיב ברמת הבלוק עם גבולות של צבע, המערכת תתייחס אליו כאל סביבת פריסה חדשה ועצמאית. כלומר, הפריסה מחוץ לאלמנט לא תשפיע בדרך כלל על הצאצאים של הרכיב שמכיל אותו.

גודל (מכיל: size)

המשמעות של contain: size היא שהצאצאים של הרכיב לא משפיעים על הגודל של ההורה, ושהמאפיינים המשוערים או המוצהרים שלו יהיו אלו שבהם נעשה שימוש. לכן אם הייתם מגדירים את המאפיין contain: size אבל לא ציינתם מידות לאלמנט (באופן ישיר או באמצעות מאפיינים גמישים), המערכת תעבד אותו ב-0px על 0px.

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

סגנון (מכיל: סגנון)

קשה לחזות מה יהיו ההשפעה של עץ ה-DOM של שינוי סגנונות של רכיב על העץ. אחת הדוגמאות לכך היא בערך מוני CSS, שבהם שינוי מונה בילדים יכול להשפיע על ערכי ספירה באותו שם שמופיעים במקומות אחרים במסמך. אם המדיניות contain: style מוגדרת, שינויי סגנון לא ישוחזרו מעבר לרכיב שמכיל את הבעיה.

כדי להבהיר, מה ש-contain: style לא מספק הוא עיצוב היקף כפי שניתן לקבל מ-Sadow DOM; מוגבלת כאן אך ורק להגביל את חלקי העץ המשוקללים כאשר יש שינוי בסגנונות, לא כאשר הם מוצהרים.

החרגת תוכן מחמירה

אפשר גם לשלב מילות מפתח, כמו contain: layout paint, שיחילו רק את ההתנהגויות האלה על רכיב. אבל מכיל תמיכה גם בשני ערכים נוספים:

• המשמעות של contain: strict זהה לזו של contain: size layout paint
• המשמעות של contain: content זהה לזו של contain: layout paint

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

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

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

נשמח לקבל ממך משוב על ההתקדמות שלך

השהיה היא דרך מצוינת להתחיל לציין לדפדפן מה אתם מתכוונים להיות מבודדים בדף. רוצה לנסות את הגרסה החדשה של Chrome 52 ומעלה? נשמח לשמוע מה דעתך.

קישורים שימושיים

• מפרט שירותי ה-CSS
• סטטוס הכללה ב-Chrome