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

Una Kravets

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

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

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

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

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

• 115
• 115
• 
• x

מקור

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

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

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

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

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

הדגמה בשידור חי

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

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

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

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

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

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

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

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

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

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

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

הצגת המעברים

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

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

• 111
• 111
• x
• 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;
}

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

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

תמיכה בדפדפן

• 125
• 125
• x
• 

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

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

תמיכה בדפדפן

• 125
• 125
• x
• 18

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

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

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

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

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

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

תמיכה בדפדפן

• 126
• 126
• x
• 

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

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

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

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

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

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

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

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

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

פירוט החלקים של ביטוי בחירת

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

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

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

Popover API

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

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

• 114
• 114
• 125
• 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>

כאשר מאפיין החלון הקופץ מופעל, הדפדפן מטפל בהתנהגויות מפתח רבות ללא סקריפט נוסף, כולל:

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

חשוב: המאפיין של חלון הקופץ לא מכיל מעצם טבעו משמעות סמנטית, ולכן עדיין צריך להשתמש ב-HTML או ב-ARIA המתאימים כדי לספק משמעות הקשרית יותר לאובייקט של חלון הקופץ. בנוסף, חלון קופץ לא הופך את שאר הדף ללא פעיל כדי להפוך אותו ללא אינטראקטיבי, או לפתרון 'מלכודת המיקוד'. אם אתם רוצים שחוויית השימוש תהיה כזו, סביר להניח שרכיב <dialog> יתאים יותר.

בתפריט בדף הבית של GitHub.

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

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

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

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

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

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

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

• 117
• 117
• 129
• 17.4

מקור

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

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

• 117
• 117
• 129
• 17.5

מקור

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

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

• 117
• 117
• x
• x

מקור

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

הדגמה חזותית

הדגמה בשידור חי

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.

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

• 125
• 125
• x
• x

מקור

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

הדגמה חזותית

הדגמה בשידור חי

מגדירים קשר גומלין הממוקם על ידי עוגן ב-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 מיקום

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

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

הערה: חשוב לזכור שבשלב הזה זהו API ניסיוני, ולכן סביר להניח שהתחביר הזה ישתנה.

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

תמיכה בדפדפן

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

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

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

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

• 123
• 123
• x
• x

מקור

הקלטת מסך לדוגמה

הדגמה בשידור חי

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

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

<hr> ב-<select>

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

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

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

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

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

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

תמיכה בדפדפן

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

תמיכה בדפדפן

• 123
• 123
• 125
• 17.4

צילום מסך

הדגמה בשידור חי

div {
  align-content: center;
}

עטיפת טקסט: איזון ויפה

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

הקלטת מסך לדוגמה

הדגמה בשידור חי

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

h1 {
  text-wrap: balance;
}

מידע נוסף על גלישת טקסט: יתרה

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

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

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

• 119
• 119
• x
• x

השוואה בין word-break: normal לבין word-break: auto-phrase

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

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

• 123
• 123
• x
• x

מקור

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

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

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

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

הדגמה של Screencast

הדגמה בשידור חי

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

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

• 123
• 123
• 120
• 17.5

מקור

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

המחשה של light-dark(). מידע נוסף זמין בהדגמה.

html {
  color-scheme: light dark;
}

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

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

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

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

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

• 105
• 105
• 121
• 15.4

מקור

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

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

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

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

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

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

תמיכה בדפדפן

• 105
• 105
• 110
• 16

מקור

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

אתר

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

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

הדגמה של Screencast

הדגמה בשידור חי

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

@property

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

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

• 85
• 85
• 128
• 16.4

מקור

הקלטת מסך לדוגמה

הדגמה בשידור חי

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

סיכום

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

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

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

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