הפודקאסט של CSS – 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;
}
שימוש במאפייני אפשרויות נוספות
מאפייני גלישה מוגדרים על רכיב כדי לשלוט במה שקורה כשהצאצאים שלו צריכים יותר מקום מהשטח הזמין. מצב כזה יכול להיות מכוון, כמו במפה אינטראקטיבית כמו מפות Google, שבה המשתמש מסייר בתמונה גדולה שנחתכה בגודל מסוים. זה יכול להיות גם בלי כוונה, כמו באפליקציית צ'אט שבה המשתמש מקליד הודעה ארוכה שלא נכנסת לבועת הטקסט.
אפשר לחשוב על הגלישה בשני חלקים. ברכיב ההורה יש רווח מוגבל מאוד שלא ישתנה. ניתן לדמות זאת לחלון. רכיבי הצאצא הם תוכן שצריך שטח גדול יותר מההורה. אפשר לדמות את זה למה שאתם מסתכלים עליו מבעד לחלון. ניהול האפשרויות הנוספות ידריך אותך לגבי האופן שבו החלון משקף את התוכן הזה.
גלילה על הציר האנכי והציר האופקי
המאפיין overflow-y
שולט בגלישה פיזית לאורך הציר האנכי של אזור התצוגה במכשיר, ולכן מתבצעת גלילה למעלה ולמטה.
אמצעי הבקרה של המאפיין overflow-x
גוללים לאורך הציר האופקי של אזור התצוגה במכשיר, ולכן מתבצעת גלילה שמאלה וימינה.
מאפיינים לוגיים לכיוון הגלילה
המאפיינים 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
נחתך בתיבת המרווח הפנימי של הרכיב. ההבדל בין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 כדי לציין שהתיבה מכילה מיקוד, ולהשתמש במאפיין outline
כדי לספק רמז חזותי לכך שעכשיו ניתן לגלול את התיבה.
בשימוש ב-CSS כדי לאכוף נגישות אדריאן רוסלי מדגים איך CSS יכול לעזור במניעת רגרסיות של נגישות. לדוגמה, כדי להפעיל גלילה ולהוסיף את אינדיקטור המיקוד רק אם נעשה שימוש במאפיינים הנכונים. הכללים הבאים יאפשרו גלילה בתיבה רק אם יש בה מאפיין tabindex
, aria-labelledby
ו-role
.
[role][aria-labelledby][tabindex] {
overflow: auto;
}
[role][aria-labelledby][tabindex]:focus {
outline: .1em solid blue;
}
מיקום סרגל גלילה בתוך מודל התיבה
עמודות גלילה תופסות מקום בתיבת המרווח הפנימי והן יכולות להתחרות על מקום אם inline
ולא overlaid
. המודול של מודל התיבה מרחיב יותר את האפשרות הזו במקור הפוטנציאלי הזה לשינוי בפריסה.
גלילה ברמה הבסיסית (root) לעומת גלילה מרומזת
ייתכן ששימו לב שלגלי גלילה מסוימים יש התנהגות של 'משיכה לרענון' והתנהגויות מיוחדות אחרות, במיוחד בעת פיתוח עבור אפליקציות לנייד והיברידיות. פעולת הגלילה הזו מתרחשת בלחצן הגלילה ברמה הבסיסית. בדף יש רק לחצן גלילה אחד ברמה הבסיסית (root). כברירת מחדל, documentElement הוא פס הגלילה של הדף ברמה הבסיסית. עם זאת, אם משנים את הרכיב שמשמש לגלילה ברמה הבסיסית (root), ניתן להחיל את ההתנהגויות המיוחדות של גלילה על פריטי גלילה שאינם documentElement. לכן אנחנו מכנים את הגלילה החדשה הזו כגלילה הבסיסית המרומזת.
כדי ליצור גורם גלילה ברמה הבסיסית (root), אפשר להשתמש בשיטה שנקראת קידום גלילה. לשם כך, ממקמים מאגר תגים באופן קבוע, וכך מוודאים שהוא מכסה את כל אזור התצוגה וש-z-index בחלק העליון באמצעות גלילה. דוגמה לגלילה ברמה הבסיסית (root) לעומת פעולת גלילה מרומזת שהוצגה כאן.
התנהגות גלילה
ב-scroll-behavior
אפשר לבחור בגלילה ברכיבים שבשליטת הדפדפן. ההגדרה הזו מאפשרת לציין את אופן הטיפול בניווט בתוך הדף, כמו .scrollTo()
או בקישורים.
האפשרות הזו שימושית במיוחד עם prefers-reduced-motion כדי לציין את התנהגות הגלילה על סמך העדפת המשתמש.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
התנהגות שנגללת מעל
אם אי פעם הגעתם לסוף של שכבת-על, והמשכתם בגלילה והדף שמאחורי שכבת-העל זז, זוהי שרשרת הגלילה, או מבעבע עד למאגר ההורה של גלילה. המאפיין overscroll-behavior
מאפשר למנוע דליפה של גלילת גלישה אל מאגר הורה (שנקרא 'שרשור גלילה').
בדיקת ההבנה
בחינת הידע שלך בנושא גלישה
גלישת טקסט וגלישת רכיבים זהות?
בנכס overflow
אפשר להוסיף 2 מילות מפתח. לאיזה ציר מיועדת מילת המפתח הראשונה?
איזה מקום במודל התיבה צורכים פסי גלילה כשהם מציגים אותם בתוך השורה?
overlay
יחפפו למרווח הפנימי, ובמצב inline
יתווספו למרווח הפנימי.באיזה מאפיין כדאי להשתמש כדי לתפוס מומנטום נוסף בעקבות גלילה באמצעות סרגל גלילה משתמע מקונן?
scroll-behavior
scroll-hint
overscroll-behavior
contain
תגרור גלילה.scroll-padding
overscroll-effect