מעטפת CSS: 2023!

כותרת עטופה ב-CSS

סיכום השנה של CSS: 2023

מעבר לתוכן:

וואו! 2023 הייתה שנה ענקית לשירותי CSS!

מ-#Interop2023 ועד לכמה דפי נחיתה חדשים בתחום CSS ו-UI שמאפשרים יכולות שמפתחים ראו בעבר כבלתי אפשריות בפלטפורמת האינטרנט. עכשיו כל דפדפן מודרני תומך בשאילתות של קונטיינרים, ברשת משנה, בבורר :has() ובמגוון רחב של פונקציות ומרחבי צבעים חדשים. ב-Chrome יש תמיכה באנימציות שמבוססות על גלילה ב-CSS בלבד, ובאנימציות חלקות בין תצוגות אינטרנט באמצעות מעבר בין תצוגות. נוסף על כך, יש הרבה רכיבים פרימיטיביים חדשים שנוספו כדי לשפר את חוויית הפיתוח, כמו עיצוב CSS בתצוגת עץ וסגנונות מוגדרים-היקף.

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

יסודות ארכיטקטוניים

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

פונקציות טריגונומטריות

תמיכה בדפדפנים

  • Chrome: ‏ 111.
  • Edge:‏ 111.
  • Firefox: 108.
  • Safari: 15.4.

מקור

ב-Chrome 111 נוספה תמיכה בפונקציות טריגונומטריות sin(), cos(), tan(), asin(), acos(), atan() ו-atan2(), והן זמינות עכשיו בכל המנועים העיקריים. הפונקציות האלה שימושיות מאוד לצורכי אנימציה ועיצוב. לדוגמה, עכשיו קל יותר להציב רכיבים במעגל סביב מרכז שנבחר.

הדגמה של פונקציות טריגונומטריות

מידע נוסף על הפונקציות הטריגונומטריות ב-CSS

בחירה מורכבת של nth-*

תמיכה בדפדפנים

  • Chrome: ‏ 111.
  • Edge:‏ 111.
  • Firefox:‏ 113.
  • Safari: 9.

באמצעות בורר הסיווג המזויף :nth-child() אפשר לבחור רכיבים ב-DOM לפי האינדקס שלהם. באמצעות מיקרו-תחביר An+B אפשר לשלוט באופן מדויק באילו אלמנטים רוצים לבחור.

כברירת מחדל, פסאודו-ה-:nth-*() מביאים בחשבון את כל רכיבי הצאצאים. החל מגרסה 111 של Chrome, אפשר גם להעביר רשימת בוחרים אל :nth-child() ו-:nth-last-child(). כך תוכלו לסנן מראש את רשימת הילדים לפני ש-An+B יבצע את הפעולה שלו.

בדמו הבא, הלוגיקה של 3n+1 חלה רק על הבובות הקטנות, על ידי סינון מראש באמצעות of .small. אפשר להשתמש בתפריטים הנפתחים כדי לשנות באופן דינמי את הבורר שמשמש.

הדגמה של בחירה מורכבת של nth-*

מידע נוסף על בחירות מורכבות מסוג nth-*

היקף

תמיכה בדפדפנים

  • Chrome:‏ 118.
  • Edge:‏ 118.
  • Firefox: מאחורי דגל.
  • Safari: 17.4.

מקור

בגרסה 118 של Chrome נוספה תמיכה ב-@scope, כלל קבוע שמאפשר התאמה של בורר היקפי ההרשאות לעץ משנה ספציפי במסמך. בעזרת עיצוב ברמת ההיקף, אפשר לבחור אלמנטים באופן ספציפי מאוד בלי לכתוב סלקטורים ספציפיים מדי או לקשר אותם באופן הדוק למבנה ה-DOM.

עץ משנה ברמת ההיקף מוגדר על ידי שורש ברמת ההיקף (הגבול העליון) ומגבלה ברמת ההיקף (הגבול התחתון) אופציונלית.

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

