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

Una Kravets

Bramus

Adam Argyle

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

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

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