עדכונים אחרונים בנושא ממשק המשתמש של CSS ואינטרנט: סיכום כנס I/O 2024

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

חוויות אינטראקטיביות חדשות

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

אנימציות שמתבססות על גלילה

תמיכה בדפדפנים

  • Chrome: ‏ 115.
  • Edge: ‏ 115.
  • Firefox: מאחורי דגל.
  • Safari: לא נתמך.

מקור

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

יצירת אנימציות שמתבססות על גלילה

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

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

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

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

חשוב לזכור את תמיכת הדפדפן ואת העדפות המשתמשים, במיוחד כשמדובר בצרכים של נגישות. לכן, צריך להשתמש בכלל @supports כדי לבדוק אם הדפדפן תומך באנימציות שמבוססות על גלילה, ולעטוף את האנימציה שמבוססת על גלילה בשאילתה של העדפות המשתמש, כמו @media (prefers-reduced-motion: no-preference), כדי לכבד את העדפות התנועה של המשתמשים. אחרי ביצוע הבדיקות האלה, תוכלו לדעת שהסגנונות יפעלו והאנימציה לא תגרום לבעיות אצל המשתמש.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

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

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

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

יתרונות הביצועים של אנימציות שמבוססות על גלילה

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

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

אנימציות שמתבססות על גלילה מניעות את סרגל הניווט הזה של מוצרים ב-Tokopedia בזמן הגלילה למטה.

"הצלחנו לצמצם עד 80% מקודי הקוד שלנו בהשוואה לשימוש באירועי גלילה רגילים ב-JS, וראינו שהשימוש הממוצע במעבד ירד מ-50% ל-2% בזמן הגלילה. - Andy Wihalim, מהנדס תוכנה בכיר, Tokopedia"

העתיד של אפקטים לגלילה

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

בעתיד נוסיף עוד תכונות גלילה לדפדפנים. בהדגמה הבאה מוצג שילוב של התכונות העתידיות האלה. הקוד משתמש ב-CSS scroll-start-target כדי להגדיר את התאריך והשעה הראשוניים בבוררי התאריכים, ובאירוע JavaScript scrollsnapchange כדי לעדכן את תאריך הכותרת. כך קל מאוד לסנכרן את הנתונים עם האירוע שנלכד.

הדגמה פעילה ב-Codepen

אפשר גם להשתמש בכך כדי לעדכן בוחר בזמן אמת באמצעות האירוע scrollsnapchanging ב-JavaScript.

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

כדי לקבל מידע נוסף על התחלת השימוש באנימציות שמבוססות על גלילה, הצוות שלנו השיק סדרת סרטונים חדשה שזמינה בערוץ YouTube של Chrome למפתחים. כאן, Bramus Van Damme יסביר את העקרונות הבסיסיים של אנימציות שמתבססות על גלילה, כולל אופן הפעולה של התכונה, אוצר מילים, דרכים שונות ליצירת אפקטים ואופן השילוב של אפקטים כדי ליצור חוויות עשירות. זו סדרת סרטונים נהדרת שכדאי לצפות בה.

הצגת המעברים

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

תמיכה בדפדפנים

  • Chrome: ‏ 111.
  • Edge: ‏ 111.
  • Firefox: לא נתמך.
  • Safari: ‏ 18.

מקור

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

מעבר בין תצוגות של אותו מסמך, כפי שמוצג ב-Airbnb.
הפורטפוליו של Maxwell Barvian, שבו מוצגים מעברים בין תצוגות.

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

כדי להפעיל במהירות מעברים בין תצוגות באפליקציה של דף יחיד, פשוט עוטפים אינטראקציה באמצעות document.startViewTransition ומוודאים שלכל רכיב שמתבצע בו מעבר יש view-transition-name, בתוך שורת קוד או באופן דינמי באמצעות JavaScript כשיוצרים צומתי DOM.

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});
/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

הצגת כיתות מעבר

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

תמיכה בדפדפנים

  • Chrome: ‏ 125.
  • Edge: ‏ 125.
  • Firefox: לא נתמך.
  • Safari: 18.2.