כללי סגנון שממוקמים בתוך בלוק היקף יטרגטו רק אלמנטים בתוך עץ המשנה שנחתך. לדוגמה, כלל הסגנון ברמת ההיקף הבא מטרגט רק אלמנטים מסוג <img> שנמצאים בין רכיב .card לבין כל רכיב בתצוגת עץ שתואמת לבורר [data-component].

@scope (.card) to ([data-component]) {
  img { … }
}

בדמו הבא, הרכיבים <img> ברכיב הקרוסלה לא תואמים בגלל מגבלת ההיקף שהוגדרה.

צילום מסך של הדגמה של היקף

צילום מסך לדוגמה להדגמה של @scope

הדגמה בשידור חי של ההיקף

דוגמה ל-CSS @scope

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

הטמעה

תמיכה בדפדפנים

  • Chrome:‏ 120.
  • Edge:‏ 120.
  • Firefox:‏ 117.
  • Safari: 17.2.

מקור

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

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

הקלטת מסך בתוך הקלטת מסך

הדגמה בשידור חי של Nesting

שינוי הבורר של עריכת עץ משוחררת כדי לקבוע את המנצח במרוץ

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

מידע נוסף על עיבוי

רשת משנה

תמיכה בדפדפנים

  • Chrome: 117.
  • Edge:‏ 117.
  • Firefox: 71.
  • Safari: 16.

מקור

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

הקלטת מסך בתת-רשת

הדגמה בשידור חי של Subgrid

הכותרת, הגוף והכותרות התחתונות מותאמים לגדלים הדינמיים של הרכיבים האחים שלהם.

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

מידע נוסף על רשת משנה

טיפוגרפיה

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

Initial-letter

תמיכה בדפדפנים

  • Chrome: 110.
  • Edge:‏ 110.
  • Firefox: לא נתמך.
  • Safari: 9.

מקור

הנכס initial-letter, שנוסף בתחילת השנה בגרסה 110 של Chrome, הוא תכונה קטנה אך חזקה של CSS שמגדירה את הסגנון של מיקום האותיות הראשונות. אפשר למקם אותיות במצב 'שמט' או 'מוגבה'. הנכס מקבל שני ארגומנטים: הראשון קובע את עומק ההטמעה של האות בפסקה המתאימה, והשני קובע את גובה האות מעל הפסקה. אפשר גם לשלב בין השניים, כמו בדמו הבא.

צילום מסך של האות הראשונה

צילום מסך של הדגמה של אות ראשית

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

משנים את הערכים של initial-letter עבור רכיב הסוג הנפוץ ::first-letter כדי לראות את ההזזה.

מידע נוסף על initial-letter

text-wrap: balance and pretty

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

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

הקלטת מסך בעטיפת טקסט

הדגמה בשידור חי של גלישת טקסט

בדמו הבא אפשר להשוות, על ידי גרירה של פס ההזזה, את ההשפעות של balance ו-pretty על כותרת ועל פסקה. כדאי לנסות לתרגם את ההדגמה לשפה אחרת!

מידע נוסף על גלישת טקסט: יתרה

צבע

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

מרחבי צבע באיכות HD (רמת צבע 4)

תמיכה בדפדפן

  • Chrome: ‏ 111.
  • Edge:‏ 111.
  • Firefox:‏ 113.
  • Safari: 15.

מקור

תמיכה בדפדפנים

  • Chrome: 111.
  • Edge:‏ 111.
  • Firefox: 113.
  • Safari: 15.

מקור

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

עכשיו אפשר להשתמש ב-CSS ובצבעים כדי: - לבדוק אם חומרת המסך של המשתמשים תומכת בצבעים רחבי-טווח של HDR. - בודקים אם הדפדפן של המשתמש מבין תחביר צבעים כמו Oklch או Display P3. - ציון צבעי HDR ב-Oklab, ב-Oklch, ב-HWB, ב-Display P3, ב-Rec.2020, ב-XYZ ועוד. - יצירת הדרגתיות באמצעות צבעי HDR - אינטרפולציה של הדרגתיות במרחבי צבעים חלופיים. - משלבים צבעים באמצעות color-mix(). - ליצור וריאציות צבע עם תחביר צבעים יחסי.

הקלטת מסך של Color 4

הדגמת Color 4

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

מידע נוסף על Color 4 ומרחבי צבעים

פונקציית color-mix

תמיכה בדפדפנים

  • Chrome: ‏ 111.
  • קצה: 111.
  • Firefox:‏ 113.
  • Safari: 16.2.

מקור

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

הקלטת מסך של color-mix()

הדגמה של color-mix()‎

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

אפשר לחשוב על color-mix() כעל רגע בזמן מתוך שיפוע. בעוד ששימוש בצבעים מדורגים מאפשר להציג את כל השלבים שעוברים מהצבע הכחול לצבע הלבן, color-mix() מציג רק שלב אחד. הדברים מתקדמים כשמתחילים להביא בחשבון מרחבי צבעים, ומגלים עד כמה מרחבי הצבעים של המיקס יכולים להשפיע על התוצאות.

מידע נוסף על color-mix()‎

תחביר של צבעים יחסיים

תחביר צבע יחסי (RCS) הוא שיטה משלימה ל-color-mix() ליצירת וריאציות של צבעים. היא קצת יותר חזקה מ-color-mix(), אבל גם שיטת עבודה שונה עם צבע. color-mix() יכול לשלב את הצבע הלבן כדי להבהיר צבע, כאשר RCS מספק גישה מדויקת לערוץ הבהירות ואפשרות להשתמש ב-calc() בערוץ כדי להפחית או להגדיל את הבהירות באופן פרוגרמטי.

הקלטת מסך ב-RCS

הדגמה של RCS בשידור חי

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

אתם יכולים להשתמש ב-RCS כדי לבצע מניפולציות יחסיות ומוחלטות על צבע מסוים. שינוי יחסי הוא שינוי שבו לוקחים את הערך הנוכחי של הרוויה או הבהירות ומשנים אותו באמצעות calc(). שינוי מוחלט הוא שינוי שבו מחליפים ערך של ערוץ בערך חדש לגמרי, כמו הגדרת שקיפות ל-50%. התחביר הזה מספק לכם כלים משמעותיים לנושאים, וריאנטים בזמן אמת ועוד.

מידע נוסף על תחביר צבעים יחסי.

עיצוב רספונסיבי

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

שאילתות לגבי קונטיינרים של גודל

תמיכה בדפדפנים

  • Chrome: 105.
  • קצה: 105.
  • Firefox: 110.
  • Safari: 16.

מקור

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

כדי להשתמש בתכונה הזו, קודם צריך להגדיר גבולות לרכיב שלגביו אתם שולחים שאילתה, ואז, בדומה לשאילתת מדיה, משתמשים ב-@container עם פרמטרים של גודל כדי להחיל את הסגנונות. יחד עם שאילתות המאגרים, מוצגים גדלים של שאילתות המאגרים. בהדגמה הבאה, גודל שאילתת המאגר cqi (שמייצג את הגודל של המאגר בתוך השורה) משמש לקביעת הגודל של כותרת הכרטיס.

@container Screencast

הדגמה של @container

מידע נוסף על שימוש בשאילתות מאגר

שאילתות של קונטיינרים של סגנונות

תמיכה בדפדפנים

  • Chrome: ‏ 111.
  • Edge:‏ 111.
  • Firefox: לא נתמך.
  • Safari: 18.

מקור

שאילתות סגנון הוטמעו באופן חלקי ב-Chrome 111. כרגע עם שאילתות סגנון, אפשר להריץ שאילתות על הערך של מאפיינים מותאמים אישית ברכיב הורה כשמשתמשים ב-@container style(). לדוגמה, אפשר לשלוח שאילתה כדי לבדוק אם ערך של מאפיין מותאם אישית קיים, או אם הוא מוגדר לערך מסוים, כמו @container style(--rain: true).

צילום מסך של שאילתה בסגנון

צילום מסך להדגמה של כרטיסי מזג אוויר לשאילתות מאגרי סגנון

הדגמה של שאילתת סגנון

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

נשמע דומה לשימוש בשמות של מחלקות ב-CSS, אבל לשאילתות סגנון יש כמה יתרונות. הראשונה היא שבאמצעות שאילתות סגנון, תוכלו לעדכן את הערך ב-CSS לפי הצורך במצבי פסאודו. בנוסף, בגרסאות עתידיות של ההטמעה תוכלו להריץ שאילתות על טווחי ערכים כדי לקבוע את הסגנון שיוחל, כמו style(60 <= --weather <= 70), ואת הסגנון על סמך צמדי מאפיין-ערך, כמו style(font-style: italic).

מידע נוסף על שימוש בשאילתות סגנון

סלקטור:has()

תמיכה בדפדפנים

  • Chrome: 105.
  • Edge:‏ 105.
  • Firefox:‏ 121.
  • Safari: 15.4.

מקור

במשך כמעט 20 שנים מפתחים ביקשו 'בורר בקרת הורים' ב-CSS. אפשר לעשות זאת עכשיו באמצעות הבורר :has() שנוסף בגרסת Chrome 105. לדוגמה, שימוש ב-.card:has(img.hero) יבחר את הרכיבים של .card שיש להם תמונה ראשית כצאצא.

צילום מסך לדוגמה של :has()

צילום מסך לדוגמה להדגמה של ‎ :has()

הדגמה של :has() בשידור חי

הדגמה של :has() לשירות CSS: כרטיס בלי/עם תמונה

מכיוון ש-:has() מקבל רשימת סלקטור יחסית כארגומנט, אפשר לבחור הרבה יותר מאשר רכיב ההורה. באמצעות שילובי CSS שונים, ניתן לא רק לעלות על עץ ה-DOM, אלא גם לבצע בחירות הצידה. לדוגמה, הפונקציה li:has(+ li:hover) תבחר ברכיב <li> שקודם לרכיב <li> שמוצג כרגע כשמעבירים את העכבר מעליו.

:has() Screencast

הדגמה של ‎:has()

הדגמה (דמו) :has() של שירות ה-CSS: אביזר עגינה

מידע נוסף על הסלקטור :has() ב-CSS

עדכון של שאילתה לגבי מדיה

תמיכה בדפדפנים

  • Chrome:‏ 113.
  • Edge:‏ 113.
  • Firefox: 102.
  • Safari: 17.

מקור

שאילתה המדיה update מאפשרת להתאים את ממשק המשתמש לקצב הרענון של המכשיר. התכונה יכולה לדווח על הערך fast,‏ slow או none שקשור ליכולות של מכשירים שונים.

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

עדכון הקלטת המסך

עדכון הדגמה

לבחור אפשרות ברדיו כדי לדמות ערך של מהירות עדכון ולראות איך הוא משפיע על הברווז.

מידע נוסף על ‎@media (עדכון)

כתיבת שאילתת מדיה

תמיכה בדפדפנים

  • Chrome:‏ 120.
  • Edge:‏ 120.
  • Firefox:‏ 113.
  • Safari: 17.

מקור

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

כאן מוסבר איך מפעילים ומשביתים את JavaScript בדף לצורך בדיקה באמצעות כלי הפיתוח ל-Chrome.

הקלטת מסך של סקריפט

הדגמה של כתיבת סקריפטים

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

מידע נוסף על סקריפט

שאילתה של מדיה עם שקיפות מופחתת

