דף זה תורגם על ידי Cloud Translation API.

מעטפת CSS: 2023!

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

מעבר לתוכן:

יסודות ארכיטקטוניים
פונקציות טריגונומטריות
בחירה מורכבת של nth-*
היקף
הטמעה

טיפוגרפיה
Initial-letter
Text-wrap balance/pretty

צבע
רמת צבע 4
פונקציית ערבוב צבעים
תחביר של צבעים יחסיים

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

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

רכיבים
חלון קופץ
Hr in select
כיתות פסאודו תקינות/לא תקינות של משתמשים
תצוגת אקורדיון בלעדית

וואו! שנת 2023 הייתה שנה משמעותית ל-CSS!

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

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

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

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

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

Browser Support

Source

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

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

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

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

Browser Support

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

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

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

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

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

היקף

Browser Support

Source

ב-Chrome 118 נוספה תמיכה ב-@scope, כלל at שמאפשר להגביל את ההתאמה של הבורר להסתעפות עץ ספציפית של המסמך. בעזרת עיצוב ברמת ההיקף, אפשר לבחור אלמנטים באופן ספציפי מאוד בלי לכתוב סלקטורים ספציפיים מדי או לקשר אותם באופן הדוק למבנה ה-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 Live

דוגמה ל-CSS @scope

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

הטמעה

Browser Support

Source

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

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

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

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

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

רשת משנה

Browser Support

Source

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

הקלטת מסך של רשת משנההדגמה של רשת משנה בזמן אמת

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

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

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

טיפוגרפיה

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

Initial-letter

Browser Support

Source

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

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

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

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

text-wrap: balance and pretty

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

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

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

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

מידע נוסף על text-wrap: balance

צבע

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

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

Browser Support

Source

Browser Support

Source

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

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

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

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

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

פונקציית color-mix

Browser Support

Source

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

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

Browser Support

Source

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

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

@container Screencastהדגמה של @container

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

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

Browser Support

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

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

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

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

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

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

בורר ‎:has()

Browser Support

Source

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

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

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

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

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

דוגמה ל-CSS :has(): Dock

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

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

Browser Support

Source

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

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

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

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

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

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

Browser Support

Source

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

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

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

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

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

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

Browser Support

Source

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

הקלטת מסך עם שקיפות מופחתתהדגמה של שקיפות מופחתת

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

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

אינטראקציה

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

הצגת מעברים

Browser Support

Source

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

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

VT Screencastהדגמת VT

הדגמה של Transitions

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

פונקציית Linear-easing

Browser Support

Source

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

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

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

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

דוגמה ל-CSS linear()

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

סיום הגלילה

Browser Support

Source

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

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

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

מידע נוסף על scrollend

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

Browser Support

Source

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

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

הקלטת מסך של SDAהדגמה של SDA

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

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

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

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

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

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

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

Browser Support

Source

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

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

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

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

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

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

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

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

אנימציה בדידה הקלטת מסךאנימציה בדידה הדגמה (דמו)

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

‎@starting-style

Browser Support

Source

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

@starting-style Screencastהדגמה של @starting-style

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

שכבת-על

Browser Support

Source

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

שכבת-על של הקלטת מסךהדגמה של שכבת-על בשידור חי

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

רכיבים

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

Browser Support

Source

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

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

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

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

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

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

מידע נוסף על שימוש ב-hr ב-select

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

Browser Support

Source

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

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

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

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

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

Browser Support

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

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

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

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

סיכום

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

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

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

Una Kravets

Bramus

Adam Argyle