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

הפודקאסט של 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 גוללים לאורך הציר האופקי של אזור התצוגה במכשיר, ולכן מתבצעת גלילה שמאלה וימינה.

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

תמיכה בדפדפן

  • x
  • x
  • 69
  • 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) לעומת פעולת גלילה מרומזת שהוצגה כאן.

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

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

תמיכה בדפדפן

  • 61
  • 79
  • 36
  • 15.4

מקור

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

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

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

התנהגות שנגללת מעל

תמיכה בדפדפן

  • 63
  • 18
  • 59
  • 16

מקור

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

בדיקת ההבנה

בחינת הידע שלך בנושא גלישה

גלישת טקסט וגלישת רכיבים זהות?

true
גלישת טקסט היא מיוחדת בהשוואה לגלישת רכיבים.
false
'גלישת טקסט' מתייחסת בדרך כלל לגלישת טקסט בתוך שורה, כאשר 'גלישת טקסט' מתייחסת לדפדוף בין בלוקים.

בנכס overflow אפשר להוסיף 2 מילות מפתח. לאיזה ציר מיועדת מילת המפתח הראשונה?

אופקי
🎉
קטגוריית ישויות (vertical)
כמעט תמיד, כשמעבירים שני ערכים מקוצרים, הראשון הוא אופקי.

איזה מקום במודל התיבה צורכים פסי גלילה כשהם מציגים אותם בתוך השורה?

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

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

scroll-behavior
כדאי לנסות שוב.
scroll-hint
כדאי לנסות שוב.
overscroll-behavior
הגדרת המאפיין הזה כ-contain תגרור גלילה.
scroll-padding
כדאי לנסות שוב.
overscroll-effect
כדאי לנסות שוב.

מקורות מידע

זרימת יתר ואובדן נתונים ב-CSS מ-Smashing Magazine