הצגת סוגי המעברים

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

תמיכה בדפדפנים

  • Chrome: ‏ 125.
  • Edge: ‏ 125.
  • Firefox: לא נתמך.
  • Safari: ‏ 18.

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

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

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

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

מעברים בין צפיות בכמה דפים

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

תמיכה בדפדפנים

  • Chrome: ‏ 126.
  • Edge: ‏ 126.
  • Firefox: לא נתמך.
  • Safari Technology Preview: יש תמיכה.

קבוצת התכונות החדשה הזו שמשתמשים בהם במסמכים שונים כוללת חוויות אינטרנט שנמצאות באותו מקור, כמו ניווט מ-web.dev אל web.dev/blog, אבל לא כוללת ניווט בין מקורות שונים, כמו ניווט מ-web.dev אל blog.web.dev או לדומיין אחר כמו google.com.

אחד ההבדלים העיקריים בהעברות בין תצוגות באותו מסמך הוא שאין צורך לעטוף את המעבר ב-document.startViewTransition(). במקום זאת, צריך להביע הסכמה לשני הדפים שקשורים למעבר התצוגה באמצעות כלל at-rule‏ @view-transition ב-CSS.

@view-transition {
  navigation: auto;
}

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

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

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});
הצגת מעברים בין תצוגות באפליקציה עם כמה דפים. קישור להדגמה

בעתיד אנחנו מתכננים להרחיב את האפשרויות של מעברים בין תצוגות, כולל:

  • מעברים מוגבלים: מאפשרים להגביל את המעבר להסתעפות של עץ DOM, כך ששאר הדף ימשיך להיות אינטראקטיבי, ותומכים במספר מעברים בין תצוגות שפועלים בו-זמנית.
  • מעבר בין תצוגות באמצעות תנועות: אתם יכולים להשתמש בתנועות גרירה או החלקה כדי להפעיל מעבר בין תצוגות במסמכים שונים, וכך ליהנות מחוויית שימוש טבעית יותר באינטרנט.
  • התאמת ניווט ב-CSS: אפשר להתאים אישית את המעבר בין תצוגות במסמכים שונים ישירות ב-CSS, כחלופה לשימוש באירועים pageswap ו-pagereveal ב-JavaScript. למידע נוסף על מעברים בין תצוגות באפליקציות עם כמה דפים, כולל הוראות להגדרה יעילה שלהם באמצעות עיבוד מראש, כדאי לצפות בהרצאה הבאה של Bramus Van Damme:

רכיבי ממשק משתמש שמבוססים על מנוע: פישוט אינטראקציות מורכבות

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

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

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

תפריט נפתח מורכב מחלקים רבים וכולל מצבים רבים שצריך להביא בחשבון, כמו:

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

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

Popover API

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

תמיכה בדפדפנים

  • Chrome: ‏ 114.
  • Edge: 114.
  • Firefox: ‏ 125.
  • Safari: 17.

מקור

רכיבי חלונות קופצים מוסתרים באמצעות display: none עד שנפתחים באמצעות גורם מפעיל, כמו לחצן או באמצעות JavaScript. כדי ליצור חלון קופץ בסיסי, מגדירים את מאפיין החלון הקופץ ברכיב ומקשרים את המזהה שלו ללחצן באמצעות popovertarget. עכשיו הלחצן הוא הגורם שמפעיל את הפונקציה.

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

עכשיו, כשמאפיין ה-popover מופעל, הדפדפן מטפל בהרבה התנהגויות של מקשים בלי סקריפטים נוספים, כולל:

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

יכול להיות שאתם משתמשים ב-API הזה של חלון קופץ כבר היום בלי לדעת. ב-GitHub הטמיעו חלון קופץ בתפריט 'חדש' בדף הבית ובסקירה הכללית של בדיקת בקשות המשיכה. הם שיפרו את התכונה הזו בהדרגה באמצעות ה-polyfill של חלון קופץ, שנוצר על ידי Oddbird עם תמיכה משמעותית של Keith Cirkel מ-GitHub, כדי לתמוך בדפדפנים ישנים יותר.

