מה חדש ב-CSS ובממשק המשתמש: מהדורת I/O 2023

Una Kravets

Bramus

Adam Argyle

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

ריכזנו כאן 20 מהתכונות המלהיבות והמשמעותיות ביותר שהושקו לאחרונה או שיושקו בקרוב:

• שאילתות של מאגרי תגים
• שאילתות סגנון
• :has() selector
• תחביר מיקרו nth-of
• text-wrap: balance
• initial-letter
• יחידות דינמיות של אזור התצוגה
• מרחבי צבעים עם טווח רחב
• color-mix()
• קינון
• שכבות מדורגות
• Scoped styles
• פונקציות טריגונומטריות
• מאפייני טרנספורמציה אינדיבידואליים
• חלון קופץ
• מיקום נקודת העיגון
• selectmenu
• מעברים נפרדים בין נכסים
• אנימציות מבוססות-גלילה
• הצגת מעברים

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

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

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

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

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

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

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

שאילתות לגבי סגנון

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

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

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

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

מידע נוסף והדגמות נוספות זמינים בפוסט בבלוג בנושא שאילתות סגנון.

:has()

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

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

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

בפוסט הזה בבלוג יש מידע נוסף על :has() וגם הדגמות נוספות.

תחביר nth-of

בפלטפורמת האינטרנט יש עכשיו אפשרות בחירה מתקדמת יותר של nth-child. תחביר nth-child המתקדם כולל מילת מפתח חדשה (of), שמאפשרת להשתמש בתחביר המיקרו הקיים של An+B, עם קבוצת משנה ספציפית יותר לחיפוש.

אם משתמשים ב-nth-child רגיל, כמו :nth-child(2) במחלקה המיוחדת, הדפדפן יבחר את האלמנט שהוחלה עליו המחלקה special, וגם את הצאצא השני. לעומת זאת, הפונקציה :nth-child(2 of .special) תסנן מראש את כל הרכיבים .special ואז תבחר את הרכיב השני מתוך הרשימה הזו.

מידע נוסף על התכונה הזו זמין במאמר בנושא תחביר nth-of.

text-wrap: balance

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

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

מידע נוסף זמין במאמר הזה.

initial-letter

שיפור נחמד נוסף בטיפוגרפיה של אתרים הוא initial-letter. מאפיין ה-CSS הזה מאפשר לכם לשלוט טוב יותר בסגנון של אות פותחת מוזחת.

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

intial-letter מידע נוסף על השימוש ב-

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

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

כדי לפתור את הבעיה הזו, הוספנו ערכי יחידות חדשים לפלטפורמת האינטרנט, כולל: - גובה ורוחב קטנים של אזור התצוגה (או svh ו-svw), שמייצגים את הגודל הקטן ביותר של אזור התצוגה הפעיל. ‫– גובה ורוחב גדולים של אזור התצוגה (lvh ו-lvw), שמייצגים את הגודל הגדול ביותר. ‫– גובה ורוחב דינמיים של אזור התצוגה (dvh ו-dvw).

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

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

מרחבי צבעים עם גמא רחבה

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

אבל עכשיו יש לנו מגוון של מרחבי צבעים חדשים בפלטפורמת האינטרנט, כולל REC2020, ‏ P3, ‏ XYZ, ‏ LAB, ‏ OKLAB, ‏ LCH ו-OKLCH. במדריך הצבעים ב-HD אפשר לקרוא על מרחבי הצבעים החדשים באינטרנט ועוד.

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

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

color-mix()‎

פונקציה נוספת שקשורה למרחבי צבעים מורחבים היא color-mix(). הפונקציה הזו תומכת בערבוב של שני ערכי צבע כדי ליצור ערכים חדשים על סמך הערוצים של הצבעים שמערבבים. מרחב הצבעים שבו מתבצע הערבוב משפיע על התוצאות. עבודה במרחב צבעים תפיסתי יותר כמו oklch תעבור דרך טווח צבעים שונה מזה של מרחב צבעים כמו srgb.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

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

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

