פונקציות טריגונומטריות

הוספנו ל-Chrome 111 תמיכה בפונקציות הטריגונומטריות sin(), cos(), tan(), asin(), acos(), atan() ו-atan2(), ועכשיו הן זמינות בכל המנועים העיקריים. הפונקציות האלה שימושיות מאוד למטרות אנימציה ופריסה. לדוגמה, עכשיו הרבה יותר קל לפרוס אלמנטים על מעגל סביב מרכז נבחר.

מידע נוסף על הפונקציות הטריגונומטריות ב-CSS.

בחירה מורכבת מסוג nth-*

באמצעות הבורר של 'סיווג פסאודו-סיווג' :nth-child() אפשר לבחור רכיבים ב-DOM לפי האינדקס שלהם. אם משתמשים במיקרו-תחביר של An+B, מקבלים שליטה מדויקת על הרכיבים שרוצים לבחור.

כברירת מחדל, פסאודואים של :nth-*() מביאים בחשבון את כל רכיבי הצאצא. החל מגרסה 111 של Chrome, ניתן להעביר רשימת סלקטורים אל :nth-child() ו-:nth-last-child(). כך אפשר לסנן מראש את רשימת הילדים לפני שAn+B עושה את מה שרוצים.

בהדגמה הבאה, הלוגיקה של 3n+1 מיושמת רק בבובות הקטנות על ידי סינון מראש שלהן באמצעות of .small. משתמשים בתפריטים הנפתחים כדי לשנות באופן דינמי את הבורר שבו משתמשים.

מידע נוסף על בחירות nth-* מורכבות

היקף

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

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

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

כללי סגנון שמוצבים בתוך בלוק היקף יטרגטו רק לרכיבים שבתוך עץ המשנה שנחצב. לדוגמה, כלל הסגנון הבא מטרגט רק לרכיבים מסוג <img> שנמצאים בין רכיב .card לכל רכיב בתוך רכיב שתואם לבורר [data-component].

@scope (.card) to ([data-component]) {
  img { … }
}

בהדגמה הבאה, אין התאמה לרכיבי <img> ברכיב הקרוסלה בגלל מגבלת ההיקף שהוחלה.

צילום מסך של הדגמה של היקף ההרשאות

הדגמה בזמן אמת בהיקף

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

קינון

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

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

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

מידע נוסף על סידור פנימי.

רשת משנה

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

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

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

אות ראשונה

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

צילום מסך של אות ראשונה

הדגמה (דמו) של אות ראשונה

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

גלישת טקסט: איזון ויפה

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

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

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

מרחבי צבע באיכות HD (רמת צבע 4)

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

שירות CSS וצבע יכולים עכשיו: - לבדוק אם חומרת המסך של המשתמשים מסוגלת לספק צבעי HDR מגוונים. - בדוק אם הדפדפן של המשתמש מבין את תחביר הצבעים, כמו Oklch או Display P3. - אפשרות לציין צבעי HDR ב-Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ ועוד. - יצירת הדרגות צבעים באמצעות צבעי HDR, - שילוב צבעים הדרגתיים במרחבי צבעים חלופיים. - שילוב צבעים עם color-mix(). - יצירת וריאציות צבע עם תחביר צבעים יחסי.

מידע נוסף על צבע 4 ומרחבי צבעים

פונקציית color-mix

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

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

מידע נוסף על color-mix().

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

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

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

למידע נוסף על תחביר צבעים יחסי

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

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

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

מידע נוסף על השימוש בשאילתות של קונטיינרים

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

שאילתות הסגנון הובילו להטמעה חלקית ב-Chrome 111. כרגע, אפשר להשתמש בשאילתות סגנון כדי להריץ שאילתות על הערך של מאפיינים מותאמים אישית ברכיב הורה כשמשתמשים ב-@container style(). לדוגמה, אפשר להריץ שאילתה אם קיים ערך של מאפיין מותאם אישית, או שמוגדר לו ערך מסוים, כמו @container style(--rain: true).