"הצלחנו להוציא משימוש אלפי שורות קוד על ידי מעבר ל-popover. חלון קופץ עוזר לנו להימנע מהצורך להתמודד עם מספרי z-index קסומים… הקשר הנכון של עץ הנגישות שנוצר באמצעות התנהגות הצהרתית של לחצנים והתנהגויות מוגדרות מראש של מיקוד, מאפשר למערכת העיצוב שלנו להטמיע דפוסים בצורה הנכונה. – קית' קרקל (Keith Cirkel), מהנדס תוכנה, GitHub"

אנימציה של אפקטים לכניסה וליציאה

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

היכולת ליצור אנימציה של display ו-content-visibility בציר הזמן של תמונות המפתח.

הנכס transition-behavior עם מילת המפתח allow-discrete כדי לאפשר מעברים של נכסים נפרדים כמו display.

תמיכה בדפדפנים

  • Chrome: ‏ 117.
  • Edge: ‏ 117.
  • Firefox: ‏ 129.
  • Safari: 17.4.

מקור

הכלל @starting-style כדי ליצור אנימציה של אפקטים של כניסה מ-display: none אל השכבה העליונה.

תמיכה בדפדפנים

  • Chrome: ‏ 117.
  • Edge: ‏ 117.
  • Firefox: ‏ 129.
  • Safari: 17.5.

מקור

מאפיין שכבת-העל שמשמש לשליטה בהתנהגות של השכבה העליונה במהלך אנימציה.

תמיכה בדפדפנים

  • Chrome: ‏ 117.
  • Edge: ‏ 117.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

מקור

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

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

קודם צריך להגדיר את @starting-style, כדי שהדפדפן ידע מאילו סגנונות להפעיל אנימציה לרכיב הזה ב-DOM. צריך לעשות זאת גם לתיבת הדו-שיח וגם לרקע. לאחר מכן, מעצבים את המצב הפתוח של תיבת הדו-שיח ושל הרקע. בתיבת דו-שיח, המערכת משתמשת במאפיין open, ובחלון קופץ, בפסאודו-אלמנט ::popover-open. לבסוף, מפעילים אנימציה של opacity, ‏display ו-overlay באמצעות מילת המפתח allow-discrete כדי להפעיל את מצב האנימציה שבו נכסים נפרדים יכולים לעבור מצב.

מיקום של עוגן

חלון הקופץ היה רק ההתחלה של הסיפור. עדכון מרגש מאוד: התמיכה במיקום עוגן זמינה עכשיו ב-Chrome 125.

תמיכה בדפדפנים

  • Chrome: ‏ 125.
  • Edge: ‏ 125.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

מקור

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

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

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

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

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

לבסוף, משתמשים במילות המפתח החדשות anchor-center בנכסים justify ו-align כדי למרכז את הרכיב הממוקם ביחס לעוגן שלו.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

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

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

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

inset-area מיקום

בנוסף למיקום מוחלט כיווני שמוגדר כברירת מחדל, שבו סביר להניח שהשתמשתם בעבר, יש מנגנון פריסה חדש שנוסף כחלק מ-Anchor Positioning API שנקרא'אזור מוטמע'. בעזרת אזור ההוספה אפשר למקם בקלות רכיבים ביחס לעוגנים שלהם. האזור פועל על רשת של 9 תאים, כאשר רכיב העוגן נמצא במרכז. לדוגמה, הערך inset-area: top ממוקם את הרכיב הממוקם בחלק העליון, והערך inset-area: bottom ממוקם את הרכיב הממוקם בחלק התחתון.

גרסה פשוטה של הדגמה הראשונה של עוגן נראית כך עם inset-area:

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

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

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

מיקומי עוגן דינמיים באמצעות position-try-options