תמיכה בדפדפנים

  • Chrome:‏ 118.
  • Edge:‏ 118.
  • Firefox: מאחורי דגל.
  • Safari: לא נתמך.

מקור

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

הקלטת מסך מופחתת בשקיפות

הדגמה של שקיפות מופחתת

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

מידע נוסף על @media (prefers-reduced-transparency)

אינטראקציה

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

הצגת מעברים

תמיכה בדפדפנים

  • Chrome: ‏ 111.
  • קצה: 111.
  • Firefox: לא נתמך.
  • Safari: 18.

מקור

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

הליבה של View Transitions API היא הפונקציה document.startViewTranstion. מעבירים פונקציה שמעדכנת את ה-DOM למצב החדש, וה-API יטפל בשבילכם בכל המשימות. כדי לעשות זאת, המערכת מתעדת תמונת מצב לפני ואחרי, ולאחר מכן מבצעת מעבר בין שתי התמונות. באמצעות CSS אפשר לקבוע מה יתועד, ואפשר גם להתאים אישית את האנימציה של התמונות הסטטיות האלה.

VT Screencast

הדגמת VT

לצפייה בהדגמה של 'מעברים'

ממשק View Transitions API לאפליקציות עם דף יחיד, ששולחים ב-Chrome 111. מידע נוסף על הצגת מעברים

פונקציית Linear-easing

תמיכה בדפדפן

  • Chrome:‏ 113.
  • Edge:‏ 113.
  • Firefox:‏ 112.
  • Safari: 17.2.

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

לפני linear(), ששוחררה ב-Chrome 113, לא ניתן היה ליצור אפקטים של קפיצה או קפיץ ב-CSS. בעזרת linear() אפשר להתקרב לתנועות ההאטה האלה על ידי הפשטה שלהן לסדרה של נקודות, ואז ביצוע אינטרפולציה ליניארית בין הנקודות האלה.

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

הקלטת מסך עם עיכוב לינארי

הדגמה של עקומת האצה לינארית

דוגמה ל-CSS linear()

מידע נוסף על linear() כדי ליצור עקומות linear(), משתמשים במחולל העקומות של העמעום הליניארי.

סיום הגלילה

תמיכה בדפדפנים

  • Chrome:‏ 114.
  • קצה: 114.
  • Firefox:‏ 109.
  • Safari: לא נתמך.

מקור

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

הקלטת מסך עם גלילה

הדגמה של גלילה

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

מידע נוסף על scrollend

אנימציות שמתבססות על גלילה

תמיכה בדפדפנים

  • Chrome:‏ 115.
  • Edge:‏ 115.
  • Firefox: מאחורי דגל.
  • Safari: לא נתמך.

מקור

אנימציות שמתבססות על גלילה הן תכונה מעניינת שזמינה ב-Chrome מגרסה 115. בעזרת האפשרויות האלה אפשר לקחת אנימציית CSS קיימת או אנימציה שנוצרה באמצעות Web Animations API, ולשייך אותה להיסט הגלילה של סרגל הגלילה. כשגוללים למעלה ולמטה – או שמאלה וימינה בגלילה אופקית, האנימציה המקושרת גוללים קדימה ואחורה בתגובה ישירה.

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

הקלטת מסך של SDA

הדגמה של SDA

הדגמה של אנימציות מבוססות-גלילה ב-CSS: ציר זמן של גלילה

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

Screencast הדגמה של SDA

הדגמה של SDA בשידור חי

הדגמה של אנימציות מבוססות גלילה בשירות CSS: צפייה בציר הזמן

אנימציות שמבוססות על גלילה פועלות עם אנימציות CSS ועם Web Animations API, כך שתוכלו ליהנות מכל היתרונות של ממשקי ה-API האלה. היכולת הזו כוללת את האפשרות להפעיל את האנימציות האלה מחוץ ל-thread הראשי. עכשיו אפשר ליהנות מאנימציות חלקות וחלקות, שמונעות על ידי גלילה, ומדלגות על השרשור הראשי עם כמה שורות קוד נוספות. איזה כיף!

