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

Una Kravets

Bramus

Adam Argyle

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

סיכום

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