קל יותר ליצור תפריטים וניווט בתפריטי משנה באמצעות שילוב של חלון קופץ ומיקום עוגן. בנוסף, כשהרכיב המאוחזר מגיע לקצה חלון התצוגה, אפשר גם לאפשר לדפדפן לטפל בשינוי המיקום בשבילכם. יש כמה דרכים לעשות זאת. האפשרות הראשונה היא ליצור כללי מיקום משלכם. במקרה כזה, תפריט המשנה ממוקם בהתחלה מימין ללחצן 'חנות הפיזית'. עם זאת, אפשר ליצור בלוק @position-try למקרה שאין מספיק מקום מימין לתפריט, ולתת לו מזהה מותאם אישית של --bottom. לאחר מכן, מחברים את הבלוק @position-try למפרסם באמצעות position-try-options.

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

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

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

position-try-options: flip-block, flip-inline;

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

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

מידע נוסף על שימוש במיקום עוגן

העתיד של ממשק משתמש שכבות

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

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

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

בנוסף, יש עוד מבצע קריאה כללי עתידי (invoketarget) שזמין לבדיקה ב-Canary, בזכות העבודה של שני מפתחים מצד שלישי, Keith Cirkel ו-Luke Warlow. invoketarget תומך בחוויית הפיתוח המוצגת ב-popovertarget, שמאפשרת להציג חלונות קופצים לכל הרכיבים האינטראקטיביים, כולל <dialog>,‏ <details>,‏ <video>,‏ <input type="file"> ועוד.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

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

בחירת סגנון

בעזרת popover ו-anchor, הצוות עשה התקדמות משמעותית בדרך להפעלת תפריט נפתח להתאמה אישית של אפשרויות בחירה. החדשות הטובות הן שעשינו הרבה התקדמות. החדשות הרעות הן ש-API הזה עדיין נמצא במצב ניסיוני. עם זאת, אני רוצה לשתף איתכם כמה הדגמות בשידור חי ועדכונים על ההתקדמות שלנו, ואני מקווה לקבל ממך משוב. קודם כול, התקדמנו בנושא האופן שבו משתמשים יכולים להביע הסכמה לשימוש בחוויית הבחירה החדשה והניתנת להתאמה אישית. הדרך הנוכחית לעשות זאת היא להשתמש במאפיין מראה ב-CSS, שמוגדר כ-appearance: base-select. אחרי שתגדירו את המראה, תצטרכו להביע הסכמה להצטרפות לחוויית בחירה חדשה ומתכווננת אישית.

select {
  appearance: base-select;
}

בנוסף ל-appearance: base-select, יש כמה עדכונים חדשים ב-HTML. למשל, אפשר לעטוף את האפשרויות ב-datalist כדי להתאים אותן אישית, ולהוסיף לאפשרויות תוכן לא אינטראקטיבי שרירותי, כמו תמונות. תהיה לכם גם גישה לאלמנט חדש, <selectedoption>, שישקף את התוכן של האפשרויות בתוכו, ואז תוכלו להתאים אותו לצרכים שלכם. הרכיב הזה מאוד שימושי.

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

הקוד הבא מדגים התאמה אישית של <selectedoption> בממשק המשתמש של Gmail, שבו סמל חזותי מייצג את סוג התשובה שנבחרה כדי לחסוך מקום. אפשר להשתמש בסגנונות תצוגה בסיסיים ב-selectedoption כדי להבדיל בין סגנון האפשרויות לסגנון התצוגה המקדימה. במקרה כזה, הטקסט שמוצג באפשרות יכול להיות מוסתר באופן חזותי ב-selectedoption.

selectedoption .text {
  display: none;
}

אחד מהיתרונות הגדולים ביותר של שימוש חוזר ברכיב <select> ב-API הזה הוא תאימות לאחור. בבחירת המדינה הזו, אפשר לראות ממשק משתמש מותאם אישית עם תמונות של דגלים באפשרויות, כדי שהמשתמשים יוכלו לנתח את התוכן בקלות רבה יותר. מאחר שבדפדפנים לא נתמכים התגים לא יתקבלו, למשל הלחצן המותאם אישית, ה-datalist, ה-selectedoption והתמונות בתוך האפשרויות, חלופת הגיבוי תהיה דומה לממשק המשתמש הנוכחי של ברירת המחדל לבחירה.

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

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

אקורדיון בלעדי

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

