תאריך פרסום: 19 במאי 2026
זו רשימה שנוצרה מכל תרחישי השימוש שזמינים עכשיו ב-Modern Web Guidance.
accessibility
accessible-error-announcement
כדי לוודא שמשתמשים בקורא מסך יקבלו משוב על שגיאה רק אחרי אינטראקציה, כמו משתמשים רגילים, צריך לסנכרן בין מצבי נגישות פרוגרמטיים (כמו aria-invalid) לבין המצב החזותי :user-invalid.
התכונות שבשימוש:
built-in-ai
language-detection
התכונות שבשימוש:
language-model
הפעלת הסקת מסקנות בשפה טבעית במכשיר בדפדפן באמצעות Prompt API, עם פלט סטרימינג, תגובות מובנות בפורמט JSON וניהול סשנים מרובי תורות.
התכונות שבשימוש:
summarizer
סיכום תוכן טקסט באמצעות Summarizer API במכשיר.
התכונות שבשימוש:
translator
התכונות שבשימוש:
css
highlight-text-ranges
הדגשה של טווחים שרירותיים של טקסט בדף, כמו תוצאות חיפוש, שגיאות איות או סמני מיקום של עריכה משותפת.
התכונות שבשימוש:
forms
animated-select-picker
יצירת רכיב בחירה בהתאמה אישית עם אנימציה בתפריט הנפתח. לדוגמה, התפריט נעלם בהדרגה או מחליק אל תוך התצוגה, או שהאפשרויות מונפשות כשבוחרים אותן.
התכונות שבשימוש:
autofill-address-form
יוצרים טופס כתובת עם מאפייני השלמה אוטומטית נכונים ותמיכה במילוי אוטומטי.
התכונות שבשימוש:
autofill-highlight-inputs
משתמשים ב-CSS כדי להדגיש שדות בטופס שמולאו אוטומטית על ידי הדפדפן ולא נערכו על ידי המשתמש.
התכונות שבשימוש:
autofill-payment-form
ליצור טופס תשלום שבו נאספים פרטי כרטיס עם ערכי השלמה אוטומטית נכונים ותמיכה במילוי אוטומטי.
התכונות שבשימוש:
autofill-sign-in-form
ליצור טופס כניסה עם ערכי השלמה אוטומטית נכונים ותמיכה במילוי אוטומטי.
התכונות שבשימוש:
autofill-sign-up-form
יוצרים טופס הרשמה עם ערכים נכונים של השלמה אוטומטית ותמיכה במילוי אוטומטי.
התכונות שבשימוש:
brand-consistent-forms
מתאימים את תיבות הסימון, לחצני הבחירה, מחווני הטווח וסרגלי ההתקדמות ללוח הצבעים של האתר בלי להחליף אותם ברכיבים מותאמים אישית.
התכונות שבשימוש:
branded-select-styling
ליצור רכיבי בחירה מותאמים אישית שבהם הכפתור, הכלי לבחירת תאריך, סמל החץ וסימן ה-V תואמים בצורה חלקה לטיפוגרפיה, לצבעים, לריווח ולגבולות של המותג או של מערכת העיצוב.
התכונות שבשימוש:
custom-select-picker-layouts
ליצור רכיבי בחירה בהתאמה אישית עם אפשרויות שמוצגות בדרכים ייחודיות או מעניינות, במקום ברשימה המסורתית של אפשרויות שמוצגות אחת מעל השנייה.
התכונות שבשימוש:
form-fields-automatically-fit-contents
השדות בטופס יכולים לגדול ולהצטמצם בהתאם לקלט של המשתמש, למשל כשהמשתמש מקליד או בוחר אפשרות אחרת. אפשר להגדיר מגבלות גודל מקסימלי ומינימלי כדי ליצור שדות דינמיים בטופס שמותאמים לעיצוב הדף.
התכונות שבשימוש:
required-field-feedback
הצגת הודעת שגיאה לגבי שדות חובה בטופס שדילגו עליהם או שהושארו ריקים רק אחרי שהמשתמש ביצע אינטראקציה עם הטופס, כדי למנוע שגיאות מוקדמות ולהבטיח שהמשוב יהיה בזמן ורלוונטי להקשר של תהליך השימוש של המשתמש.
התכונות שבשימוש:
rich-media-picker
ליצור רכיב בחירה מותאם אישית שהאפשרויות שלו יכולות להכיל עיצוב HTML מורכב (למשל תמונות, סמלים ועיצוב עשיר אחר) ולא רק טקסט פשוט.
התכונות שבשימוש:
select-menu-interaction
צריך לוודא שאפשרות שאינה ברירת המחדל נבחרה בתפריט בחירה רק אחרי שהמשתמש ביצע אינטראקציה עם אמצעי הבקרה.
התכונות שבשימוש:
validate-input-after-interaction
הצגת משוב על אימות שדות בטופס (למשל, דרישות לגבי מורכבות הסיסמה או פורמט האימייל) רק אחרי שהמשתמש סיים את האינטראקציה הראשונית שלו, כדי למנוע הצגת שגיאות מוקדמות מדי בזמן טעינת הדף או בזמן שהמשתמש מקליד.
התכונות שבשימוש:
passkeys
passkey-authentication
אימות משתמש חוזר באמצעות מפתח גישה לכניסה ראשית.
התכונות שבשימוש:
passkey-conditional-create
רישום שקט של מפתח גישה למשתמש קיים אחרי כניסה מוצלחת באמצעות סיסמה.
התכונות שבשימוש:
passkey-management
המשתמשים יכולים לראות ולנהל את מפתחות הגישה שרשומים בחשבון שלהם.
התכונות שבשימוש:
passkey-reauthentication
לאמת את הזהות של משתמש שמחובר לחשבון באמצעות מפתחות הגישה הקיימים שלו לפני ביצוע פעולה רגישה.
התכונות שבשימוש:
passkey-registration
רישום מפתח גישה לחשבון משתמש קיים.
התכונות שבשימוש:
performance
batch-analytics-events
הפונקציה Debounce מקבצת כמה אירועים של Analytics יחד למשואה אחת כדי למזער את העומס על הרשת ולהפחית את העומס על השרת, ועדיין לספק עדכונים בזמן אמת.
התכונות שבשימוש:
break-up-long-tasks
כדאי לפצל עיבוד סינכרוני כבד (חישובים מורכבים או לולאות ארוכות) או עדכוני DOM, כדי לאפשר לדפדפן לטפל בקלט של המשתמשים ולצבוע מחדש את המסך.
התכונות שבשימוש:
calculate-total-foreground-time
חישוב הזמן הכולל שמשתמש הקדיש לצפייה בדף, לא כולל תקופות שבהן הכרטיסייה הייתה ברקע.
התכונות שבשימוש:
conditional-async-dependencies
טעינה או הפעלה של תלות אסינכרונית (כמו ייבוא של polyfills לתכונות חסרות באתר) באופן מותנה, בלי שיהיה צורך בתיאום מורכב בין כל התלויות של סקריפט בדף.
התכונות שבשימוש:
defer-rendering-heavy-content
כדי לצמצם את זמני הרינדור בדפי אינטרנט עם הרבה תוכן (למשל, דפים עם פידים ארוכים, הרבה מאמרים או לוחות בקרה מורכבים), כדאי לדחות את הרינדור של כל תוכן שלא מוצג למשתמש באופן מיידי.
התכונות שבשימוש:
defer-work-until-scroll-ends
כדי לשמור על ביצועים חלקים של הגלילה, כדאי לדחות פעולות שדורשות הרבה משאבים, כמו עדכוני DOM, אחזור נתונים, מעקב אחרי נתונים ב-Analytics או חישוב מחדש של הפריסה, עד לסיום הגלילה.
התכונות שבשימוש:
deprioritize-background-fetches
הורדת סדרי העדיפויות של אחזור נתונים ברקע שמתבצע באמצעות Fetch API, כדי למנוע התנגשות ברשת עם בקשות שהמשתמש יזם.
התכונות שבשימוש:
detect-initial-visibility-state
לקבוע בצורה מהימנה אם דף נטען בהתחלה ברקע, גם במקרים שבהם הסקריפט נטען באופן אסינכרוני אחרי שהמשתמש העביר את הדף לחזית.
התכונות שבשימוש:
efficient-background-processing
כדי לחסוך במשאבי המערכת ובחיי הסוללה, אפשר להשהות את ההפעלה של JavaScript ברקע (למשל, <canvas> אנימציות, עיבוד WebGL או סקר נתונים של WebSocket בתדירות גבוהה) כשהרכיב לא מוצג במסך, ואז להפעיל אותם מחדש בדיוק בזמן שהם חוזרים לתצוגה.
התכונות שבשימוש:
faster-spa-view-transitions
הפעלת מעברים מהירים יותר בחזרה לתצוגות שביקרתם בהן בעבר באפליקציית דף יחיד (SPA) על ידי שמירה על מצב ה-DOM המבני שלהן במקום להרוס ולבנות אותן מחדש בכל ניווט.
התכונות שבשימוש:
full-session-analytics
מעקב מהימן אחרי נתוני ניתוח, שגיאות וטלמטריה במהלך הביקור של המשתמש בדף, ודחיית שליחת הנתונים עד שהמשתמש עוזב את הדף.
התכונות שבשימוש:
identify-heavy-scripts
זיהוי הסקריפטים שהכי אחראים למסגרות ארוכות של אנימציה
התכונות שבשימוש:
identify-inp-causes
זיהוי קוד JavaScript שפועל לאט ומשפיע על מדד INP
התכונות שבשימוש:
improve-next-page-load-performance
כדי לשפר את ביצועי טעינת הדף, אפשר לבצע אחזור מראש או עיבוד מראש של דפים שהמשתמש צפוי לבקר בהם בהמשך.
התכונות שבשימוש:
interactions-in-complex-layouts
כדי לשפר את מהירות התגובה לאינטראקציות (להקטין את הציון של מהירות התגובה לאינטראקציה באתר (INP)), כדאי להימנע מחישובים מחדש של פריסות בפריסות מורכבות, כמו לוחות בקרה עם הרבה נתונים או רשתות בסגנון גיליון אלקטרוני.
התכונות שבשימוש:
optimize-image-priority
כדי לצמצם את העיכובים בטעינת משאבים קריטיים, כדאי לשפר את סדר העדיפויות של טעינת תמונות שמועמדות להיות ה-LCP, ולהוריד את סדר העדיפויות של תמונות לא קריטיות.
התכונות שבשימוש:
optimize-preload-priority
כדאי לבצע אופטימיזציה של העדיפות היחסית של תוכן שנטען מראש כדי לצמצם את העיכובים בטעינת משאבים קריטיים.
התכונות שבשימוש:
optimize-script-priority
כדי לשפר את הרצף ולקצר את העיכובים, כדאי לשפר את סדר העדיפויות של טעינת הסקריפטים. לשם כך, מומלץ להגדיל את העדיפות של סקריפטים אסינכרוניים קריטיים ולהקטין את העדיפות של סקריפטים לא חיוניים או סקריפטים שמופיעים מאוחר יותר בתג body.
התכונות שבשימוש:
resolution-optimized-pseudo-elements
כדי לצמצם את מספר צומתי ה-DOM, כדאי להשתמש בתמונות שעברו אופטימיזציה לרזולוציה בפסאודו-אלמנטים של CSS (כמו ::before ו-::after).
התכונות שבשימוש:
schedule-tasks-by-priority
כדאי לתזמן משימות עם עדיפויות שונות כדי לוודא שהעבודה החשובה ביותר תתבצע קודם, ושעבודה ברקע תידחה.
התכונות שבשימוש:
sequence-distributed-events
רישום ביומן ומעקב אחר רצף פעולות במיקרו-שירותים מבוזרים או בסביבות מעקב עם תפוקה גבוהה, באמצעות הקלטת חותמות זמן ברזולוציה של ננו-שנייה.
התכונות שבשימוש:
user-experience
adapt-scrollbar-to-contrast-preferences
שיפור הנראות של סרגל הגלילה למשתמשים שמעדיפים ממשקים עם ניגודיות גבוהה
התכונות שבשימוש:
anchor-positioning-tab-underline
מעבר חלק של רכיב בין שני מיקומי רכיבי יעד. לדוגמה, העברת הקו התחתון של הכרטיסייה שנבחרה בין הכרטיסייה שנבחרה קודם לבין הכרטיסייה שנבחרה כרגע.
התכונות שבשימוש:
animate-element-entry-exit
הסתרה או הצגה של רכיבים בצורה חלקה כשמוסיפים או מסירים אותם מ-DOM, או כשמחליפים את ערכי התצוגה שלהם.
התכונות שבשימוש:
animate-to-from-top-layer
הנפשת רכיבים כמו תיבות דו-שיח, חלונות קופצים ותיאורי כלים כשהם נכנסים לשכבה העליונה או יוצאים ממנה.
התכונות שבשימוש:
animate-to-intrinsic-sizes
אנימציה חלקה של רכיבים אינטראקטיביים (כמו אקורדיונים, תפריטים וכרטיסים מתרחבים) אל המימדים הטבעיים שלהם וממנה.
התכונות שבשימוש:
apply-webgl-shaders
הוספת אפקטים חזותיים מותאמים אישית באמצעות הצללות WebGL לתוכן HTML.
התכונות שבשימוש:
calculate-event-differentials
חישוב משך הזמן והזמן שנותר בין תאריכים ושעות.
התכונות שבשימוש:
calculate-with-intrinsic-sizes
חישוב הגודל של רכיב על סמך הגודל המובנה שלו, תוך הקפדה על התאמה למגבלות עיצוביות נתונות.
התכונות שבשימוש:
capture-location-agnostic-data
תיעוד נתונים כרונולוגיים שלא אמורים להשתנות בהתאם למיקום המשתמש, כמו תאריכי לידה, אזעקות חוזרות או חגים לאומיים.
התכונות שבשימוש:
carousel-slide-effects
יוצרים קרוסלה של שקפים עם תמונות או רכיבים ויזואליים אחרים, שבה כל שקף מונפש כשהוא נכנס לגלולן, מגיע למרכז או יוצא ממנו. לדוגמה, השקפים יכולים להיכנס או לצאת בהדרגה, להסתובב, לגדול או לקטון וכו'.
התכונות שבשימוש:
carousel-snap-highlights
הדגשה חזותית של הפריט הנוכחי שמוצמד במאגרי תמונות, בקרוסלות או בממשקי החלקה במסך מלא שאי אפשר לקיים איתם אינטראקציה. לדוגמה, הרחבת כרטיס כשהוא מוצמד, או חשיפת תוכן מוסתר.
התכונות שבשימוש:
child-state-based-styling
ליצור רכיב שמשנה את הסגנון שלו בהתאם למצב של אחד מרכיבי הצאצא שלו. לדוגמה, רכיב שמוצג במצב בהיר או כהה בהתאם לסימון (או לאי-סימון) של מתג העיצוב.
התכונות שבשימוש:
complex-shapes
אפשר לחתוך רכיבים ואת התוכן שלהם לצורה חופשית, כמו סמל, משיכת מכחול או טקסטורה אורגנית, כדי ליצור עיצובים יותר מיוחדים.
התכונות שבשימוש:
component-specific-light-dark-theme
להגדיר שרכיבים מסוימים יהיו במצב בהיר או במצב כהה (למשל, בלוקים של קוד, נגני מדיה וכו') בלי קשר לסכמת הצבעים של הדף.
התכונות שבשימוש:
consistent-cross-document-transitions
חשוב לוודא שהמצב הקריטי של הדף נטען ויציב לפני שמתחילים מעבר בין תצוגות של מסמכים שונים. כלומר, סגנונות CSS קריטיים נטענים ומיושמים, קוד JavaScript קריטי נטען ומופעל, וקוד ה-HTML שגלוי בתצוגה הראשונית של הדף למשתמש עבר ניתוח לפני שהמעבר מופעל.
התכונות שבשימוש:
content-based-styling
ליצור רכיב שמשנה את הפריסה שלו בהתאם לכך שהוא מכיל רכיבי צאצא ספציפיים (או לא). לדוגמה, אם הרכיב מכיל תמונה, צריך להשתמש בפריסה מרובת עמודות, אחרת ברירת המחדל היא פריסה של עמודה אחת.
התכונות שבשימוש:
coordinate-global-events
כדי ששעות האירועים יישארו מדויקות בלי קשר למעברים לשעון קיץ (DST), לשעות ש"דילגו" עליהן או ש "חזרו" על עצמן במהלך שינויים בשעון, כדאי לתזמן פגישות או אירועים עתידיים על ידי שיוך מפורש שלהם לאזור זמן גיאוגרפי של IANA.
התכונות שבשימוש:
cross-document-transitions
ליצור מעברים חלקים בין ניווטים במסך מלא, כמו מעברים הדרגתיים, אפקטים מותאמים אישית של חשיפה או שינוי צורה של תוכן מדף אחד לדף הבא.
התכונות שבשימוש:
customize-scrollbar-color-and-thickness
התאמה אישית של הצבע או העובי של סרגל הגלילה
התכונות שבשימוש:
dark-mode
הטמעת תמיכה במצב כהה באופן שמכבד את העדפת המשתמש לגבי עיצוב בהיר או כהה, ומתאים את ממשק המשתמש של הדפדפן (למשל, פסי גלילה, אמצעי בקרה של טפסים וכו')
התכונות שבשימוש:
declarative-button-actions
אפשר לחבר כפתור לכל רכיב באופן הצהרתי כדי להפעיל פעולות בהתאמה אישית שספציפיות לאפליקציה, באמצעות פקודות הצהרתיות של כפתורים, פקודות הפעלה, פקודות כפתורים, פקודות בהתאמה אישית או פעולות הצהרתיות של מתגים.
התכונות שבשימוש:
declarative-dialog-popover-control
אפשר לשנות את מצב החשיפה של תיבת דו-שיח או של חלון קופץ מכפתור בלי לכתוב JavaScript.
התכונות שבשימוש:
deliver-optimized-decorative-images
כדי לספק תמונות דקורטיביות שעברו אופטימיזציה (כמו רקעים, סמלי ממשק משתמש או מסכות מורכבות), כדאי לספק בו-זמנית פורמטים של תמונות מהדור הבא (כמו AVIF או WebP) לצד צפיפויות פיקסלים שונות (כמו 1x ו-2x), כדי שהדפדפן יוכל לנהל משא ומתן באופן דינמי על השילוב הטוב ביותר בין גודל הקובץ לאיכות הוויזואלית בהתאם ליכולות המכשיר של המשתמש.
התכונות שבשימוש:
design-token-reactivity
הגדירו טוקנים עיצוביים מסדר גבוה יותר, כמו מצבי צפיפות (קומפקטי, נוח, מרווח) או ערכות נושא, וגרמו לרכיבי צאצא להגיב לשינויים באופן ישיר ובאופן שמתאים לרכיב.
התכונות שבשימוש:
directional-navigation-transitions
הנפשת שינויים במצב חזותי כדי לשקף את כיוון זרימת הניווט של המשתמש, כמו החלקת תוכן חדש מימין כשמתקדמים קדימה או משמאל כשחוזרים למסך הקודם.
התכונות שבשימוש:
dynamic-sibling-animations
אפשר להגדיר שהאנימציה או המעבר יתחילו בזמנים שונים ברכיבים סמוכים, כך שכל אחד מהם יתחיל אחרי השהיה מחושבת על סמך המיקום שלו ברשימת הרכיבים הסמוכים.
התכונות שבשימוש:
dynamic-sibling-styling
ליצור ספקטרום חזותי דינמי או פריסות שמותאמות אוטומטית למספר הרכיבים בקבוצה.
התכונות שבשימוש:
export-html-media-from-canvas
לכידה וייצוא של תוכן HTML דינמי כתמונות או כפריים של סרטון מתוך Canvas.
התכונות שבשימוש:
expose-canvas-content-to-browser-features
חשיפת תוכן שעבר רינדור בקנבס לתכונות של הדפדפן, כמו טכנולוגיות מסייעות, תרגום או מצב קריאה.
התכונות שבשימוש:
flicker-free-client-side-ab-testing
הצגה ועיבוד של בדיקות A/B, בדיקות רב-משתנים או ניסויים אחרים באמצעות JavaScript בצד הלקוח, כדי לשנות או להוסיף HTML, CSS ו-JavaScript בלי שהתוכן המקורי יוצג קודם לפני שהוא מהבהב או מופיע לרגע ואז מוחלף בתוכן הניסוי.
התכונות שבשימוש:
fluid-scaling
שינוי קנה מידה של פריטים כמו גודל גופן, ריווח וגדלים של מדיה בצורה חלקה על סמך הגודל של מאגר האב, במקום להשתמש בנקודות עצירה קבועות
התכונות שבשימוש:
format-human-readable-durations
הציגו למשתמשים את הזמן שחלף או את משכי הזמן בפורמט קריא ומותאם לשפה המקומית, עם אפשרות להציג פירוט של יחידות (למשל, "שעה ו-30 דקות") או ספירה של יחידות (למשל, "90 דקות"), בהתאם להקשר.
התכונות שבשימוש:
group-element-transitions
העברה של קבוצת רכיבים דומים בו-זמנית באמצעות אותה לוגיקת מעבר, כמו הסרה של מוצר מעגלת קניות והנפשה של כל המוצרים האחרים למיקומים החדשים שלהם.
התכונות שבשימוש:
improve-text-layout-and-legibility
כדי לשפר את הפריסה והקריאוּת של תוכן טקסט קצר ועצמאי, כמו כותרות באורך של כמה שורות לכל היותר, אפשר להפעיל את האפשרות לדפדפן להוסיף מעברי שורה מאוזנים באופן שווה כשמבצעים גלישת טקסט.
התכונות שבשימוש:
individual-transform-properties
הנפשה או החלפה של מאפייני טרנספורמציה ספציפיים של CSS (למשל translate, rotate, scale) באופן עצמאי ממאפייני טרנספורמציה אחרים ברכיב יחיד.
התכונות שבשימוש:
interactive-content-in-3d-scenes
שילוב של רכיבי HTML אינטראקטיביים בסצנת תלת-ממד.
התכונות שבשימוש:
interactive-content-reveal
ליצור אפקטים אינטראקטיביים של חשיפה, כמו זרקור שעוקב אחרי מצביע העכבר של המשתמש כדי לחשוף פרטים בתוך תמונה או קטע בממשק המשתמש.
התכונות שבשימוש:
interest-triggered-action-previews
להציג תצוגה מקדימה בזמן אמת של ההשפעה של לחצן כשמשתמש מסמן התעניינות (למשל, מעביר את הסמן מעל הלחצן, מתמקד בו או לוחץ עליו לחיצה ארוכה), אבל לפני שהוא לוחץ עליו.
התכונות שבשימוש:
interest-triggered-tooltips
הצגת הסבר קצר או מידע נוסף כשמשתמשים מעבירים את העכבר מעל אלמנט אינטראקטיבי, מתמקדים בו או לוחצים עליו לחיצה ארוכה, בלי שהם יצטרכו ללחוץ עליו.
התכונות שבשימוש:
light-dismiss-a-dialog
יצירת תיבת דו-שיח של חלון עזר שאפשר לסגור באמצעות סגירה קלה (כלומר, לחיצה או הקשה מחוץ לתיבת הדו-שיח)
התכונות שבשימוש:
manage-recurring-intervals
חישוב אוטומטי של מרווחי זמן חוזרים לחיובים של מינויים או למחזורי שכר, עם התאמות אוטומטיות למקרים מיוחדים כמו מעברים בין חודשים (למשל, הוספת חודש ל-31 בינואר) כדי להבטיח חישובים מדויקים של תקופות.
התכונות שבשימוש:
model-partial-time-concepts
הגדרת מודל של מושגי תאריך ושעה שחסר בהם באופן מובנה רכיב סטנדרטי (כמו שנה, יום או תאריך ספציפיים) בלי להשתמש בערכים שרירותיים של placeholder שגורמים לשגיאות בחישוב.
התכונות שבשימוש:
move-dom-element-without-losing-state
העברה או שינוי של רכיב DOM בלי לאבד את המצב החשוב של הרכיב, כמו מצבי אינטראקטיביות (:focus/:active), <iframe> מצב טעינה, מצב אנימציה/מעבר וכו'
התכונות שבשימוש:
navigation-drawer
יוצרים רכיב של חלונית הזזה לניווט, שכאשר מפעילים אותו באמצעות לחצן תפריט, הוא נכנס בהחלקה מהצד ומוצג כשכבת-על מעל התוכן הקיים בדף, ויוצא בהחלקה כשסוגרים אותו (בהחלקה, בלחיצה מחוץ לחלונית או בלחיצה על Esc).
התכונות שבשימוש:
inertintersection-observerpopoverregistered-custom-propertiesscroll-driven-animationsscroll-initial-targetscroll-snap
overflow-clipping-control
אפשר לשנות את גבול הגזירה הגלוי של רכיב כך שיתאים לקצה התוכן, לקצה הריווח הפנימי או לקצה הגבול – או להיסט שצוין מכל אחד מהם – וכך לשלוט בצורה מדויקת יותר באופן הגזירה של התוכן.
התכונות שבשימוש:
parallax-scroll-effects
יצירת אפקטים מבוססי גלילה (כמו פרלקסה) שבהם השכבות הקדמיות והאחוריות זזות במהירויות שונות, וכך נוצר תחושת עומק בזמן שהמשתמש גולל.
התכונות שבשימוש:
persistent-app-tours
יצירת מדריכים קבועים למשתמשים חדשים באמצעות שכבות-על מקומיות מקושרות שנשארות פתוחות במהלך האינטראקציה של המשתמש.
התכונות שבשימוש:
persistent-toast-notifications
יצירת התראות קופצות והתראות בשכבת-על שלא מפריעות למשתמשים, כדי להציג הודעות ועדכוני סטטוס באופן קבוע.
התכונות שבשימוש:
persistent-top-layer-ui
שומרים על חלון דיאלוג מודאלי, רכיב במסך מלא או חלון קופץ מקורי פתוחים ופעילים מבחינה פונקציונלית, כשצומת ה-DOM הבסיסי שלהם מועבר או משנה הורה ב-DOM.
התכונות שבשימוש:
physics-based-easing
ליצור אנימציה מותאמת אישית ואפקטים של מעברים שמבוססים על פיזיקה, כמו קפיצה וקפיץ, שמרגישים טבעיים ומושכים יותר מאשר עקומות האצה והאטה מסורתיות.
התכונות שבשימוש:
platform-controls-dismiss-dialog
יצירת תיבת דו-שיח מודאלית שאפשר לסגור באמצעות פעולות משתמש רגילות שספציפיות לפלטפורמה, כמו לחיצה על המקש Esc בפלטפורמות למחשב, או תנועת החלקה 'חזרה' או 'ביטול' בפלטפורמות לנייד
התכונות שבשימוש:
position-aware-tooltips
אפשר ליצור תיאורי כלים וחלונות קופצים עם חיצים מכוונים (או סגנון ויזואלי אחר) שמצביעים אוטומטית לכיוון הנכון כשהאלמנט מתהפך למיקום חלופי.
התכונות שבשימוש:
precise-text-alignment
השגת יישור אנכי מדויק עם טקסט בכל גופן. לדוגמה, ריווח חזותי שווה בדיוק מעל ומתחת לטקסט, או יישור מושלם של הטקסט עם סמלים או תמונות סמוכים.
התכונות שבשימוש:
prevent-text-wrapping
מוודאים שהדפדפן לא מוסיף מעברי שורה לטקסט ושהטקסט יכול לחרוג מהגבולות של הקונטיינר שלו.
התכונות שבשימוש:
pull-to-reveal
כדאי ליצור תכונה של משיכה לחשיפה, שתאפשר למשתמש למשוך את המסך כלפי מטה כדי לחשוף תוכן נוסף, כמו סרגל חיפוש.
התכונות שבשימוש:
reduce-style-repetition
כדי לצמצם חזרה מוגזמת על סגנונות, כדאי להשתמש בפונקציות שאפשר לעשות בהן שימוש חוזר (למשל, פונקציה שמחשבת מעבר צבעים על סמך קבוצה של פרמטרים של קלט).
התכונות שבשימוש:
resilient-context-menus-and-nested-dropdowns
ליצור תפריטים, תיאורי כלים, תפריטים נפתחים או שכבות-על הקשריות שנגישים ורספונסיביים, שצריכים להיות קשורים לרכיבי ממשק משתמש ספציפיים. כך מובטח ששכבת-העל תמקם את עצמה מחדש באופן אוטומטי (למשל, תהפוך את הצירים) כשהיא מגיעה לקצוות של אזור התצוגה, כדי שהיא אף פעם לא תיחתך.
התכונות שבשימוש:
same-document-transitions
אפשר ליצור קשר חזותי בין רכיבים קבועים במצבים שונים של דף או במעברים שונים באפליקציית דף יחיד (SPA) (לדוגמה, הרחבת תמונה ממוזערת של מוצר לתמונת גיבור בגודל מלא) על ידי שינוי חלק של הגודל, המיקום או מאפייני סגנון אחרים.
התכונות שבשימוש:
scroll-entry-exit-effects
ליצור אפקטים של הופעה הדרגתית, הגדלה או אפקטים מורכבים אחרים של חשיפה של רכיבים כשהם נכנסים ל-scrollport (או לאזור התצוגה) ויוצאים ממנו בזמן שהמשתמש גולל.
התכונות שבשימוש:
scroll-position-aware-elements
ליצור לחצנים או ווידג'טים צפים (חזרה לראש הדף, גלילה לתחתית הדף, הפעלת צ'אט וכו') שמופיעים ונעלמים בהתאם לכך שהמשתמש גלל או לא.
התכונות שבשימוש:
scroll-progress-indicator
ליצור סרגל התקדמות גלילה, כלי מעקב אחר התקדמות בשלבים או כל אמצעי ויזואלי אחר שמראה למשתמש כמה הוא התקדם בדף או בקטע.
התכונות שבשימוש:
scroll-snap-realtime-feedback
לספק משוב חזותי בזמן אמת ברכיבי ממשק משתמש מקושרים בזמן שמשתמש גולל תוכן שמוצמד לנקודות עצירה, לפני שהשלים את תנועת הגלילה.
התכונות שבשימוש:
scroll-snap-state-sync
סנכרון של אינדיקטורים לניווט, חלוניות תוכן מקושרות ומעקב אחר ניתוח נתונים עם הפריט המוצמד באופן פעיל במאגר שניתן לגלול בו.
התכונות שבשימוש:
scroll-target-on-load
ליצור רשימה של רכיבים שאפשר לגלול בהם (לדוגמה, קרוסלה של תמונות או שרשור של שיחה בצ'אט) שאפשר להציג בהם רכיב מסוים שמוצג אחרי גלילה בתצוגה הראשונית.
התכונות שבשימוש:
scrollability-affordance-hints
ליצור שכבות-על של צללים בגלילה, מעברי צבע או חצים שמציינים כיוון ומופיעים רק כשיש עוד תוכן לגלילה בכיוון הזה.
התכונות שבשימוש:
scrollytelling
הנפשה של מאפיינים חזותיים באלמנט יעד – כמו הוספת אפקט דהייה לרקע, שינוי צבע הרקע או יצירת חוויות של סיפורים שמתגללים – שמופעלת לגמרי על ידי מיקום אזור הגלילה של אלמנט שונה לחלוטין.
התכונות שבשימוש:
search-hidden-content
הסתרת תוכן באמצעות תבניות כמו תפריטי אקורדיון, כרטיסיות וקטעים עם האפשרות 'קראו עוד', תוך הקפדה על כך שהטקסט המוסתר יוצג במהלך חיפושים מותאמים של 'חיפוש בדף', מאפשרת יצירת אינדקס של מנועי חיפוש, תומכת בקישורים עמוקים של פרגמנט URL ושומרת על נגישות ARIA.
התכונות שבשימוש:
shaped-cutouts
אפשר לשלב כמה צורות כדי ליצור חיתוכים מורכבים או אפקטים של 'הסרת חלקים' באלמנטים, למשל הוספת חריץ לאלמנט.
התכונות שבשימוש:
shrinking-header-on-scroll
אנימציה חלקה של כותרת קבועה או של שער של דף שלם בגלילה, כדי להקטין אותה באופן דינמי, להוסיף לה צללים ולשנות את הפריסה שלה לאורך מרחק גלילה מוגדר מראש.
התכונות שבשימוש:
size-aware-styling
ליצור רכיב שהסגנונות שלו יכולים להיות תלויים באופן מותנה ברוחב או בגובה שלו, ולא ברוחב או בגובה של אזור התצוגה. לדוגמה, רכיב כרטיס שיכול לשנות את הפריסות שלו בהתאם לגודל שלו, או לחצן קריאה לפעולה שיכול להציג טקסט עזרה באופן מותנה בהתאם לרוחב שלו.
התכונות שבשימוש:
soft-edge-content-fade
החלת מעבר הדרגתי של שקיפות על קצוות התוכן כדי לציין אזורים נוספים שאפשר לגלול בהם או כדי להסתיר טקסט שזמין רק לאחר תשלום.
התכונות שבשימוש:
stabilize-reactive-state
ניהול תאריכי יעד או לוחות זמנים של משימות בתצוגות מבוססות-נתונים, ללא תופעות לוואי לא צפויות ממצב משותף שניתן לשינוי.
התכונות שבשימוש:
stack-drill-down
אפשר ליצור ניווט היררכי במסך מלא שמאפשר למשתמשים להגיע לתצוגות מקוננות ולהחליק או לנווט חזרה כדי לחזור, עם היסטוריית גלישה שמתעדכנת באופן אוטומטי.
התכונות שבשימוש:
style-parent-with-has
עיצוב רכיבי הורה של שדה טופס (למשל תוויות או fieldsets) כשהשדה לא תקין.
התכונות שבשימוש:
support-global-calendar-systems
הצגה וחישוב של תאריכים במערכות יומנים שאינן גרגוריאניות (למשל, מוסלמיות, עבריות או סיניות) בצורה מדויקת למשתמשים בינלאומיים.
התכונות שבשימוש:
swipe-to-remove
אפשר למשתמשים לבצע פעולות על פריטים ברשימה (הסרה, העברה לארכיון, סימון כפריט שנקרא וכו') באמצעות תנועת החלקה אופקית, כדי שהם יוכלו לעבד רשומות במהירות בלי להקיש על אמצעי בקרה נפרד.
התכונות שבשימוש:
scroll-snapscroll-initial-targetoverscroll-behaviorscrollbar-widthintersection-observermutationobserverresize-observerweb-animations
visually-stable-font-fallbacks
הגדרת סגנונות גופן כך שהטקסט יישאר קריא ועקבי מבחינה ויזואלית במקרה של החלפה בין הגופן המועדף לבין אחד מגופני הגיבוי (או להפך).
התכונות שבשימוש:
visually-stable-mixed-fonts
הגדרת סגנונות גופן כך שהטקסט יישאר קריא ועקבי מבחינה ויזואלית במצבים שבהם נעשה שימוש בכמה גופנים לעיבוד של בלוק טקסט יחיד.
התכונות שבשימוש:
visually-texture-content
החלת בליה ריאליסטית ודפוסי טקסטורה על רכיבים כדי לתת להם מראה של חומר אורגני, ישן או פיזי.
התכונות שבשימוש:
webmcp
agentic-forms
אפשר לחשוף פונקציונליות בצד הלקוח ככלים לסוכני AI על ידי הוספת אנוטציות לטפסים רגילים של HTML עם מאפיינים של WebMCP.
התכונות שבשימוש:
agentic-javascript-tools
אפשר לרשום פונקציות JavaScript בצד הלקוח ככלים לסוכני AI באופן פרוגרמטי באמצעות WebMCP Imperative API.
התכונות שבשימוש: