M

MLOG

עברית

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

הכלה ב-CSS: פריצת דרך באופטימיזציית ביצועים לחוויות ווב גלובליות

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

פיתוח ווב מודרני מדגיש יצירת חוויות דינמיות ואינטראקטיביות. עם זאת, כל שינוי בדף אינטרנט – בין אם זה שינוי גודל של אלמנט, הוספת תוכן, או אפילו שינוי של מאפיין סגנון – יכול להפעיל סדרה של חישובים יקרים בתוך מנוע הרינדור של הדפדפן. חישובים אלה, הידועים כ-'reflows' (חישובי פריסה) ו-'repaints' (רינדור פיקסלים), יכולים לצרוך במהירות מחזורי מעבד, במיוחד במכשירים פחות חזקים או בחיבורי רשת איטיים יותר הנפוצים באזורים מתפתחים רבים. מאמר זה מתעמק במאפיין CSS חזק, אך לעיתים קרובות לא מנוצל מספיק, שנועד למתן את אתגרי הביצועים הללו: CSS Containment. על ידי הבנה ויישום אסטרטגי של contain, מפתחים יכולים לייעל באופן משמעותי את ביצועי הרינדור של יישומי הווב שלהם, ולהבטיח חוויה חלקה, רספונסיבית ושוויונית יותר עבור קהל גלובלי.

האתגר המרכזי: מדוע ביצועי ווב חשובים ברמה הגלובלית

כדי להעריך באמת את כוחה של ההכלה ב-CSS, חיוני להבין את צינור הרינדור (rendering pipeline) של הדפדפן. כאשר דפדפן מקבל HTML, CSS ו-JavaScript, הוא עובר מספר שלבים קריטיים כדי להציג את הדף:

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

לא ניתן להפריז בחשיבות הגלובלית של אופטימיזציית ביצועים:

הכירו את CSS Containment: כוח-על של הדפדפן

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

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

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

.my-contained-element {
  contain: layout;
}

.another-element {
  contain: paint;
}

.yet-another {
  contain: size;
}

.combined-containment {
  contain: content;
  /* shorthand for layout paint size */
}

.maximum-containment {
  contain: strict;
  /* shorthand for layout paint size style */
}

פענוח ערכי ה-contain

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

contain: layout;

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

דוגמה: פריט בפיד חדשות דינמי

<style>
  .news-feed-item {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
    contain: layout;
    /* מבטיח ששינויים בתוך פריט זה לא יפעילו reflows גלובליים */
  }
  .news-feed-item h3 { margin-top: 0; }
  .news-feed-item .actions { text-align: right; }
</style>

<div class="news-feed-container">
  <div class="news-feed-item">
    <h3>כותרת 1</h3>
    <p>תיאור קצר של פריט החדשות. זה עשוי להתרחב או להתכווץ.</p>
    <div class="actions">
      <button>קרא עוד</button>
    </div>
  </div>
  <div class="news-feed-item">
    <h3>כותרת 2</h3>
    <p>ידיעה חדשותית נוספת. דמיינו שזה מתעדכן לעיתים קרובות.</p>
    <div class="actions">
      <button>קרא עוד</button>
    </div>
  </div>
</div>

contain: paint;

ערך זה מצהיר כי צאצאי האלמנט לא יוצגו מחוץ לגבולותיו. אם תוכן כלשהו מצאצא יחרוג מתיבת האלמנט, הוא ייחתך (כאילו הוחל overflow: hidden;).

דוגמה: אזור תגובות נגלל