תמיכה בדפדפנים

  • Chrome: ‏ 120.
  • Edge: ‏ 120.
  • Firefox: ‏ 130.
  • Safari: 17.2.

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

הדגמה בלעדית של תפריט נפתח
<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid וגם :user-invalid

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

תמיכה בדפדפנים

  • Chrome: ‏ 119.
  • Edge: ‏ 119.
  • Firefox: 88.
  • Safari: 16.5.

מקור

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

מידע נוסף על שימוש בפסאודו-אלמנטים של אימות טפסים מסוג user-*

field-sizing: content

עדכון שימושי נוסף שנוסף לאחרונה הוא field-sizing: content, שאפשר להחיל על רכיבי שליטה בטופס כמו רכיבי קלט ו-textarea. כך גודל הקלט יכול לגדול (או להתכווץ) בהתאם לתוכן שלו. field-sizing: content יכול להיות שימושי במיוחד בתיבות טקסט רחבות, כי לא תצטרכו יותר להשתמש בגדלים קבועים שבהם יכול להיות שתצטרכו לגלול למעלה כדי לראות מה כתבתם בחלקים הקודמים של ההנחיה בתיבת קלט קטנה מדי.

תמיכה בדפדפנים

  • Chrome: ‏ 123.
  • Edge: ‏ 123.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

מקור

textarea, select, input {
  field-sizing: content;
}

מידע נוסף על שינוי הגודל של שדות

<hr> ב-<select>

היכולת להפעיל את הרכיב <hr>, או את רכיב הקו האנכי, בתיבות הבחירה היא תכונה קטנה אך שימושית נוספת. אין לכך שימוש סמנטי רב, אבל זה עוזר להפריד בצורה יפה תוכן ברשימת בחירה, במיוחד תוכן שאולי לא תרצו לקבץ בקבוצת optgroup, כמו ערך placeholder.

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

מידע נוסף על שימוש ב-hr ב-select

שיפורים באיכות החיים

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

עריכה בתוך עריכה עם lookahead

בשנה שעברה נוספה תמיכה ב-CSS מותאם אישית בכל הדפדפנים, ומאז היא שופר כדי לתמוך בתכונה 'הסתכלות קדימה'. כלומר, כבר אין צורך להוסיף את & לפני שמות הרכיבים. כך העבודה עם עץ ה-HTML נוחה יותר ודומה יותר למה שהיה לי בעבר.

תמיכה בדפדפנים

  • Chrome: ‏ 120.
  • Edge: ‏ 120.
  • Firefox: ‏ 117.
  • Safari: 17.2.

מקור

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

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

Align-content לפריסת בלוקים

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

תמיכה בדפדפנים

  • Chrome: ‏ 123.
  • Edge: ‏ 123.
  • Firefox: ‏ 125.
  • Safari: 17.4.

div {
  align-content: center;
}

Text-wrap: איזון ועיצוב יפה

בנוגע לפריסה, פריסת הטקסט השתפרה משמעותית עם ההוספה של text-wrap: balance ו-pretty. האפשרות text-wrap: balance משמשת ליצירת בלוק טקסט אחיד יותר, ואילו האפשרות text-wrap: pretty מתמקדת בהפחתת סמלים בודדים בשורה האחרונה בטקסט.

בדמו הבא אפשר להשוות, על ידי גרירה של פס ההזזה, בין ההשפעות של balance ו-pretty על כותרת ועל פסקה. רוצים לנסות לתרגם את הדמו לשפה אחרת?
h1 {
  text-wrap: balance;
}

מידע נוסף על text-wrap: balance

עדכונים בנושא טיפוגרפיה בינלאומית

עדכונים של פריסה טיפוגרפית לתכונות טקסט ב-CJK קיבלו הרבה עדכונים נחמדים בשנה האחרונה, כמו התכונה word-break: auto-phrase שמאפשרת למערכת להוסיף שורה חדשה בגבול הביטוי הטבעי.

תמיכה בדפדפנים

  • Chrome: ‏ 119.
  • Edge: ‏ 119.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

