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
מקבל 2 מילות מפתח. מילת המפתח הראשונה מיועדת לציר איזה?
איזה מקום במודל התיבה סרגל הגלילה תופס כשהוא מוצג ובשורה?
כדי למשוך תנעה מיותרת מגלילה בגלילה משתמעת מקוננת, באיזה מאפיין להשתמש?
scroll-hint
overscroll-effect
scroll-padding
overscroll-behavior
scroll-behavior