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

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

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

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

תחביר n

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

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

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

text-wrap: balance

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

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

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

initial-letter

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

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

מידע נוסף על השימוש ב-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 עם סמל מגניב של דיאגרמת ון (Venn) בתצוגה מקדימה בחלונית הסגנונות.

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

יסודות CSS

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

מקונן

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

.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.

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

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

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

חלון קופץ

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

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

הצגת המעברים

ממשק ה-API למעבר של View מאפשר לשנות בקלות את ה-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;
}

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

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

סיכום

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