צילום מסך של שאילתת הסגנון

הדגמה של שאילתת סגנון

השימוש הזה נשמע דומה לשימוש בשמות מחלקות ב-CSS, אבל לשאילתות סגנון יש כמה יתרונות. הדרך הראשונה היא שבאמצעות שאילתות סגנון, אפשר לעדכן את הערך ב-CSS לפי הצורך למצבי פסאודו. בנוסף, בגרסאות עתידיות של ההטמעה, תוכלו להריץ שאילתות על טווחי ערכים כדי לקבוע את הסגנון שיוחל, כמו style(60 <= --weather <= 70), והסגנון על סמך צמדי 'נכס-ערך' כמו style(font-style: italic).

מידע נוסף על השימוש בשאילתות סגנון.

בורר:has()

במשך כמעט 20 שנה, מפתחים ביקשו 'סלקטור הורה' ב-CSS. הבורר :has() שנשלח ב-Chrome בגרסה 105 אפשרי עכשיו. לדוגמה, אם משתמשים ב-.card:has(img.hero), המערכת בוחרת את רכיבי .card שלילד או הילדה יש תמונה ראשית.

:has() צילום מסך של הדגמה

:has() הדגמה חיה

בגלל שהארגומנט :has() מקבל רשימת בורר יחסית כארגומנט, אפשר לבחור הרבה יותר מהאלמנט ההורה. באמצעות שילובי CSS שונים, ניתן לא רק לעלות על עץ ה-DOM, אלא גם לבצע בחירות בכיוון ההפוך. לדוגמה, מערכת li:has(+ li:hover) תבחר את הרכיב <li> שקודם לרכיב <li> שמעליו העכבר.

מידע נוסף על הסלקטור :has() ב-CSS

עדכון של שאילתת המדיה

שאילתת המדיה update מאפשרת לך להתאים את ממשק המשתמש לקצב הרענון של המכשיר. התכונה יכולה לדווח על ערך של fast, slow או none שקשור ליכולות של מכשירים שונים.

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

מידע נוסף על @media (עדכון).

שאילתת מדיה של כתיבת סקריפטים

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

כאן מוסבר איך מפעילים ומשביתים JavaScript בדף לצורך בדיקות דרך כלי הפיתוח ל-Chrome.

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

מידע נוסף על script

שאילתת מדיה עם שקיפות מופחתת

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

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

למידע נוסף על @media (prefers-reduced-transparency).

הצגת המעברים

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

הליבה של ה-View Transitions API היא הפונקציה document.startViewTranstion. מעבירים פונקציה שמעדכנת את ה-DOM למצב החדש, וה-API יטפל עבורכם בהכול. לשם כך מתבצעת תמונת מצב של התמונה לפני ואחרי, ולאחר מכן מעבר בין השתיים. שימוש ב-CSS מאפשר לכם לקבוע מה יוקלט, ואם רוצים, להתאים אישית את האופן שבו תמונות המצב יונפשו.

ה-View Migrates API לאפליקציות עם דף יחיד שנשלח ב-Chrome 111. מידע נוסף על הצגת המעברים

פונקציית התאמה לינארית

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

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

מידע נוסף על linear(). כדי ליצור עקומות linear(), צריך להשתמש במחולל התאמה לינארית.

סיום הגלילה

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

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

מידע נוסף על גלילה.

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

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

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

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

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

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

קובץ מצורף של ציר זמן שנדחה

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

כדי לאפשר לאלמנט המונפש למצוא ציר זמן גלילה בעל שם של ישות שאינה הורה, צריך להשתמש במאפיין timeline-scope בהורה משותף. כך ניתן לצרף למרחב המשותף את scroll-timeline או view-timeline המוגדרים בשם הזה. כך, כל ילד או ילדה של הורה משותף יוכלו להשתמש בציר הזמן בשם הזה.

