פלטפורמת האינטרנט התמלאה בחדשנות, עם תכונות של CSS וממשק המשתמש באינטרנט בחזית של תהליך הפיתוח המלהיב הזה. אנחנו חיים בעידן הזהב של ממשק משתמש באינטרנט שבו תכונות CSS חדשות נוחתות בדפדפנים בקצב שלא נראה בעבר, פותחות עולם של אפשרויות ליצירת חוויות אינטרנט יפות ומעניינות. בפוסט הזה בבלוג אפשר להתעמק במצב הנוכחי של שירות ה-CSS ולבחון כמה מהתכונות החדשות והמהפכניות ביותר שמגדירות מחדש את האופן שבו אנחנו מפתחים אפליקציות אינטרנט. הן הוצגו בשידור חי ב-Google I/O 2024.
חוויות אינטראקטיביות חדשניות
חוויית השימוש באינטרנט היא למעשה קריאה ותגובה ביניכם לבין המשתמשים. לכן חשוב כל כך להשקיע באינטראקציות איכותיות של המשתמשים. אנחנו עובדים על שיפורים גדולים במיוחד שמאפשרים לנו לנווט בתוך בדפי אינטרנט ולנווט ביןבין משתמשים אחרים באינטרנט.
אנימציות שמונעות גלילה
בדיוק כפי שהשם מרמז, ה-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 המובנה הזה מפחית את נטל הקוד שצריך לתחזק, בין אם מדובר בסקריפט מותאם אישית שכתבתם ובין אם מדובר בהוספת תלות נוספת של צד שלישי. הוא גם מבטל את הצורך לשלוח תצפיתי גלילה שונים, מה שמביא ליתרונות די משמעותיים בביצועים. הסיבה לכך היא שאנימציות מבוססות-גלילה פועלות מה-thread הראשי כשמתבצעת אנימציה של מאפיינים שניתן להוסיף לאנימציה במרכיב, כמו המרות ושקיפות, בין אם משתמשים בממשק ה-API החדש ישירות ב-CSS ובין אם משתמשים בהוקים (hooks) של JavaScript.
טוקיו השתמשה לאחרונה באנימציות מבוססות גלילה כדי להציג את סרגל הניווט של המוצר בזמן הגלילה. לשימוש ב-API הזה יש כמה יתרונות משמעותיים, גם לניהול הקוד וגם לשיפור הביצועים.
"הצלחנו לצמצם עד 80% משורות הקוד שלנו בהשוואה לשימוש באירועי גלילה רגילים של JS, וגילינו שהשימוש הממוצע במעבד ירד מ-50% ל-2% בזמן הגלילה. - אנדי ויהלים, מהנדס תוכנה בכיר, Tokopedia"
העתיד של אפקטים בגלילה
אנחנו יודעים שההשפעות האלה ימשיכו להפוך את האינטרנט למקום מעניין יותר, וכבר שוקלים מה צפוי בהמשך. התכונה הזו כוללת את היכולת להשתמש בצירי זמן חדשים של אנימציה, אלא גם להשתמש בנקודת גלילה כדי להפעיל את ההתחלה של אנימציה, שנקראת 'אנימציות שמופעלות באמצעות גלילה'.
ובעתיד יהיו עוד יותר תכונות גלילה שיושקו בדפדפנים. בהדגמה הבאה מוצג שילוב של התכונות העתידיות האלה. היא משתמשת ב-CSS scroll-start-target כדי להגדיר את התאריך והשעה הראשוניים במסגרת הבוררים, ובאירוע JavaScript scrollsnapchange כדי לעדכן את תאריך הכותרת, ולכן אין צורך לסנכרן את הנתונים עם האירוע המוצמד.
אפשר גם להשתמש בו כדי לעדכן בורר בזמן אמת באמצעות אירוע scrollsnapchanging של JavaScript.
התכונות הספציפיות האלה נמצאות כרגע רק ב-Canary מאחורי דגל, אבל הן מספקות יכולות שלא היו אפשריות או קשות מאוד לפתח בפלטפורמה עד כה, ומדגישות את העתיד של אפשרויות האינטראקציה שמבוססות על גלילה.
כדי לקבל מידע נוסף על תחילת העבודה עם אנימציות מבוססות גלילה, הצוות שלנו השיק סדרת סרטונים חדשה שניתן למצוא בערוץ YouTube של Chrome למפתחים. כאן תלמדו את היסודות של אנימציות מבוססות גלילה מאת ברמוס ואן דאם, כולל האופן שבו התכונה פועלת, אוצר המילים, דרכים שונות ליצירת אפקטים ואיך לשלב אפקטים ליצירת חוויות עשירות. סדרת סרטונים מעולה שכדאי לצפות בה.
הצגת המעברים
לאחרונה דיברנו על תכונה חדשה ויעילה שיוצרת אנימציה בתוך דפי אינטרנט. עם זאת, יש גם תכונה חדשה עוצמתית שנקראת 'מעברים בין תצוגות', שמאפשרת להנפיש בין צפיות בדפים כדי ליצור חוויית משתמש חלקה. מעברים בין תצוגות מעניקים רמה חדשה של גמישות באינטרנט, שמאפשרים לך ליצור מעברים חלקים בין תצוגות שונות בתוך דף יחיד, או אפילו בין דפים שונים.
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;
}
הצגת כיתות המעבר
אפשר להשתמש בשמות של מעברים כדי להחיל אנימציות מותאמות אישית למעבר בין תצוגות, אם כי התהליך עשוי להיות מורכב והרבה רכיבים מועברים. העדכון החדש הראשון להצגת המעברים השנה מפשט את הבעיה הזו ומאפשר ליצור הצגת כיתות מעבר שניתן להחיל על אנימציות בהתאמה אישית.
תמיכה בדפדפן
- 125
- 125
- x
- x
הצגת סוגי המעברים
שיפור משמעותי נוסף במעברים בין תצוגות הוא התמיכה בסוגי המעברים בין תצוגות מפורטות. סוגי המעברים של תצוגות מפורטות שימושיים כשרוצים ליצור מעבר בין תצוגות חזותיות כשמוסיפים אנימציה לצפיות בדף וממנה.
לדוגמה, ייתכן שתרצו להגדיר אנימציה של דף בית בדף בלוג, בדרך שונה מזו שבה האנימציה של דף הבלוג מוצגת בחזרה לדף הבית. לחלופין, ייתכן שתרצו לעבור בין דפים שונים בדרכים שונות, כמו בדוגמה הזו, משמאל לימין ובחזרה. לפני שזה היה מבולגן. אפשר היה להוסיף מחלקות ל-DOM כדי להחיל סגנונות, ולאחר מכן להסיר את המחלקות לאחר מכן. סוגי מעבר תצוגה מאפשרים לדפדפן לנקות מעברים ישנים במקום לדרוש ממך לעשות זאת באופן ידני לפני התחלת העברות חדשות. הפעולה הזו מתבצעת באופן אוטומטי.
אפשר להגדיר סוגים בתוך הפונקציה 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(). במקום זאת, אפשר להביע הסכמה לשני הדפים שקשורים למעבר התצוגה באמצעות הכלל @view-transition של שירות ה-CSS.
@view-transition {
navigation: auto;
}
לקבלת אפקט מותאם אישית, אפשר לבצע הוק (hook) ב-JavaScript באמצעות פונקציות event listener החדשות pageswap או pagereveal, שנותנים גישה לאובייקט המעבר בין תצוגות.
עם pageswap אפשר לבצע שינויים ברגע האחרון בדף היוצא ממש לפני שצילומי המצב הישנים יתקבלו, ובאמצעות pagereveal להתאים אישית את הדף החדש לפני שהוא יתחיל להיות מוצג לאחר אתחול.
window.addEventListener('pageswap', async (e) => {
// ...
});
window.addEventListener('pagereveal', async (e) => {
// ...
});
בעתיד, אנחנו מתכננים להרחיב את האפשרות של מעבר בין תצוגות, כולל:
- מעברים עם היקף הרשאות: מאפשרים לכם להגביל מעבר לעץ משנה של DOM כדי לאפשר לשאר הדף להמשיך להיות אינטראקטיבי ולתמוך במעברים מרובים של תצוגות מפורטות בו-זמנית.
- מעברים בין תצוגות שמבוססות על תנועות: אפשר להשתמש בתנועות גרירה או החלקה כדי להפעיל מעבר לתצוגה בכמה מסמכים, וליהנות מחוויות ברמה גבוהה יותר של נייטיב באינטרנט.
- התאמת ניווט ב-CSS: ניתן להתאים אישית את המעבר של צפיות במסמכים שונים ישירות בשירות ה-CSS כחלופה לשימוש באירועי
pageswapו-pagerevealב-JavaScript למידע נוסף על מעברי צפיות באפליקציות מרובות דפים, כולל איך להגדיר אותן בעזרת עיבוד מראש שמניבות את הביצועים הטובים ביותר, כדאי לעיין בשיחה הבאה של ברמוס ואן דאם:
רכיבי ממשק משתמש שמותאמים למנועים: פישוט של אינטראקציות מורכבות
לא קל ליצור אפליקציות אינטרנט מורכבות, אבל אנחנו ממשיכים לפתח את שירותי ה-CSS ו-HTML כדי שהתהליך הזה יהיה הרבה יותר קל לניהול. תכונות ושיפורים חדשים מפשטים את היצירה של רכיבים בממשק המשתמש, ומאפשרים לכם להתמקד ביצירת חוויות מעולות. לשם כך נעשה מאמץ משותף שכולל מספר גופים וקבוצות של תקנים חשובים, כולל קבוצת העבודה של CSS, Open UI Community Group ו-whatWG (קבוצת העבודה לטכנולוגיית היפר-טקסט לאפליקציות).
אחת הבעיות העיקריות של המפתחים היא בקשה פשוטה לכאורה: היכולת לעצב תפריטים נפתחים (הרכיב הנבחר). על פני השטח, נראה שמדובר בבעיה מורכבת, שאליה מגיעים בכל מיני חלקים של הפלטפורמה – מהפריסה והרינדור, דרך גלילה ואינטראקציה, דרך עיצוב של סוכן משתמש ומאפייני CSS ואפילו שינויים ב-HTML עצמו.
תפריט נפתח מורכב מהרבה חלקים ויש בו הרבה מצבים שצריך להביא בחשבון, כמו:
- קישורי מקלדת (לכניסה או ליציאה מהאינטראקציה)
- אפשר ללחוץ על הלחצן 'המסך פונה כלפי חוץ' כדי לסגור
- ניהול פעיל של חלונות קופצים (סגירת חלונות קופצים אחרים כאשר נפתח אחד)
- ניהול התמקדות בכרטיסיות
- המחשה של ערך האפשרות שנבחר
- סגנון אינטראקציה עם חץ
- ניהול מצב (פתיחה/סגירה)
נכון לעכשיו קשה לנהל את כל המצבים האלה בעצמכם, אבל גם הפלטפורמה לא מאפשרת לעשות זאת בקלות. כדי לפתור את הבעיה, פירטנו את החלקים האלה והוספנו כמה תכונות בסיסיות שיאפשרו תפריטים נפתחים של עיצוב, אבל גם הרבה יותר.
ממשק ה-API של Popover
קודם כול שלחנו מאפיין גלובלי בשם popover, ואנחנו שמחים להודיע שלפני כמה שבועות הגיע סטטוס Baseline, שזמין עכשיו.
רכיבי חלון קופץ מוסתרים עם display: none עד שהם נפתחים באמצעות invoker כמו לחצן או באמצעות 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או לחיצה על החלפה כפולה תסגור את החלון הקופץ ותחזיר את המיקוד. - קישורי הרכיבים שמוגדרים כברירת מחדל : הדפדפן מחבר באופן סמנטי חלון קופץ לטריגר שלו.
יכול להיות שאתם אפילו משתמשים בממשק ה-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;
}
אמנם נוח מאוד להשתמש במיקום עוגן עם חלון קופץ, אבל חלון קופץ הוא בהחלט לא דרישה לשימוש במיקום העוגן. ניתן להשתמש במיקום העוגן עם כל שני רכיבים (או יותר) כדי ליצור קשר גומלין חזותי. למעשה, ההדגמה הבאה, בהשראת מאמר של רומן קומרוב, מראה סגנון של קו תחתון שמעוגן לפריטים ברשימה כשמציבים את סמן העכבר מעליהם או מעבירים מעליהם את העכבר.
הדגמה חזותית
הדגמה בשידור חי
בדוגמה הזו נעשה שימוש בפונקציית העוגן כדי להגדיר את מיקום העוגן באמצעות התכונות הפיזיות של 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. לרכיבים כמו תצוגה מקדימה בסגנון ויקיפדיה, תבנית שמופיעה בכל פלטפורמת האינטרנט, צריכה להיות אפשרות לקיים אינטראקציה איתה, וגם להפעיל חלון קופץ מקישור ומהמשתמש שמביע עניין בלי בהכרח לחיצה, כמו העברת עכבר מעל מודעה או התמקדות בכרטיסיות.
בשלב הבא אנחנו משתמשים ב-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 העוצמתי הזה אבל צופים גם להרחיב את היכולות שלו בעתיד.
בחירת עיצוב אישי
בעזרת השימוש ב-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, כי יש בו סגנון מתוחכם לעיצוב רספונסיבי. אפשר לעשות את זה ועוד הרבה יותר עם הבחירה המסוגננת שיושקה בקרוב, וזו תוספת נחוצה לפלטפורמת האינטרנט.
הדגמה חזותית
הדגמה בשידור חי
אקורדיון בלעדי
צוות Chrome לא מתמקד בממשק המשתמש היחיד, פתרון של סוגי עיצוב נבחרים (וכל הרכיבים שקשורים אליו). עדכון הרכיב הנוסף הראשון הוא היכולת ליצור אקורדיונים בלעדיים, שבהם ניתן לפתוח רק אחד מהפריטים באקורדיון בכל פעם
תמיכה בדפדפן
- 120
- 120
- x
- 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, אבל הם תואמים לפקד הטופס רק אחרי שלמשתמש הייתה אינטראקציה משמעותית עם הקלט. המשמעות היא שיש צורך הרבה פחות בקוד כדי לקבוע אם הייתה אינטראקציה עם ערך טופס מסוים או אם הוא הפך ל'מלוכלך', מה שיכול להועיל מאוד לשליחת משוב ממשתמשים, והוא מצמצם כמות גדולה של סקריפטים שנדרשים כדי לעשות זאת בעבר.
הדגמה של Screencast
הדגמה בשידור חי
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(...);
}
מידע נוסף על שימוש ברכיבים פסאודוניים של אימות טופס*.
field-sizing: content
עדכון שימושי נוסף לרכיבים שנחת לאחרונה הוא field-sizing: content, ואפשר להחיל אותו על פקדי טפסים כמו קלט ואזורי טקסט. כך גודל הקלט גדל (או מתכווץ) בהתאם לתוכן שלו. field-sizing: content יכול להיות שימושי במיוחד לאזורי טקסט, כי כבר לא נכנסים לגדלים קבועים שבהם צריך לגלול למעלה כדי לראות את מה שכתבתם בחלקים הקודמים של ההנחיה בתיבת קלט קטנה מדי.
תמיכה בדפדפן
- 123
- 123
- x
- x
הדגמה של Screencast
הדגמה בשידור חי
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>
למידע נוסף על שימוש בשעות מסוימות בבחירה
שיפורים באיכות החיים
אנחנו חוזרים על עצמה כל הזמן, ולא רק לאינטראקציות ולרכיבים. יש עוד הרבה עדכונים לגבי איכות החיים שהתקבלו בשנה האחרונה.
פרצוף מקונן
הצבת ה-CSS המקורית נחתמה בכל הדפדפנים בשנה שעברה, ומאז השתפרה התמיכה ביחס לפלחים במבט-על. המשמעות היא שחובה לציין & לפני שמות הרכיבים. כך הסידור הפנימי הופך להיות הרבה יותר ארגונומי ודומה למה שהתרגלתי אליו בעבר.
אחד הדברים שאני הכי אוהב בנושא קינון CSS הוא היכולת לחסום רכיבים חזותיים באופן חזותי, וברכיבים האלה נכללים מצבים ושינויים, כמו שאילתות מאגר תגים ושאילתות מדיה. בעבר, נהגתי לקבץ את כל השאילתות האלה בתחתית הקובץ למטרות ספציפיות. עכשיו אתם יכולים לכתוב אותם בדרך הגיונית, לצד שאר הקוד
.card {
/* card base styles */
h2 {
/* child element style */
}
&.highlight {
/* modifier style */
}
&:hover, &:focus {
/* state styles */
}
@container (width >= 300px) {
/* container query styles */
}
}
יישור תוכן לפריסת בלוק
עוד שינוי נחמד הוא היכולת להשתמש במנגנוני מרכוז כמו align-content בפריסת בלוקים. כלומר, עכשיו אפשר לבצע פעולות כמו מרכוז אנכי בתוך div בלי להפעיל פריסת רשת או פריסה גמישה, ובלי תופעות לוואי כמו מניעת כיווץ שוליים, שלא כדאי לבצע באמצעות האלגוריתמים של הפריסה האלה.
תמיכה בדפדפן
- 123
- 123
- 125
- 17.4
צילום מסך
הדגמה בשידור חי
div {
align-content: center;
}
עטיפת טקסט: איזון ויפה
ואם כבר מדברים על הפריסה, פריסת הטקסט השתפרה בזכות ההוספה של text-wrap: balance ו-pretty. text-wrap: balance משמש לגוש טקסט אחיד יותר, ואילו text-wrap: pretty מתמקד בצמצום של יחידות יחיד בשורה האחרונה בטקסט.
הדגמה של Screencast
הדגמה בשידור חי
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
תחביר של צבעים יחסיים
בעולם של עיצובי הצבעים, ראינו עדכון גדול עם תחביר צבעים יחסי.
בדוגמה הזו, הצבעים שמופיעים כאן מבוססים על עיצוב 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(), העיצוב הפך לדינמי ופשוט הרבה יותר.
הפונקציה light-dark() היא שיפור ארגונומי שמפשט את האפשרויות של עיצוב הצבעים, כך שאפשר לכתוב סגנונות עיצוב בצורה תמציתית יותר, כפי שהדגימו בצורה יפה מאוד בתרשים החזותי הזה של אדם ארגייל. לפני כן, כדי להגדיר אפשרויות לעיצוב היה צריך להשתמש בשני בלוקים שונים של קוד (עיצוב ברירת המחדל ושאילתה בנושא העדפות המשתמש). עכשיו אפשר לכתוב את אפשרויות הסגנון האלה גם לעיצוב בהיר וגם לעיצוב כהה באותה שורה של CSS באמצעות הפונקציה light-dark().
light-dark(). מידע נוסף זמין בקטע הדגמה.
html {
color-scheme: light dark;
}
button {
background-color: light-dark(lightblue, darkblue);
}
אם המשתמש בחר בעיצוב בהיר, ללחצן יהיה רקע בצבע תכלת. אם המשתמש בחר בעיצוב כהה, ללחצן יהיה רקע כחול כהה.
דף :has() של הבורר
אם לדבר על ממשק משתמש מודרני בלי לציין את אחת התכונות הבולטות ביותר מהשנה האחרונה בתחום של יכולת פעולה הדדית, שאמורה להיות הבורר :has(), נכנס לכל הדפדפנים בדצמבר בשנה שעברה. ה-API הזה משנה את כללי המשחק לכתיבת סגנונות לוגיים.
הבורר :has() מאפשר לבדוק אם לרכיב צאצא יש צאצאים ספציפיים, או אם הצאצאים האלה נמצאים במצב ספציפי, ולמעשה הוא יכול לפעול גם כבורר הורה.
has() משמשת ליצירת בלוקים להשוואה בין בלוקים ב-Tokopedia.:has() כבר הוכיח את עצמו כמועיל במיוחד לחברות רבות, כולל PolicyBazaar, שמשתמשות ב-:has() כדי לעצב בלוקים על סמך התוכן הפנימי שלהן, כמו למשל בקטע ההשוואה, שבו הסגנון משתנה אם יש תוכנית להשוואה בקבוצה או אם היא ריקה.
"עם הבורר :has() , הצלחנו לבטל את האימות המבוסס על JavaScript של בחירת המשתמש ולהחליף אותו בפתרון CSS שעובד באופן חלק עבורנו עם אותה החוויה כמו קודם.– אמן Soni, מנהל טכנולוגיה, PolicyBazaar"
שאילתות לגבי קונטיינרים
תוספת חשובה נוספת לאינטרנט, שזמינה עכשיו לאחרונה שהולכת וגדלה בשימוש, היא שאילתות קונטיינרים, שמאפשרות להריץ שאילתות על הגודל המהותי של רכיב הורה כדי להחיל סגנונות: שילוב אלגנטי הרבה יותר משאילתות מדיה, שרק מריץ שאילתות על גודל אזור התצוגה.
חברת Angular השיקה לאחרונה אתר תיעוד חדש ויפהפה ב-angular.dev באמצעות שאילתות קונטיינרים כדי לעצב את בלוקי הכותרת על סמך השטח הזמין שלהם בדף. לכן, גם אם הפריסה משתנה ותעבור מפריסת סרגל הצד של כמה עמודות לפריסה של עמודה אחת, הבלוקים של הכותרות יכולים לבצע התאמה עצמית.
ללא שאילתות קונטיינר, היה קשה לבצע פעולה כזו, והיה קשה מאוד להשיג אותה, והשפיע על הביצועים כתוצאה מכך. עכשיו די טריוויאלי לעצב רכיב על סמך גודל ההורה שלו.
הדגמה של Screencast
הדגמה בשידור חי
@property
ולסיום, בקרוב מאוד, אנחנו שמחים לראות ש- @property נוחתים ב-Baseline. זו תכונה חשובה שמאפשרת לספק משמעות סמנטית למאפיינים מותאמים אישית של CSS (שנקראים גם משתני CSS), והיא מאפשרת מגוון רחב של תכונות חדשות לאינטראקציות. @property מאפשר גם שימוש במשמעות לפי הקשר, בבדיקת הקלדה, בהגדרות ברירת מחדל ובערכי גיבוי ב-CSS. פתיחת דלתות לתכונות מתקדמות יותר כמו שאילתות בסגנון טווח. זו תכונה שלא הייתה זמינה בעבר, ועכשיו היא מספקת יותר עומק לשפה של CSS.
הדגמה של Screencast
הדגמה בשידור חי
@property --card-bg {
syntax: "<color>";
inherits: false;
initial-value: #c0bae8;
}
סיכום
בזכות כל היכולות החדשות והעוצמתיות האלה של ממשק המשתמש שמותאמות לדפדפנים שונים, האפשרויות הן אינסופיות. חוויות אינטראקטיביות חדשניות עם אנימציות מבוססות גלילה ומעברי תצוגה הופכים את האינטרנט לגמיש ואינטראקטיבי יותר בדרכים שלא ראינו בעבר. והרמה הבאה של רכיבי ממשק המשתמש מאפשרת לבנות רכיבים חזקים ומותאמים אישית בקלות רבה, בלי לפגוע בחוויית הנייטיב כולה. ולבסוף, שיפורים באיכות החיים של הארכיטקטורה, הפריסה, הטיפוגרפיה והעיצוב הרספונסיבי, לא רק יפתרו את הדברים הגדולים, אלא גם מעניקים למפתחים את הכלים הדרושים להם כדי לבנות ממשקים מורכבים שעובדים במגוון מכשירים, גורמי צורה וצורכי משתמשים.
התכונות החדשות האלה אמורות לאפשר לכם להסיר סקריפטים של צד שלישי לטובת תכונות עתירות ביצועים, כמו גלילה ורכיבים לשיתוף אינטרנט בין מכשירים באמצעות מיקום עוגן, בניית מעברים גמישים בין דפים, עיצוב תפריטים נפתחים ושיפור המבנה הכללי של הקוד.
עכשיו הגיע הזמן הנכון יותר להיות מפתח/ת אתרים. אין כל כך הרבה אנרגיה והתרגשות מאז ההכרזה על CSS3. תכונות שהיינו צריכים, אבל רק חלמנו שהן ינחו בעבר, הופכים סוף סוף למציאות והן חלק מהפלטפורמה. בזכות הקול שלך אנחנו יכולים לתעדף את היכולות האלה ולממש אותן. אנחנו עושים מאמצים כדי שיהיה לכם קל יותר לבצע את המשימות הקשה ומטורגטות כדי שתוכלו להשקיע יותר זמן בפיתוח הדברים שחשובים לכם – כמו התכונות העיקריות ופרטי העיצוב שמייחדים את המותג שלכם.
כדי לקבל מידע נוסף על התכונות החדשות האלה כשהן זמינות, אפשר לעקוב אחר העדכונים בכתובת developer.chrome.com וב-web.dev, שם הצוות שלנו משתף את החדשות האחרונות בתחום טכנולוגיות האינטרנט. אפשר לנסות אנימציות שמבוססות על גלילה, מעברים בין תצוגות, מיקום עוגן או אפילו בחירה בעיצוב מותאם אישית, ולספר לנו מה דעתך. אנחנו פה לשירותך.