word-break: auto-phrase מאפשרת למערכת להוסיף שורה חדשה בגבול הטבעי של הביטוי.
השוואה בין word-break: normal לבין word-break: auto-phrase

וגם text-spacing-trim, שמחילה קירוב בין תווים של סימני פיסוק כדי לשפר את הקריאוּת של הגופן הסיני, היפני והקוריאני, וכך להשיג תוצאות חזותיות נעימות יותר.

תמיכה בדפדפנים

  • Chrome: ‏ 123.
  • Edge: ‏ 123.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

מקור

החלק הימני של הנקודה ב-CJK מוסר באמצעות text-spacing-trim.
כשתווי פיסוק מופיעים בשורה, צריך להסיר את המחצית הימנית של הנקודה ב-CJK.

תחביר של צבע יחסי

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

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

בדמו הבא אפשר להשוות, על ידי גרירה של פס ההזזה, בין ההשפעות של balance ו-pretty על כותרת ועל פסקה. רוצים לנסות לתרגם את הדמו לשפה אחרת?
:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

פונקציית light-dark()

יחד עם הפונקציה light-dark(), עיצוב הנושאים הפך לדינמי ופשוט יותר.

תמיכה בדפדפנים

  • Chrome: ‏ 123.
  • Edge: ‏ 123.
  • Firefox: ‏ 120.
  • Safari: 17.5.

מקור

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

תצוגה חזותית של light-dark(). מידע נוסף זמין בהדגמה.
html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

אם המשתמש בחר עיצוב בהיר, הלחצן יהיה עם רקע כחול בהיר. אם המשתמש בחר בעיצוב כהה, הלחצן יהיה עם רקע כחול כהה.

דף :has() של הבורר

אי אפשר לדבר על ממשק משתמש מודרני בלי להזכיר את אחד מהפיצ'רים החשובים ביותר לשיתוף פעולה בין פלטפורמות בשנה האחרונה, והוא הבורר :has(), שנוסף לדפדפנים השונים בדצמבר של השנה שעברה. ממשק ה-API הזה משנה את כללי המשחק בכתיבה של סגנונות לוגיים.

תמיכה בדפדפנים

  • Chrome: ‏ 105.
  • Edge: ‏ 105.
  • Firefox: 121.
  • Safari: 15.4.

מקור

הבורר :has() מאפשר לבדוק אם לרכיב צאצא יש צאצאים ספציפיים, או אם הצאצאים האלה נמצאים במצב ספציפי, ובעצם יכול לשמש גם כבורר הורה.

הדגמה של has() שמשמש לעיצוב של בלוקים להשוואה ב-Tokopedia.

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

"בעזרת הבורר ‎ :has() הצלחנו לבטל את האימות שמבוסס על JavaScript של הבחירה של המשתמש ולהחליף אותו בפתרון CSS שפועל בצורה חלקה עבורנו עם אותה חוויה כמו קודם." – Aman Soni, Tech Lead,‏ PolicyBazaar

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

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

תמיכה בדפדפנים

  • Chrome: ‏ 105.
  • Edge: ‏ 105.
  • Firefox: 110.
  • Safari: 16.

מקור

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

אתר
Angular.dev שמציג שאילתות של קונטיינרים בכרטיסי הכותרת.

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

יצירה מחדש של שאילתת הקונטיינר של כרטיס הכותרת ב-Angular

@property

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

תמיכה בדפדפנים

  • Chrome: ‏ 85.
  • Edge: ‏ 85.
  • Firefox: ‏ 128.
  • Safari: 16.4.

מקור

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

סיכום

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

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

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

כדי לקבל מידע נוסף על התכונות החדשות האלה כשהן יושקו, כדאי לעקוב אחרינו בכתובות developer.chrome.com ו-web.dev, שבהן הצוות שלנו משתף את החדשות האחרונות בתחום טכנולוגיות האינטרנט. כדאי לנסות את האנימציות שמבוססות על גלילה, את מעברי התצוגה, את מיקום העוגן ואפילו את האפשרות לבחור סגנון, ולספר לנו מה חשבתם. אנחנו כאן כדי להקשיב ולעזור.