הדור הבא של עיצוב באינטרנט

כדאי להתעדכן לגבי כמה מהתכונות המלהיבות בשירות ה-CSS המודרני.

Adam Argyle

Una Kravets

כרגע מתרחשים המון דברים מלהיבים בשירותי CSS – רבים מהם כבר נתמכים בדפדפנים של היום! השיחה שלנו ב-CDS 2019 זמינה לצפייה בהמשך, כוללת מספר תכונות חדשות ועתידיות שחשבנו שצריך להקדיש להן תשומת לב.

הפוסט הזה מתמקד בתכונות שאפשר להשתמש בהן היום, אז אל תשכחו לצפות לדיון מעמיק יותר על תכונות עתידיות כמו Houdini. כמו כן, תוכלו למצוא הדגמות לכל התכונות שבהן אנחנו מדברים הדף CSS@CDS.

תוכן עניינים

• הצמדה לגלילה
• :focus-within
• שאילתות מדיה ברמה 5
• מאפיינים לוגיים
• position: sticky
• backdrop-filter
• :is()
• gap
• שירותי CSS Houdini
• חריגה

לחצן לגלילה

תכונת Scroll Snap מאפשרת להגדיר נקודות הצמדה כשהמשתמש גולל את התוכן שלכם בצורה אנכית, אופקית או בשניהם. יש בו אינרציה וכיוון גלילה מובנים, והוא מופעל במגע.

הקוד לדוגמה הזה מגדיר גלילה אופקית ברכיב <section> עם נקודות הצמדה מיושרות לצד שמאל של רכיבי <picture> צאצא:

section {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

section > picture {
  scroll-snap-align: start;
}

ככה זה עובד:

• ברכיב ההורה <section>,
  • overflow-x מוגדר לערך auto כדי לאפשר גלילה אופקית.
  • overscroll-behavior-x מוגדר לערך contain כדי למנוע גלילה של רכיבי הורה כשהמשתמש מגיע לגבולות אזור הגלילה של הרכיב <section>. (האפשרות הזו לא בגדר המלצה בלבד, אבל בדרך כלל זה רעיון טוב).
  • scroll-snap-type מוגדר לערך x — להצמדה אופקית — ול-mandatory — כדי להבטיח שאזור התצוגה תמיד יצמיד לנקודת ההצמדה הקרובה ביותר.
• ברכיבי הצאצא <picture>, המאפיין scroll-snap-align מוגדר כהתחלה, שמגדיר את נקודות ההצמדה בצד שמאל של כל תמונה (בהנחה שהפרמטר direction מוגדר לערך ltr).

והנה הדגמה חיה:

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

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

:focus-within

:focus-within מטפל בבעיית נגישות ותיקה: יש מקרים רבים שבהם התמקדות ברכיב צאצא אמורה להשפיע על ההצגה של רכיב הורה כדי שממשק המשתמש יהיה נגיש למשתמשים בטכנולוגיות מסייעות.

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

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

.menu:focus-within {
  display: block;
  opacity: 1;
  visibility: visible;
}

כדאי לנסות לעבור בין הכרטיסיות בהדגמה שלמטה. תוכלו לראות שהתפריטים נשארים גלויים כשאתם מתמקדים באפשרויות בתפריט:

רמה 5 של שאילתות מדיה

שאילתות מדיה חדשות מספקות לנו דרכים מתקדמות להתאמה של חוויית המשתמש באפליקציות שלנו, על סמך העדפות המכשיר של המשתמשים. בעיקרון, הדפדפן משמש כשרת proxy להעדפות ברמת המערכת, שנוכל להגיב להן ב-CSS שלנו באמצעות קבוצת prefers-* של שאילתות המדיה:

אלה השאילתות החדשות שלדעתנו המפתחים יעניינו ביותר:

• העדפה לצמצום תנועה
• עדיפות-ערכת צבעים
• עדיפות-ניגודיות
• עדיפות-reduced-transparency
• צבעי כוח
• צבעים הפוכים

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

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

חשוב לאדם ש"מעדיפה תנועה מופחתת" לא מופיע כ'ללא תנועה'. המשתמש אומר שהוא מעדיפים פחות תנועה, ולא שהוא לא רוצה אנימציה. הוא טוען שתנועה מופחתת היא לא תנועה. הנה דוגמה שמשתמשת באנימציה של עמעום הדרגתי כאשר המשתמש מעדיפים תנועה מופחתת:

הערה: ב-Chrome Canary, כדי לבדוק CSS שמשתמש ב-prefers-reduced-motion או ב-prefers-color-scheme, יש לבחור את ההגדרות המתאימות בחלונית ההזזה עיבוד של כלי הפיתוח. כדי לגשת אל רינדור, פותחים את תפריט הפקודה ומריצים את הפקודה Show Rendering.

תכונות לוגיות

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

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

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

• המאפיין בלוק נמצא מאונך לזרימת הטקסט בשורה. (באנגלית, block-size זהה ל-height).
• המאפיין inline הוא מקביל לזרימת הטקסט בשורה. (באנגלית, inline-size זהה ל-width).

שמות המאפיינים האלה חלים על כל מאפייני הפריסה הלוגית. כך, למשל, באנגלית, block-start זהה ל-top, ו-inline-end זהה ל-right.

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

כדי לראות איך מאפיינים לוגיים פועלים בהדגמה הבאה, מגדירים את המאפיין writing-mode ברכיב <body> לערכים שונים:

position: sticky

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

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

סטקי סטאק

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

שקף דביק

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

סטיקי דספראדו

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

backdrop-filter

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

לדוגמה, בהדגמה הזו נעשה שימוש באפקט backdrop-filter כדי להשיג טשטוש בסגנון מערכת ההפעלה:

כבר יש לנו פוסט נהדר על backdrop-filter, אז כדאי להיכנס לדף כדי לקבל עוד מידע.

:is()

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

הנה דוגמה מהירה:

button.focus,
button:focus {
  …
}

article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
  …
}

