חסימת CSS ב-Chrome 52

Paul Lewis

אמ;לק

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

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

    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 חדש שמעביר למפתחים את ההיקף של אמצעי הבקרה: Containment.

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

• layout
• paint
• size
• style

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

לשם הבהרה, מה ש-contain: style לא מספק הוא עיצוב לפי קנה מידה כמו שהייתם מקבלים מ-Shadow 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