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

Una Kravets

Bramus

Adam Argyle

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

ריכזנו כאן 20 מהפיצ'רים הכי מרגשים ומשפיעים שהוצגו לאחרונה או יהיו זמינים בקרוב:

• שאילתות בקונטיינרים
• שאילתות סגנון
• בורר :has()
• nth-of microsyntax
• text-wrap: balance
• initial-letter
• יחידות דינמיות של שדה ראייה
• מרחבי צבעים עם סולם רחב
• color-mix()
• הצבת עץ
• שכבות ברצף
• סגנונות ברמת ההיקף
• פונקציות טריגונומטריות
• מאפייני טרנספורמציה ספציפיים
• חלון קופץ
• מיקום עוגן
• 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

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

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

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

text-wrap: balance

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

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

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

Nesting

עכשיו אפשר להשתמש ב-CSS בתוך CSS (nesting), אחת מהבקשות המובילות של מפתחי 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 באמצעות עץ.

שכבות מדורגות

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

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

במאמר הזה מוסבר איך משתמשים בשכבות מדורגות.

CSS ברמת ההיקף

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

חלון קופץ

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

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

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

מבנה ה-DOM של חלון קופץ הוא אופרטיבי, וניתן לכתוב אותו באותה מידה של בהירות כמו הוספת id למאפיין 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 הזה תומך בקבוצה של מאפייני CSS וכיתות JavaScript שמאפשרים ליצור בקלות אנימציות רספונסיביות לגלילה.

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

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

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

הצגת המעברים

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

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

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

סיכום

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