/* selects the same elements as the code above */
button:is(.focus, :focus) {
  …
}

article > :is(h1,h2,h3,h4,h5,h6) {
  …
}

gap

בפריסת רשת של CSS יש gap (לשעבר grid-gap) כבר לא מעט זמן. על ידי ציון הריווח הפנימי של רכיב מכיל במקום הריווח בין רכיבי צאצא, gap פותר בעיות פריסה נפוצות רבות. לדוגמה, עם פער, אין צורך לדאוג לגבי שוליים של רכיבי צאצא שגורמים לרווח לבן לא רצוי סביב שולי התמונה של רכיב מכיל:

חדשות טובות יותר: gap מגיע ל-Flexbox, עם כל הטבות הריווח שיש ברשת:

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

בסרטון הבא מוצגים היתרונות של שימוש בנכס gap יחיד לשני רכיבים, אחד עם פריסת רשת והשני עם פריסה גמישה:

בשלב הזה, רק FireFox תומך ב-gap בפריסות גמישות, אבל כדאי לשחק עם ההדגמה הזו כדי לראות איך זה עובד:

הודיני של CSS

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

• כך תהיה לכם הרבה יותר אפשרות ליצור תכונות CSS מותאמות אישית.
• קל יותר להפריד בין בעיות רינדור ללוגיקת האפליקציה.
• הוא מניב ביצועים טובים יותר מאשר מילוי פוליגונים של CSS שבו אנחנו משתמשים כרגע ב-JavaScript, מפני שהדפדפן כבר לא יצטרך לנתח סקריפטים ולבצע מחזור עיבוד שני; קוד Houdini מנותח במחזור העיבוד הראשון.

Houdini הוא שם כולל לכמה ממשקי API. מידע נוסף עליהם ועל הסטטוס הנוכחי שלהם זמין במאמר האם Houdini כבר מוכן? בשיחה שלנו דיברנו על Properties ו-Value API, Paint API ו-אנימציה Worklet, כי הם הנפוצים ביותר כרגע. היינו יכולים להקדיש בקלות פוסט מלא לכל אחד מממשקי ה-API המלהיבים האלה, אבל בינתיים, צפו בשיחה שלנו כדי לקבל סקירה כללית וכמה הדגמות מגניבות שיעזרו לכם להבין מה אפשר לעשות בעזרת ממשקי ה-API.

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

יש עוד כמה דברים באופק שרצינו לדון בהם, אבל לא היה לנו זמן לסקור אותם לעומק, אז בדקנו אותם במהירות.⚡ אם עדיין לא שמעת על חלק מהתכונות האלה, כדאי לצפות בחלק האחרון של השיחה.

• size: מאפיין שיאפשר לכם להגדיר גובה ורוחב בו-זמנית
• aspect-ratio: נכס שקובע יחס גובה-רוחב לרכיבים שאין להם יחס גובה-רוחב
• min(), max() ו-clamp(): פונקציות שמאפשרות להגדיר אילוצים מספריים בכל מאפיין CSS, ולא רק ברוחב ובגובה
• list-style-type הוא נכס קיים, אבל בקרוב הוא יתמוך בטווח ערכים רחב יותר, כולל סמלי אמוג'י וקובצי SVG
• display: outer inner: הנכס display יקבל בקרוב שני פרמטרים, שיאפשרו לך לציין במפורש את הפריסה החיצונית והפנימית שלו, במקום להשתמש במילות מפתח מורכבות כמו inline-flex.
• אזורים ב-CSS: מאפשרים למלא אזור ספציפי, לא מלבני, שהתוכן יכול לזרום אליו ומחוץ לו.
• מודולים של CSS: JavaScript יוכל לבקש מודול CSS ולקבל חזרה אובייקט עשיר שקל לבצע בו פעולות.