Articles
מבוא ל-CSS
תכונות `overflow` ו- `contain`

תכונות `overflow` ו- `contain`

מאמר זה מסביר את תכונות overflow ו- contain.

תוכלו ללמוד כיצד להגדיר דברים כמו הצגת פסי גלילה וגזירה באמצעות תכונת overflow.

YouTube Video

HTML לתצוגה מקדימה

css-overflow-contain.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-overflow-contain.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Overflow Content</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Overflow And Contain Properties</h2>
 20        </header>
 21        <article>
 22            <h3>overflow</h3>
 23            <section>
 24                <header><h4>overflow: visible</h4></header>
 25                <section class="sample-view">
 26                    <section class="overflow-visible">
 27                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 28                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 29                    </section>
 30                </section>
 31                <header><h4>overflow: hidden</h4></header>
 32                <section class="sample-view">
 33                    <section class="overflow-hidden">
 34                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 35                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 36                    </section>
 37                </section>
 38                <header><h4>overflow: scroll</h4></header>
 39                <section class="sample-view">
 40                    <section class="overflow-scroll">
 41                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 42                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 43                    </section>
 44                </section>
 45                <header><h4>overflow: auto</h4></header>
 46                <section class="sample-view">
 47                    <section class="overflow-auto">
 48                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 49                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 50                    </section>
 51                </section>
 52                <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
 53                <section class="sample-view">
 54                    <section class="overflow-xy">
 55                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 56                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 57                    </section>
 58                </section>
 59                <header><h4>overflow: clip</h4></header>
 60                <section class="sample-view">
 61                    <section class="overflow-clip">
 62                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 63                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 64                    </section>
 65                </section>
 66            </section>
 67        </article>
 68        <article>
 69            <h3>contain</h3>
 70            <section>
 71                <header><h4>contain: layout</h4></header>
 72                <section class="sample-view">
 73                    <section class="contain-layout">
 74                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 75                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 76                    </section>
 77                </section>
 78                <header><h4>contain: paint</h4></header>
 79                <section class="sample-view">
 80                    <section class="contain-paint">
 81                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 82                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 83                    </section>
 84                </section>
 85                <header><h4>contain: size</h4></header>
 86                <section class="sample-view">
 87                    <section class="contain-size">
 88                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 89                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 90                    </section>
 91                </section>
 92                <header><h4>contain: style</h4></header>
 93                <section class="sample-view">
 94                    <section class="contain-style">
 95                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 96                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 97                    </section>
 98                </section>
 99                <header><h4>contain: content</h4></header>
100                <section class="sample-view">
101                    <section class="contain-content">
102                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104                    </section>
105                </section>
106            </section>
107        </article>
108    </main>
109</body>
110</html>

תכונות overflow ו- contain

overflow

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

יסודות תכונת overflow

לתכונת overflow יש ארבע ערכים עיקריים: visible, hidden, scroll, ו-auto.

visible 
1section.overflow-visible {
2    width: 400px;
3    height: 100px;
4    overflow: visible;
5}

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

תכונות:

  • התוכן מוצג ללא הגבלה.
  • אין הצגה של פסי גלילה.
hidden 
1section.overflow-hidden {
2    width: 400px;
3    height: 100px;
4    overflow: hidden;
5}

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

תכונות:

  • כאשר התוכן חורג מגבולות הרכיב, החלק החריג מוסתר.
  • אין הצגה של פסי גלילה.
scroll 
1section.overflow-scroll {
2    width: 400px;
3    height: 100px;
4    overflow: scroll;
5}

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

תכונות:

  • פסי הגלילה מופיעים גם אם התוכן מתאים לגבולות הרכיב.
  • ניתן לגלול בכיוון אופקי ואנכי.
auto 
1section.overflow-auto {
2    width: 400px;
3    height: 100px;
4    overflow: auto;
5}

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

תכונות:

  • פסי גלילה מופיעים רק כאשר התוכן חורג.
  • יוצר באופן אוטומטי אזור שניתן לגלול.
overflow-x ו-overflow-y 
1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

ניתן לשלוט במאפיין overflow בנפרד עבור כיוון אופקי (ציר x) וכיוון אנכי (ציר y).

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

שיקולים עבור גלישה (Overflow)

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

השפעות על העיצוב כתוצאה מהצגת סרגלי גלילה

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

התנהגות ברירת המחדל של הדפדפן

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

גלישת רכיבי ילדים

הגדרת overflow: hidden ברכיב אב מסתירה רכיבי ילדים שחורגים ממסגרת רכיב האב. זה עשוי לגרום לחלוניות קופצות וחלונות מודאליים שלא להציג כראוי.

overflow: clip (CSS Level 3) 

1section.overflow-clip {
2    width: 400px;
3    height: 100px;
4    overflow: clip;
5}

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

תכונות:

  • אם התוכן גולש, החלק הזה יוסתר לחלוטין.
  • אין הצגה של פסי גלילה.

סיום

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

contain

מבט כללי על המאפיין contain.

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

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

ערכים עבור contain

למאפיין contain יש את הערכים הבאים:.

layout 
1section.contain-layout {
2    width: 300px;
3    height: 300px;
4    contain: layout;
5}

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

paint 
1section.contain-paint {
2    width: 300px;
3    height: 300px;
4    contain: paint;
5}

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

size 
1section.contain-size {
2    width: 300px;
3    height: 300px;
4    contain: size;
5}

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

style 
1section.contain-style {
2    width: 300px;
3    height: 300px;
4    contain: style;
5}

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

content 
1section.contain-content {
2    width: 300px;
3    height: 300px;
4    contain: content;
5}

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

יתרונות ביצועים

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

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

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

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

הערות

בעת השימוש בתכונת contain, כדאי לשים לב לנקודות הבאות.

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

  2. תאימות דפדפנים: תכונת contain היא תכונה חדשה יחסית ב-CSS ואינה נתמכת באופן מלא בכל הדפדפנים. התכונה נתמכת בדפדפנים מרכזיים (Chrome, Firefox, Edge, Safari), אך ייתכן שהיא לא תפעל בגרסאות ישנות.

סיום

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

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

השוואה בין Flexbox, Grid ו-Column Layouts