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

Una Kravets

Bramus

Adam Argyle

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

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

• שאילתות של מאגרי תגים
• שאילתות סגנון
• :has() selector
• תחביר מיקרו nth-of
• 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

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

אם משתמשים ב-nth-child רגיל, כמו :nth-child(2) במחלקה המיוחדת, הדפדפן יבחר את האלמנט שהמחלקה המיוחדת חלה עליו, וגם את הצאצא השני. לעומת זאת, אם נשתמש ב-: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 {

  }
}

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

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

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

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

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

שכבות Cascade

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

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

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

CSS בהיקף מוגבל

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

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

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

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

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

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

בנוסף, הוספנו פונקציות טריגונומטריות לפונקציות המתמטיות הקיימות של 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.

חלון קופץ

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

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