אפשר לראות דוגמאות ופרטים נוספים בפוסט בבלוג בנושא color-mix או לנסות את סביבת הניסויים הזו של color-mix().

יסודות של CSS

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

נכנס מתחת

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

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

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

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

התאמת הפריסה ל-flex מתרחשת כשיש בפריט המכיל יותר מ-480px (או שווה ל-) של שטח פנוי בשורה. הדפדפן פשוט יחיל את סגנון התצוגה החדש כשהתנאים יתקיימו.

מידע נוסף ודוגמאות זמינים בפוסט שלנו בנושא CSS nesting.

שכבות Cascade

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

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

מידע נוסף על שימוש בשכבות מדורגות זמין במאמר הזה.

CSS בהיקף מוגבל

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

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

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

אפשר לראות את @scope עם מגבלות היקף יחד עם @layer בהדגמה החיה הזו:

מידע נוסף על @scope זמין במפרט css-cascade-6.

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

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

בהדגמה שלמטה, הנקודות מסתובבות סביב נקודה מרכזית. במקום לסובב כל נקודה סביב המרכז שלה ואז להזיז אותה החוצה, כל נקודה מוזזת על ציר ה-X וציר ה-Y. המרחקים בציר ה-X ובציר ה-Y נקבעים על ידי התחשבות ב-cos() וב-sin() של --angle, בהתאמה.

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

מאפייני טרנספורמציה נפרדים

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

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

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

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

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

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

מידע נוסף זמין בפוסט הזה על פונקציות נפרדות של טרנספורמציה.

רכיבים שניתנים להתאמה אישית

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

1. פונקציונליות מובנית של חלונות קופצים עם גורמים מטפלים באירועים, מבנה DOM הצהרתי וערכי ברירת מחדל נגישים.
2. ‫CSS API כדי לקשור שני רכיבים זה לזה כדי להפעיל מיקום עוגן.
3. רכיב של תפריט נפתח שניתן להתאמה אישית, כשרוצים להגדיר סגנון לתוכן בתוך רכיב select.

חלון קופץ

ה-API של חלונות קופצים מעניק לרכיבים קסם מובנה של תמיכה בדפדפן, כמו:

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

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

מבנה ה-DOM של חלון קופץ הוא הצהרתי, ואפשר לכתוב אותו בצורה ברורה כמו לתת לרכיב החלון הקופץ את המאפיין id ואת המאפיין popover. אחר כך מסנכרנים את המזהה הזה עם הרכיב שיפתח את ה-popover, למשל לחצן עם המאפיין popovertarget:

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

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

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

מיקום מודעות העוגן

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

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

אבל מה קורה אם החלון הקופץ לא מתאים לאזור התצוגה בהתאם למיקום שלו?

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

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

מידע נוסף על מיקום מודעות העוגן

<selectmenu>

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

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

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

מעברים נפרדים בין נכסים

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

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

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

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

אינטראקציות

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

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

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

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

ה-API הזה תומך בקבוצה של מחלקות JavaScript ומאפייני CSS שמאפשרים ליצור בקלות אנימציות הצהרתיות מבוססות גלילה.

כדי להפעיל אנימציית CSS באמצעות גלילה, משתמשים במאפיינים החדשים scroll-timeline, view-timeline ו-animation-timeline. כדי להפעיל JavaScript Web Animations API, מעבירים מופע של ScrollTimeline או ViewTimeline כאפשרות timeline אל Element.animate()

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

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

הצגת מעברים

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

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

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

השליטה באופן המעבר מתבצעת דרך שירות ה-CSS

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

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

התכונה View Transitions פועלת כרגע עם אפליקציות חד-דפיות (SPA) מגרסה Chrome 111. אנחנו עובדים על תמיכה באפליקציות מרובות דפים. מידע נוסף זמין במדריך המלא שלנו למעברים בין תצוגות.

סיכום

כדי להתעדכן בכל החידושים האחרונים ב-CSS וב-HTML, אפשר להיכנס ל-developer.chrome.com ולצפות בסרטונים מ-I/O כדי לקבל מידע נוסף על חידושים באינטרנט.