<style>
  .comment-section {
    border: 1px solid #ccc;
    height: 200px;
    overflow-y: scroll;
    contain: paint;
    /* צובע מחדש רק תוכן בתוך תיבה זו, גם אם תגובות מתעדכנות */
  }
  .comment-item { padding: 5px; border-bottom: 1px dotted #eee; }
</style>

<div class="comment-section">
  <div class="comment-item">תגובה 1: לורם איפסום דולור סיט אמט.</div>
  <div class="comment-item">תגובה 2: קונסקטטור אדיפיסינג אליט.</div>
  <!-- ... עוד תגובות רבות ... -->
  <div class="comment-item">תגובה N: סד דו איוסמוד טמפור אינסידידונט אוט לאבורה.</div>
</div>

contain: size;

כאשר contain: size; מוחל, הדפדפן מתייחס לאלמנט כאילו יש לו גודל קבוע ובלתי ניתן לשינוי, גם אם התוכן שלו עשוי לרמוז אחרת. הדפדפן מניח שמידות האלמנט המוכל לא יושפעו מתוכנו או מצאצאיו. זה מאפשר לדפדפן לפרוס אלמנטים סביב האלמנט המוכל מבלי צורך לדעת את גודל תוכנו. זה דורש מהאלמנט להיות בעל מידות מפורשות (width, height) או לקבל את גודלו באמצעים אחרים (למשל, באמצעות מאפייני flexbox/grid על ההורה שלו).

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

<style>
  .virtual-list-item {
    height: 50px; /* גובה מפורש חיוני להכלת 'size' */
    border-bottom: 1px solid #eee;
    padding: 10px;
    contain: size;
    /* הדפדפן יודע את גובה הפריט הזה מבלי להסתכל פנימה */
  }
</style>

<div class="virtual-list-container">
  <div class="virtual-list-item">תוכן פריט 1</div>
  <div class="virtual-list-item">תוכן פריט 2</div>
  <!-- ... פריטים רבים נוספים נטענים דינמית ... -->
</div>

contain: style;

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

דוגמה: אזור מונים עצמאי

<style>
  .independent-section {
    border: 1px solid blue;
    padding: 10px;
    contain: style;
    /* מבטיח שהמונים כאן לא ישפיעו על מונים גלובליים */
    counter-reset: local-item-counter;
  }
  .independent-section p::before {
    counter-increment: local-item-counter;
    content: "פריט " counter(local-item-counter) ": ";
  }
</style>

<div class="independent-section">
  <p>נקודה ראשונה.</p>
  <p>נקודה שנייה.</p>
</div>

<div class="global-section">
  <p>זה לא אמור להיות מושפע מהמונה שלמעלה.</p>
</div>

contain: content;

זהו קיצור עבור contain: layout paint size;. זהו ערך נפוץ בשימוש כאשר רוצים רמה חזקה של הכלה ללא בידוד style. זוהי הכלה כללית טובה עבור רכיבים שהם ברובם עצמאיים.

דוגמה: כרטיס מוצר רב-פעמי

<style>
  .product-card {
    border: 1px solid #eee;
    padding: 15px;
    margin: 10px;
    width: 250px; /* רוחב מפורש עבור הכלת 'size' */
    display: inline-block;
    vertical-align: top;
    contain: content;
    /* בידוד פריסה, צביעה וגודל */
  }
  .product-card img { max-width: 100%; height: auto; }
  .product-card h3 { font-size: 1.2em; }
  .product-card .price { font-weight: bold; color: green; }
</style>

<div class="product-card">
  <img src="product-image-1.jpg" alt="מוצר 1">
  <h3>גאדג'ט מדהים פרו</h3>
  <p class="price">$199.99</p>
  <button>הוסף לסל</button>
</div>

<div class="product-card">
  <img src="product-image-2.jpg" alt="מוצר 2">
  <h3>סופר ווידג'ט עלית</h3&n>
  <p class="price">$49.95</p>
  <button>הוסף לסל</button>
</div>

contain: strict;

זוהי ההכלה המקיפה ביותר, הפועלת כקיצור עבור contain: layout paint size style;. היא יוצרת את הבידוד החזק ביותר האפשרי, והופכת למעשה את האלמנט המוכל להקשר רינדור עצמאי לחלוטין.

דוגמה: ווידג'ט מפה אינטראקטיבי מורכב

<style>
  .map-widget {
    width: 600px;
    height: 400px;
    border: 1px solid blue;
    overflow: hidden;
    contain: strict;
    /* הכלה מלאה עבור רכיב מורכב ואינטראקטיבי */
  }
</style>

<div class="map-widget">
  <!-- לוגיקת רינדור מפה מורכבת (למשל, Leaflet.js, Google Maps API) -->
  <div class="map-canvas"></div>
  <div class="map-controls"><button>התקרב</button></div>
</div>

contain: none;

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

יישומים מעשיים ומקרי שימוש גלובליים

הבנת התיאוריה היא דבר אחד; יישומה ביעילות ביישומי ווב נגישים גלובלית בעולם האמיתי הוא דבר אחר. הנה כמה תרחישים מרכזיים שבהם הכלה ב-CSS יכולה להניב יתרונות ביצועים משמעותיים:

רשימות וירטואליות/גלילה אינסופית

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

<style>
  .virtualized-list-item {
    height: 100px; /* גובה קבוע חשוב להכלת 'size' */
    border-bottom: 1px solid #f0f0f0;
    padding: 10px;
    contain: layout size; /* אופטימיזציה של חישובי פריסה וגודל */
    overflow: hidden;
  }
</style>

<div class="virtualized-list-container">
  <!-- פריטים נטענים/נפרקים דינמית בהתבסס על מיקום הגלילה -->
  <div class="virtualized-list-item">מוצר א': תיאור ומחיר</div>
  <div class="virtualized-list-item">מוצר ב': פרטים וביקורות</div>
  <!-- ... מאות או אלפי פריטים נוספים ... -->
</div>

רכיבים מחוץ למסך/מוסתרים (מודאלים, סרגלי צד, טיפים)

יישומי ווב רבים כוללים אלמנטים שאינם תמיד נראים אך הם חלק מה-DOM, כגון מגירות ניווט, דיאלוגים מודאליים, טיפים, או פרסומות דינמיות. גם כאשר הם מוסתרים (למשל, עם display: none; או visibility: hidden;), הם עדיין יכולים לפעמים להשפיע על מנוע הרינדור של הדפדפן, במיוחד אם נוכחותם במבנה ה-DOM מחייבת חישובי פריסה או צביעה כאשר הם עוברים למצב גלוי.

<style>
  .modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 500px;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    padding: 20px;
    z-index: 1000;
    display: none; /* או בתחילה מחוץ למסך */
    contain: layout paint; /* כאשר גלוי, שינויים בפנים מוכלים */
  }
  .modal-dialog.is-open { display: block; }
