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

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

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

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

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

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

מקור

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

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

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

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

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

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

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

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

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

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

היקף

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

מקור

ב-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 משפיע על המפל.

הטמעה

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

מקור

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

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

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

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

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

רשת משנה

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

מקור

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

הקלטת מסך של רשת משנה

הדגמה של רשת משנה בזמן אמת

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

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

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

טיפוגרפיה

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

Initial-letter

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

מקור

הנכס 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)

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

מקור

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

מקור

מהחומרה ועד לתוכנה, מ-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

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

מקור

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

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

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

מקור

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

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

@container Screencast

הדגמה של @container

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

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

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

מקור

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

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

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

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

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

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

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

בורר ‎:has()

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

מקור

במשך כמעט 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

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

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

מקור

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

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

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

עדכון הדגמה

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

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

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

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

מקור

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

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

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

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

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

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

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

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

מקור

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

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

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

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

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

אינטראקציה

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

הצגת מעברים

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

מקור

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

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

VT Screencast

הדגמת VT

הצגת הדגמה של Transitions

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

פונקציית Linear-easing

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

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

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

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

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

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

דוגמה ל-CSS linear()

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

סיום הגלילה

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

מקור

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

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

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

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

מידע נוסף על scrollend

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

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

מקור

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

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

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

מקור

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

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

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

הקלטת מסך לדוגמה

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

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

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

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

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

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

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

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

‎@starting-style

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

מקור

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

@starting-style Screencast

הדגמה של @starting-style

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

שכבת-על

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

מקור

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

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

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

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

רכיבים

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

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

מקור

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 – פסאודו-כיתות

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

מקור

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

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

:user-* Screencast

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

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

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

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

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

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

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

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

סיכום

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

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

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

Una Kravets

Bramus

Adam Argyle

מעטפת CSS: 2023!

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

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

הדגמה של Scope Live

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

הדגמה של עריכה ב-Nesting

הקלטת מסך של רשת משנה

הדגמה של רשת משנה בזמן אמת

טיפוגרפיה

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

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

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

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

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

הדגמת Color 4

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

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

הקלטת מסך ב-RCS

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

@container Screencast

הדגמה של @container

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

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

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

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

:has() Screencast

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

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

עדכון הדגמה

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

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

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

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

VT Screencast

הדגמת VT

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

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

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

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

הקלטת מסך של SDA

הדגמה של SDA

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

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

הקלטת מסך לדוגמה

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

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

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

@starting-style Screencast

הדגמה של @starting-style

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

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

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

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

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

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

:user-* Screencast

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