אפשרויות נוספות

The CSS Podcast – 034: Overflow

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

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

אפשרויות נוספות של שורה אחת עם text-overflow

משתמשים במאפיין text-overflow בכל אלמנט שמכיל צמתים של טקסט, למשל, פסקה, <p>. היא מציינת איך הטקסט ייראה כשהוא לא מתאים לשטח הזמין של הרכיב. כל טקסט ה-HTML שגלוי בדף נמצא בצומתי טקסט. כדי להשתמש ב-text-overflow צריך שורת טקסט אחת ללא גלישת טקסט, לכן צריך גם להגדיר את overflow כ-hidden ולהגדיר ערך white-space שימנע גלישת טקסט.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

שימוש במאפייני overflow

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

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

גלילה בציר האנכי והאופקי

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

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

מאפיינים לוגיים לכיוון הגלילה

המאפיינים overflow-inline ו-overflow-block מגדירים את הגלילה החוצה על סמך כיוון המסמך ומצב הכתיבה.

הקיצור של overflow

הקיצורי דרך overflow מגדירים את הסגנונות overflow-x ו-overflow-y בשורה אחת:

overflow: hidden scroll;

אם יצוינו שתי מילות מפתח, הראשונה תחול על overflow-x והשנייה על overflow-y. אחרת, גם ב-overflow-x וגם ב-overflow-y נעשה שימוש באותו ערך.

ערכים

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

‫overflow: visible (ברירת מחדל)

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

overflow: hidden

כשהתוכן של overflow: hidden נחתך בכיוון שצוין, לא סופקו סרגלי גלילה כדי להציג אותו.

overflow: scroll

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

overflow: clip

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

overflow: auto

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

גלילה וחרגה מעבר למכסה

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

גלילה ונגישות

חשוב לוודא שאזור הגלילה יכול לקבל מיקוד, כדי שמשתמשים במקלדת יוכלו להקיש על Tab כדי לעבור לתיבה, ואז להשתמש במקשי החיצים כדי לגלול.

כדי לאפשר לתיבת גלילה לקבל את המיקוד, מוסיפים את tabindex="0", שם עם המאפיין aria-labelledby ומאפיין role מתאים. לדוגמה:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

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

בשימוש ב-CSS לאכיפת נגישות, אדריאן רוסלי (Adrian Roselli) מדגים איך CSS יכול לעזור למנוע נסיגה בנגישות. לדוגמה, כדי להפעיל את הגלילה ולהוסיף את אינדיקטור המיקוד רק אם נעשה שימוש במאפיינים הנכונים. הכללים הבאים יאפשרו גלילה בתיבה רק אם יש לה מאפיינים tabindex,‏ aria-labelledby ו-role.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

מיקום סרגל הגלילה בתוך מודל התיבה

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

גלילה ברמה הבסיסית (root) לעומת גלילה מרומזת

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

כדי ליצור סרגל גלילה ברמה הבסיסית, אפשר להשתמש בהצגת סרגל גלילה. לשם כך, ממקמים מאגר כקבוע, מוודאים שהוא מכסה את כל אזור התצוגה ומגדירים לו את הערך z-index בראש הרשימה עם סרגל גלילה. כאן אפשר לראות גלילה ברמה הבסיסית (root) לעומת גלילה משתמעת מקוננת.

scroll-behavior

scroll-behavior מאפשר לכם להביע הסכמה לגלילה מבוקרת של הדפדפן אל רכיבים. כך תוכלו לציין איך יתבצע הטיפול בניווט בדף, כמו .scrollTo() או קישורים.

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

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

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

בדיקת ההבנה

בדיקת הידע שלכם בנושא Overflow

משאבים

Overflow And Data Loss In CSS מ-Smashing Magazine