</style>

<div class="modal-dialog">
  <h3>הודעת ברוכים הבאים</h3>
  <p>זהו דיאלוג מודאלי. התוכן שלו עשוי להיות דינמי.</p>
  <button>סגור</button>
</div>

ווידג'טים מורכבים ורכיבי ממשק משתמש רב-פעמיים

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

<style>
  .interactive-chart-widget {
    width: 100%;
    height: 300px;
    border: 1px solid #ddd;
    contain: content; /* פריסה, צביעה, גודל מוכלים */
    overflow: hidden;
  }
</style>

<div class="interactive-chart-widget">
  <!-- JavaScript ירנדר כאן תרשים מורכב, למשל באמצעות D3.js או Chart.js -->
  <canvas id="myChart"></canvas>
  <div class="chart-controls">
    <button>הצג נתונים</button>
    <button>זום</button>
  </div>
</div>

Iframes ותוכן מוטמע (בזהירות)

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

Progressive Web Applications (PWAs)

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

שיטות עבודה מומלצות ושיקולים לפריסה גלובלית

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

יישום אסטרטגי: אל תחיל על הכל

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

זהו היכן עלויות הרינדור הן הגבוהות ביותר באמצעות כלי פרופיילינג לפני החלת הכלה.

מדידה היא המפתח: אמת את האופטימיזציות שלך

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

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

הבנת השלכות ומלכודות פוטנציאליות

שיפור הדרגתי (Progressive Enhancement)

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

תאימות דפדפנים

לדפדפנים מודרניים יש תמיכה מצוינת בהכלה ב-CSS (Chrome, Firefox, Edge, Safari, Opera כולם תומכים בה היטב). ניתן לבדוק ב-Can I Use לקבלת מידע התאימות העדכני ביותר. מכיוון שזהו רמז ביצועים, חוסר תמיכה פירושו רק אופטימיזציה שפוספסה, לא פריסה שבורה.

שיתוף פעולה בצוות ותיעוד

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

תרחישים מתקדמים ומלכודות פוטנציאליות

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

אינטראקציה עם מאפייני CSS אחרים

ניפוי באגים בבעיות הכלה

אם אתם נתקלים בהתנהגות לא צפויה לאחר החלת contain, הנה כיצד לגשת לניפוי באגים:

שימוש יתר ותשואה פוחתת

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

העתיד של ביצועי ווב והכלה ב-CSS

הכלה ב-CSS היא תקן ווב בוגר יחסית, אך חשיבותה ממשיכה לגדול, במיוחד עם התמקדות התעשייה במדדי חוויית משתמש כמו Core Web Vitals. מדדים אלה (Largest Contentful Paint, First Input Delay, Cumulative Layout Shift) נהנים ישירות מסוג האופטימיזציות ברינדור ש-`contain` מספק.

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

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

סיכום

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

בעוד שהמושג עשוי להיראות מורכב בתחילה, פירוק המאפיין contain לערכיו הבודדים – layout, paint, size ו-style – חושף סט של כלים מדויקים לאופטימיזציה ממוקדת. מרשימות וירטואליות ועד למודאלים מחוץ למסך ולווידג'טים אינטראקטיביים מורכבים, היישומים המעשיים של הכלה ב-CSS הם רחבי היקף ובעלי השפעה. עם זאת, כמו כל טכניקה חזקה, היא דורשת יישום אסטרטגי, בדיקה יסודית והבנה ברורה של השלכותיה. אל תיישמו אותה באופן עיוור; זהו את צווארי הבקבוק שלכם, מדדו את ההשפעה שלכם, וכווננו את הגישה שלכם.

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