יכול למצוא את scroll-timeline שהוצהר בסרגל הגלילה

מידע נוסף על timeline-scope.

אנימציות נפרדות של נכסים

יכולת חדשה נוספת ב-2023 היא האפשרות ליצור אנימציה של אנימציות נפרדות, כמו יצירת אנימציה מ-display: none וממנה. החל מגרסה 116 של Chrome, ניתן להשתמש בdisplay ובcontent-visibility בכללי תמונות מפתח. ניתן גם להעביר כל נכס נפרד בנקודת ה-50% במקום בנקודת ה-0%. אפשר להשיג את זה באמצעות הנכס transition-behavior באמצעות מילת המפתח allow-discrete, או בנכס transition כקיצור.

מידע נוסף על העברת אנימציות נפרדות.

@starting-style

כלל ה-CSS של @starting-style מסתמך על יכולות אינטרנט חדשות ליצירת אנימציות של display: none וממנו. כלל זה מאפשר להגדיר לרכיב סגנון "לפני פתיחה" שהדפדפן יכול לחפש לפני שהאלמנט פתוח בדף. אפשרות זו שימושית מאוד להזנת אנימציות ולהוספת אנימציות ברכיבים כמו חלון קופץ או תיבת דו-שיח. היא יכולה להיות שימושית גם כשיוצרים רכיב ורוצים לאפשר בו אנימציה. ניקח את הדוגמה הבאה שמציגה אנימציה של מאפיין popover (מידע נוסף בקטע הבא) לתצוגה ולשכבה העליונה בצורה חלקה מחוץ לאזור התצוגה.

למידע נוסף על @starting-style ועל אנימציות נוספות הקשורות להרשמה.

שכבת-על

ניתן להוסיף את מאפיין ה-CSS החדש overlay למעבר שלך כדי לאפשר לרכיבים עם סגנונות בשכבה העליונה – כמו popover ו-dialog – ליצור אנימציה מהשכבה העליונה בצורה חלקה. אם לא מעבירים את שכבת-העל, הרכיב מיד יחזור להיחתך, ישתנה ומכוסה, והמעבר לא יופיע. באופן דומה, overlay מאפשר ל-::backdrop ליצור אנימציה בצורה חלקה כשמוסיפים אותו לרכיב בשכבה העליונה.

מידע נוסף על שכבת-על ואנימציות אחרות ביציאה.

חלון קופץ

ה-API של Popover עוזר לך ליצור רכיבים שמופיעים מעל שאר הדף. המידע הזה יכול לכלול תפריטים, אפשרויות בחירה והסברים קצרים. כדי ליצור חלון קופץ פשוט, מוסיפים את המאפיין popover ואת המאפיין id לרכיב שקופץ, ומחברים את המאפיין id ללחצן הפעלה באמצעות popovertarget="my-popover". Popover API תומך:

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

כללים אופקיים בבחירה

שינוי קטן נוסף ל-HTML שנחתך השנה ב-Chrome וב-Safari, הוא היכולת להוסיף רכיבים של כללים אופקיים (תגים מסוג <hr>) לרכיבי <select> כדי להציג פיצול חזותי של התוכן שלך. בעבר, הוספה של תג <hr> לבחירה לא הייתה גורמת לעיבוד נתונים. עם זאת, השנה, גם Safari וגם Chrome תומכים בתכונה הזו, מה שמאפשר הפרדה טובה יותר בין תוכן בתוך רכיבי <select>.

בחירת צילום מסך

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

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

מחלקות פסאודו חוקיות וחוקיות למשתמש

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

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

למידע נוסף על השימוש ברכיבי פסאודו-אלמנטים לאימות טפסים* של משתמש.

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

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

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

רכיבי <details> שהם חלק מאקורדיון בלעדי לא חייבים להיות אחים. אפשר לפזר אותם בין התמונות במסמך.