מידע נוסף על אנימציות שמתבססות על גלילה זמין במאמר הזה עם כל הפרטים או בכתובת scroll-driven-animations.style, שכוללת הרבה הדגמות.

קובץ מצורף של ציר זמן שנדחה

תמיכה בדפדפנים

  • Chrome:‏ 116.
  • Edge:‏ 116.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

מקור

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

כדי לאפשר לרכיב המונפש למצוא ציר זמן בעל שם של ישות שאינה ישות אב, צריך להשתמש במאפיין timeline-scope ברכיב הורה משותף. כך אפשר לצרף אליו את scroll-timeline או view-timeline שהוגדרו בשם הזה, וכך להרחיב את ההיקף שלו. לאחר מכן, כל צאצא של ההורה המשותף הזה יוכל להשתמש בציר הזמן עם השם הזה.

תצוגה חזותית של עץ משנה של DOM ברמת ציר הזמן, שמשמש הורה משותף
כשה-timeline-scope מוגדר בהורה המשותף, ה-scroll-timeline שמוגדר ב-scroller יכול להימצא על ידי האלמנט שמשתמש בו כ-animation-timeline שלו

הדגמה של Screencast

הדגמה בשידור חי

הדגמה של אנימציות מבוססות-גלילה ב-CSS: צירוף של ציר זמן מושהה

למידע נוסף על timeline-scope.

אנימציות של נכסים נפרדים

יכולת חדשה נוספת בשנת 2023 היא האפשרות ליצור אנימציות של אנימציות נפרדות, כמו יצירת אנימציה מ-display: none וממנו. החל מגרסה 116 של Chrome, אפשר להשתמש בכללי display וב-content-visibility בכללי תמונות מפתח. אפשר גם להעביר כל נכס נפרד בנקודה של 50% במקום בנקודה של 0%. אפשר לעשות זאת באמצעות הנכס transition-behavior באמצעות מילת המפתח allow-discrete, או בנכס transition כקיצור דרך.

אנימציה בדידה הקלטת מסך

אנימציה בדידה הדגמה (דמו)

מידע נוסף על אנימציות נפרדות במעברים

‎@starting-style

תמיכה בדפדפנים

  • Chrome:‏ 117.
  • Edge:‏ 117.
  • Firefox: ‏ 129.
  • Safari: 17.5.

מקור

כלל ה-CSS @starting-style מבוסס על יכולות אינטרנט חדשות ליצירת אנימציה אל display: none וממנו. הכלל הזה מאפשר להגדיר לאלמנט סגנון 'לפני פתיחה' שהדפדפן יכול לחפש לפני שהאלמנט נפתח בדף. האפשרות הזו שימושית מאוד ליצירת אנימציות כניסה, וליצירת אנימציות ברכיבים כמו חלון קופץ או תיבת דו-שיח. אפשר גם להשתמש בה בכל פעם שיוצרים רכיב ומעוניינים להוסיף לו אנימציה. בדוגמה הבאה מוצגת אנימציה של מאפיין popover (ראו בקטע הבא) שמופיע בתצוגה ובשכבה העליונה בצורה חלקה מחוץ למסך.

@starting-style Screencast

הדגמה של @starting-style

מידע נוסף על ‎@starting-style ועל אנימציות כניסה אחרות

שכבת-על

תמיכה בדפדפנים

  • Chrome:‏ 117.
  • Edge:‏ 117.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

מקור

אפשר להוסיף את מאפיין ה-CSS החדש overlay למעבר כדי לאפשר לרכיבים עם סגנונות בשכבה העליונה – כמו popover ו-dialog – לצאת מהשכבה העליונה בצורה חלקה באמצעות אנימציה. אם לא תעבירו שכבת-על, הרכיב יחזור מיד לחיתוך, לטרנספורמציה ולכיסוי, והמעבר לא יתבצע. באופן דומה, overlay מאפשר ל-::backdrop להיעלם בצורה חלקה כשהוא מתווסף לרכיב בשכבה העליונה.

