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 בשני חלקים. לרכיב ההורה יש שטח מוגבל שלא ישתנה. אפשר לחשוב עליו כחלון. רכיבי הצאצא הם תוכן שרוצים יותר מקום מהרכיב ההורה. אפשר לחשוב על זה כעל מה שאתם רואים דרך החלון. ניהול ה-overflow יעזור לכם לקבוע איך החלון יכיל את התוכן הזה.
גלילה בציר האנכי והאופקי
המאפיין 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-scroller לעומת implicit-scroller
יכול להיות שתבחינו שחלק מהגלילים כוללים התנהגות של 'משיכה לרענון' והתנהגויות מיוחדות אחרות, במיוחד כשאתם מפתחים אפליקציות לנייד ולאפליקציות היברידיות. התנהגות הגלילה הזו מתרחשת בגלילה ברמה הבסיסית. בדף יכול להיות רק סרגל גלילה אחד ברמה הבסיסית. כברירת מחדל, הרכיב documentElement הוא רכיב הגלילה ברמה הבסיסית של הדף. עם זאת, אם משנים את הרכיב הזה, אפשר להחיל את ההתנהגויות המיוחדות על רכיבי גלילה אחרים מלבד documentElement. אנחנו קוראים לרכיב הגלילה החדש הזה רכיב הגלילה ברמה הבסיסית (implicit root scroller).
כדי ליצור סרגל גלילה ברמה הבסיסית, אפשר להשתמש בהצגת סרגל גלילה. לשם כך, ממקמים מאגר כקבוע, מוודאים שהוא מכסה את כל אזור התצוגה ומגדירים לו את הערך z-index בראש הרשימה עם סרגל גלילה. כאן אפשר לראות את ההבדל בין גלילה ברמה הבסיסית לבין גלילה משתמעת בתצוגת עץ.
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
מקבל 2 מילות מפתח. מילת המפתח הראשונה מיועדת לאיזה ציר?
איזה מקום במודל התיבה סרגל הגלילה תופס כשהוא מוצג ובשורה?
כדי לתפוס תנופה נוספת מהגלילה בתוך סרגל גלילה מרובד סמוי, באיזה מאפיין כדאי להשתמש?
scroll-padding
overscroll-effect
overscroll-behavior
scroll-behavior
scroll-hint