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

Una Kravets

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הצגת המעברים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@view-transition {
  navigation: auto;
}

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

עם pageswap אפשר לבצע שינויים בדף היוצא ממש לפני שנוצרות התמונות הישנות, ועם 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 עצמו.

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

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

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

The Popover API

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

רכיבי Popover מוסתרים באמצעות 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.
• פונקציונליות של סגירה בלחיצה מחוץ לחלון: לחיצה מחוץ לאזור של התפריט הנפתח תסגור אותו ותחזיר את המיקוד.
• ניהול ברירת המחדל של המיקוד בכרטיסיות: פתיחת ה-popover גורמת לכך שה-tab stop הבא יהיה בתוך ה-popover.
• מקשי קיצור מובנים במקלדת: הקשה על המקש esc או לחיצה כפולה על המתג תסגור את הבועה ותחזיר את המיקוד.
• קישורי רכיבים שמוגדרים כברירת מחדל. ‫: הדפדפן מקשר באופן סמנטי בין חלון קופץ לבין הרכיב שמפעיל אותו.

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

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

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

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

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

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

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

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

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

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, יש תמיכה במיקום עוגן.

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

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

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

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

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

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

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

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

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

רכיב select עם סגנון

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

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

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

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

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

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

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

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 בבורר

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

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

קינון עם חיפוש קדימה

התכונה Native CSS nesting (קינון CSS מקורי) הושקה בכל הדפדפנים בשנה שעברה, ומאז היא שופרה כך שתומכת בתכונה lookahead (חיפוש מראש). המשמעות היא שהסימן & לפני שמות הרכיבים כבר לא נדרש. כך ההזחה נראית הרבה יותר ארגונומית ודומה למה שהייתי רגיל אליו בעבר.

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

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

צילום מסך

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

div {
  align-content: center;
}

גלישת טקסט: איזון ועיצוב

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

h1 {
  text-wrap: balance;
}

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

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

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

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

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

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

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

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

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

html {
  color-scheme: light dark;
}

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

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

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

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

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

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

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

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

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

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

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

@property

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

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

סיכום

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

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

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

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