שכבת-על של הקלטת מסך

הדגמה של שכבת-על בשידור חי

מידע נוסף על שכבות-על ועל אנימציות יציאה אחרות

רכיבים

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

חלון קופץ

תמיכה בדפדפנים

  • Chrome: 114.
  • Edge: 114.
  • Firefox:‏ 125.
  • Safari: 17.

מקור

Popover API עוזר ליצור רכיבים שממוקמים מעל שאר הדף. למשל: תפריטים, בחירת פריטים ותיאורים של כלים. כדי ליצור חלון קופץ פשוט, אפשר להוסיף את המאפיין popover ואת המאפיין id לרכיב שקופץ, ולחבר את המאפיין id ללחצן ההפעלה באמצעות popovertarget="my-popover". ה-API של חלונות קופצים תומך באפשרויות הבאות:

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

הקלטת מסך בחלון קופץ

הדגמה של חלון קופץ בשידור חי

כללים אופקיים ב-select

שינוי קטן נוסף ב-HTML שנוסף ל-Chrome ול-Safari השנה הוא היכולת להוסיף רכיבי קו אופקי (תגי <hr>) לרכיבי <select> כדי לעזור לפצל את התוכן מבחינה חזותית. בעבר, הוספה של תג <hr> לבחירה לא תאפשר פשוט לעבד. אבל השנה, גם Safari וגם Chrome תומכים בתכונה הזו, ומאפשרים הפרדה טובה יותר של תוכן בתוך רכיבי <select>.

בחירת צילום מסך

צילום מסך של השעה שנבחרה עם עיצוב בהיר כהה ב-Chrome

בוחרים באפשרות 'הדגמה פעילה'.

למידע נוסף על שימוש בשעות מסוימות בבחירה

:user-valid ו-user-invalid – פסאודו-כיתות

תמיכה בדפדפן

  • Chrome:‏ 119.
  • Edge:‏ 119.
  • Firefox: 88.
  • Safari: 16.5.

מקור

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

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

:user-* Screencast

:user-* הדגמה בשידור חי

מידע נוסף על שימוש בפסאודו-אלמנטים של אימות טפסים מסוג user-*

תצוגת אקורדיון בלעדית

תמיכה בדפדפן

  • Chrome: 120.
  • Edge:‏ 120.
  • Firefox:‏ 130.
  • Safari: 17.2.

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

חדש בגרסה 120 של Chrome: תמיכה במאפיין name ברכיבי <details>. כשמשתמשים במאפיין הזה, כמה רכיבי <details> שיש להם את אותו ערך name יוצרים קבוצה סמנטית. אפשר לפתוח בו-זמנית רק רכיב אחד בקבוצה: כשפותחים אחד מהרכיבים <details> מהקבוצה, הרכיב שהיה פתוח קודם נסגר באופן אוטומטי. סוג האקורדיון הזה נקרא אקורדיון בלעדי.

הדגמה בלעדית של חלונית נפתחת

הרכיבים <details> שהם חלק מאקורדיון בלעדי לא חייבים להיות אחים. אפשר לפזר אותן לאורך המסמך.

סיכום

בשנים האחרונות, ובמיוחד במהלך שנת 2023, הייתה ל-CSS תקופת פריחה. אם זו הפעם הראשונה שאתם משתמשים בשירות CSS או שאתם רוצים לרענן את הידע שלכם על העקרונות הבסיסיים, מומלץ לנסות את הקורס החינמי שלנו למידת CSS וגם את הקורסים האחרים שמוצעים בחינם באתר web.dev.

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

⇾ צוות DevRel של ממשק Chrome,

Una Kravets
Bramus
Adam Argyle
Adam Argyle
X GitHub