Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

מעטפת CSS: 2023!

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

מעבר אל התוכן:

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

טיפוגרפיה
Initial-letter
איזון גלישת טקסט/עיצוב יפה

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

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

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

רכיבים
חלון קופץ
שעות בבחירה
פסאודו-מחלקות תקינות/לא תקינות של משתמשים
אקורדיון בלעדי

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

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

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

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

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

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

Browser Support

Source

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

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

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

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

Browser Support

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

כברירת מחדל, פסאודו-הסלקטורים :nth-*() לוקחים בחשבון את כל רכיבי הצאצא. החל מ-Chrome 111, אפשר להעביר רשימת סלקטורים ל-: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 */
}

הטמעה של Screencast

הדגמה חיה של קינון

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

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

מידע נוסף על קינון

Subgrid

Browser Support

Source

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

Subgrid Screencast

הדגמה חיה של רשת משנה

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

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

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

טיפוגרפיה

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

Initial-letter

Browser Support

Source

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

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

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

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

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

text-wrap: balance and pretty

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

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

גלישת טקסט בהקלטת מסך

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

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

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

צבע

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

HD Color Spaces (Color Level 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(). – ליצור וריאציות של צבעים באמצעות תחביר צבעים יחסי.

הקלטת מסך בצבע 4

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

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

Browser Support

Source

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

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

@container Screencast

‫@container Demo

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

שאילתות של מאגרי סגנונות

Browser Support

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

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

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

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

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

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

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

:has() selector

Browser Support

Source

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

:has() Demo Screenshot

:has() Live Demo

הדגמה של 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, שקשור ליכולות של מכשירים שונים.

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

עדכון של Screencast

עדכון ההדגמה

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

מידע נוסף על@media (update)

סקריפטים של שאילתות מדיה

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

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

VT Screencast

הדגמת VT

הדגמה של מעברים בין תצוגות

‫View Transitions API לאפליקציות של דף יחיד (SPA) הושק ב-Chrome 111. מידע נוסף על View Transitions

פונקציית שיכוך לינארית

Browser Support

Source

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

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

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

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

הדגמה של מעבר לינארי

הדגמה של linear() CSS

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

סיום הגלילה

Browser Support

Source

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

Scrollend Screencast

הדגמה של Scrollend

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

מידע נוסף על scrollend

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

Browser Support

Source

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

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

SDA Screencast

הדגמה של SDA

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

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

הדגמה של SDA

הדגמה חיה של SDA

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

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

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

הוספת קובץ לציר הזמן של הפגישה

Browser Support

Source

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

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

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

סרטון הדגמה של הקלטת מסך

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

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

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

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

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

Discrete Anim. הקלטת מסך

Discrete Anim. הדגמה (דמו)

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

‎@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

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

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

קו הפרדה אופקי ברכיב select

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

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

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

בחירה באפשרות 'הדגמה חיה'

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

‫:user-valid ו-invalid pseudo classes

Browser Support

Source

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

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

‫:user-* Screencast

‫:user-* הדגמה בזמן אמת

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

אקורדיון בלעדי

Browser Support

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

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

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

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

סיכום

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

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

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

Una Kravets

Bramus

Adam Argyle

מעטפת CSS: 2023! קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

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

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

הדגמה של Scope Live

הטמעה של Screencast

הדגמה חיה של קינון

Subgrid Screencast

הדגמה חיה של רשת משנה

טיפוגרפיה

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

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

גלישת טקסט בהקלטת מסך

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

הקלטת מסך בצבע 4

הדגמת צבע 4

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

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

הקלטת מסך ב-RCS

הדגמה חיה של RCS

@container Screencast

‫@container Demo

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

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

:has() Demo Screenshot

:has() Live Demo

‫:has() Screencast

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

עדכון של Screencast

עדכון ההדגמה

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

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

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

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

VT Screencast

הדגמת VT

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

הדגמה של מעבר לינארי

Scrollend Screencast

הדגמה של Scrollend

SDA Screencast

הדגמה של SDA

הדגמה של SDA

הדגמה חיה של SDA

סרטון הדגמה של הקלטת מסך

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

Discrete Anim. הקלטת מסך

Discrete Anim. הדגמה (דמו)

@starting-style Screencast

הדגמה של @starting-style

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

הדגמה של שכבת-על

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

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

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

בחירה באפשרות 'הדגמה חיה'

‫:user-valid ו-invalid pseudo classes

‫:user-* Screencast

‫:user-* הדגמה בזמן אמת

מעטפת CSS: 2023!