שירות CSS ארוז: 2023!
מעבר אל התוכן:
- עיצוב רספונסיבי
- שאילתות על קונטיינרים
- שאילתות סגנון
- :has selector
- עדכון של שאילתת המדיה
- שאילתת מדיה של כתיבת סקריפטים
- שאילתת מדיה בנושא שקיפות
וואו! 2023 הייתה שנה אדירה לשירותי CSS!
מ-#Interop2023 ועד הרבה דפי נחיתה חדשים בתחום של שירותי CSS וממשקי משתמש שמאפשרים למפתחים עם יכולות שפעם חשבו שהם בלתי אפשריים בפלטפורמת האינטרנט. עכשיו כל דפדפן מודרני תומך בשאילתות של מאגר תגים, בתצוגת משנה, בבורר :has()
ובשפע של מרחבי צבע ופונקציות חדשים. יש לנו תמיכה ב-Chrome באנימציות המבוססות על גלילה שמיועדות ל-CSS בלבד, וכן ליצור אנימציה חלקה בין תצוגות אינטרנט באמצעות מעברי תצוגה. בנוסף לכל היתרונות, יש כל כך הרבה תכונות חדשות וחדשניות שהפכו את חוויית המפתחים לטובה יותר, כמו סידור תמונות ב-CSS וסגנונות בהיקף מסוים.
איזו שנה זו הייתה! ולכן אנחנו מסיימים את השנה לציון דרך זו בציון חגיגה והכרה בכל העבודה הקשה של מפתחי דפדפנים וקהילת האינטרנט שאפשרה את כל זה.
יסודות אדריכליים
נתחיל עם עדכונים לגבי השפה והיכולות העיקריות של CSS. אלו תכונות שהן הבסיס לאופן שבו אתם כותבים ומארגנים סגנונות, ומביאים כוח רב לידיים של המפתח.
פונקציות טריגונומטריות
הוספנו ל-Chrome 111 תמיכה בפונקציות הטריגונומטריות sin()
, cos()
, tan()
, asin()
, acos()
, atan()
ו-atan2()
, ועכשיו הן זמינות בכל המנועים העיקריים. הפונקציות האלה שימושיות מאוד למטרות אנימציה ופריסה. לדוגמה, עכשיו הרבה יותר קל לפרוס אלמנטים על מעגל סביב מרכז נבחר.
מידע נוסף על הפונקציות הטריגונומטריות ב-CSS.
בחירה מורכבת מסוג nth-*
תמיכה בדפדפן
- 111
- 111
- 113
- 9
באמצעות הבורר של 'סיווג פסאודו-סיווג' :nth-child()
אפשר לבחור רכיבים ב-DOM לפי האינדקס שלהם. אם משתמשים במיקרו-תחביר של An+B
, מקבלים שליטה מדויקת על הרכיבים שרוצים לבחור.
כברירת מחדל, פסאודואים של :nth-*()
מביאים בחשבון את כל רכיבי הצאצא. החל מגרסה 111 של Chrome, ניתן להעביר רשימת סלקטורים אל :nth-child()
ו-:nth-last-child()
. כך אפשר לסנן מראש את רשימת הילדים לפני שAn+B
עושה את מה שרוצים.
בהדגמה הבאה, הלוגיקה של 3n+1
מיושמת רק בבובות הקטנות על ידי סינון מראש שלהן באמצעות of .small
. משתמשים בתפריטים הנפתחים כדי לשנות באופן דינמי את הבורר שבו משתמשים.
היקף
תמיכה בדפדפן
- 118
- 118
- x
- 17.4
ב-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 */
}
הקלטת מסך ב-Nest
הדגמה בשידור חי ב-Nest
השימוש ב-Nesting יכול להפחית את המשקל של גיליון סגנונות, להפחית את התקורה של סלקטורים חוזרים ולרכז את סגנונות הרכיבים. התחביר בהתחלה שוחרר עם הגבלה שדרשה שימוש ב-&
במקומות שונים, אבל מאז הוסר עם עדכון תחביר רגוע.
מידע נוסף על סידור פנימי.
רשת משנה
CSS subgrid
מאפשר ליצור רשתות מורכבות יותר עם התאמה טובה יותר בין פריסות צאצא. היא מאפשרת לרשת שנמצאת בתוך רשת אחרת לאמץ את השורות והעמודות של הרשת החיצונית כרשת משל עצמה, על ידי שימוש ב-subgrid
כערך של שורות או עמודות ברשת.
הקלטת מסך ברשת משנה
הדגמה בשידור חי של רשת משנה
תת-רשת שימושית במיוחד להתאמת אחים לתוכן דינמי אחד של השני. כך, קופירייטינג, כותבי UX ומתרגמים לא יכולים לנסות ליצור תוכן לפרויקט ש "מתאים" לפריסה. בעזרת רשת משנה, ניתן להתאים את הפריסה לתוכן.
טיפוגרפיה
ב-2023 התבצעו כמה עדכונים חשובים בטיפוגרפיה באינטרנט. שיפור מתקדם נחמד במיוחד הוא המאפיין text-wrap
. המאפיין הזה מאפשר התאמת פריסה טיפוגרפית, שנוצר בדפדפן ללא צורך בסקריפטים נוספים. אין עוד צורך להשתמש באורכי שורות מסורבלים, ולהתחיל טיפוגרפיה צפויה.
אות ראשונה
הנכס initial-letter
, שנחנך בתחילת השנה בגרסה 110 של Chrome, הוא תכונת CSS קטנה אך עוצמתית שמגדירה סגנון למיקום של אותיות ראשונות. אפשר למקם את האותיות במצב ירידה או מוגבה. המאפיין מקבל שני ארגומנטים: הראשון לקביעה של מידת העמוקה של הצבת האות בפסקה המתאימה, והשני לקביעת שיעור העלאת האות מעליה. תוכל אפילו לשלב בין שניהם, כמו בהדגמה הבאה.
צילום מסך של אות ראשונה
הדגמה (דמו) של אות ראשונה
גלישת טקסט: איזון ויפה
כמפתחים, אתם לא יודעים מה הגודל הסופי, גודל הגופן או אפילו השפה של הכותרת או פסקה. כל המשתנים הנדרשים לטיפול יעיל ואסתטי בגלישת טקסט נמצאים בדפדפן. מכיוון שהדפדפן כן מכיר את כל הגורמים, כגון גודל הגופן, השפה והאזור שהוקצה, הוא מתאים במיוחד לטיפול בפריסת טקסט מתקדמת ואיכותית.
כאן מוצגות שתי טכניקות חדשות של גלישת טקסט, האחת balance
והשנייה pretty
. הערך balance
נועד ליצור קטע טקסט הרמוני, ואילו pretty
מנסה למנוע יתומים ולהבטיח שימוש במקפים תקינים. בדרך כלל שתי המשימות האלו בוצעו באופן ידני, וזה מדהים לתת את העבודה לדפדפן כך שתפעל גם בכל שפה מתורגמת.
הקלטת מסך עם גלישת טקסט
הדגמה בשידור חי עם גלישת טקסט
מידע נוסף על גלישת טקסט: יתרה
צבע
2023 הייתה שנת הצבע לפלטפורמת האינטרנט. עם פונקציות ומרחבי צבעים חדשים שמספקים עיצוב צבעים דינמי, אפשר ליצור עיצובים ססגוניים ומלאי חיים גם למשתמשים וגם להתאים אותם אישית.
מרחבי צבע באיכות HD (רמת צבע 4)
מהחומרה ועד לתוכנה, שירות ה-CSS והאורות המהבהבים. נדרשת למחשבים שלנו עבודה רבה כדי לנסות ולייצג צבעים בדיוק כפי שהעיניים האנושיות יכולות לראות. ב-2023 הוספנו צבעים חדשים, יותר צבעים, מרחבי צבעים חדשים, פונקציות צבעים ויכולות חדשות.
שירות CSS וצבע יכולים עכשיו:
- לבדוק אם חומרת המסך של המשתמשים מסוגלת לספק צבעי HDR מגוונים.
- בדוק אם הדפדפן של המשתמש מבין את תחביר הצבעים, כמו Oklch או Display P3.
- אפשרות לציין צבעי HDR ב-Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ ועוד.
- יצירת הדרגות צבעים באמצעות צבעי HDR,
- שילוב צבעים הדרגתיים במרחבי צבעים חלופיים.
- שילוב צבעים עם color-mix()
.
- יצירת וריאציות צבע עם תחביר צבעים יחסי.
הקלטת מסך בצבע 4
הדגמה של צבע 4
פונקציית color-mix
שילוב צבעים הוא משימה קלאסית, ובשנת 2023 גם שירות ה-CSS יכול לעשות זאת. לא רק שילוב של לבן או שחור עם צבע, אלא גם שקיפות. תוכלו לעשות את כל זה בכל מרחב צבעים לבחירתכם. בו-זמנית הוא גם תכונת צבע בסיסית ותכונת צבע מתקדמת.
color-mix() Screencast
הדגמה של color-mix()
אפשר לחשוב על color-mix()
כרגע על זמן הדרגתי. כאשר הדרגה מציגה את כל השלבים הדרושים כדי לעבור מכחול ללבן, ב-color-mix()
מוצג שלב אחד בלבד. העניינים מתחילים להתפתח אחרי שמתחילים לקחת בחשבון מרחבים של צבעים וללמוד עד כמה מרחב הצבעים המעורב יכול להיות שונה מהתוצאות.
מידע נוסף על color-mix().
תחביר צבעים יחסי
תחביר צבע יחסי (RCS) הוא שיטה משלימה ל-color-mix()
ליצירת וריאציות של צבע. הוא קצת יותר חזק מ-color-mix() , אבל גם אסטרטגיה שונה לעבודה עם צבע. color-mix()
עשויה לערבב צבע לבן כדי להבהיר צבע. שירות RCS נותן גישה מדויקת לערוץ הבהירות ואת היכולת להשתמש ב-calc()
בערוץ כדי להפחית או להגביר את הבהירות באופן פרוגרמטי.
הקלטת מסך ב-RCS
הדגמה בזמן אמת של RCS
RCS מאפשר לבצע מניפולציות יחסיות ומוחלטות על צבע. שינוי יחסי הוא שינוי שבו לוקחים את הערך הנוכחי של רוויה או בהירות ומשנים אותו באמצעות calc()
. שינוי מוחלט הוא שינוי שבו מחליפים ערך של ערוץ בערך חדש לגמרי, כמו הגדרת שקיפות של 50%. התחביר הזה מספק כלים משמעותיים לבחירת נושאים, לגרסאות זמן בלבד ועוד.
למידע נוסף על תחביר צבעים יחסי
עיצוב רספונסיבי
העיצוב הרספונסיבי התפתח ב-2023. השנה הפורצת דרך הזו כללה תכונות חדשות ששינו לחלוטין את הדרך שבה אנחנו יוצרים חוויות אינטרנט רספונסיביות. בנוסף, יצרנו מודל חדש של עיצוב רספונסיבי שמבוסס על רכיבים. השילוב של שאילתות קונטיינרים ו-:has()
תומך ברכיבים בעלי סגנון רספונסיבי ולוגי בהתאם לגודל של ההורה שלהם, וגם לנוכחות או למצב של הילדים שלהם. עכשיו אפשר סוף סוף להפריד בין הפריסה ברמת הדף לפריסה ברמת הרכיב, ולכתוב את הלוגיקה פעם אחת כדי להשתמש ברכיב שלכם בכל מקום!
שאילתות לגבי גודל קונטיינרים
במקום להשתמש בפרטי הגודל הגלובלי של אזור התצוגה כדי להחיל סגנונות CSS, שאילתות קונטיינר תומכות בהרצת שאילתות של רכיב הורה בדף. כלומר, אפשר לסגנן רכיבים באופן דינמי בכמה פריסות ובכמה תצוגות. שאילתות קונטיינרים לקביעת גודל התייצבו בכל הדפדפנים המודרניים בוולנטיין דיי השנה (14 בפברואר).
כדי להשתמש בתכונה הזו, קודם צריך להגדיר גבולות לרכיב שלגביו מתבצעת השאילתה, ולאחר מכן, בדומה לשאילתת מדיה, משתמשים ב-@container
עם הפרמטרים של הגודל כדי להחיל את הסגנונות. יחד עם שאילתות קונטיינר, מקבלים גדלים של שאילתות קונטיינר. בהדגמה הבאה, גודל כותרת הכרטיס נעשה באמצעות הגודל של שאילתת הקונטיינר cqi
(המייצג את הגודל של הקונטיינר המוטבע).
@container Screencast
הדגמה של @container
שאילתות על קונטיינרים של סגנונות
שאילתות הסגנון הובילו להטמעה חלקית ב-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() Screencast
הדגמה של :has()
עדכון של שאילתת המדיה
שאילתת המדיה update
מאפשרת לך להתאים את ממשק המשתמש לקצב הרענון של המכשיר. התכונה יכולה לדווח על ערך של fast
, slow
או none
שקשור ליכולות של מכשירים שונים.
סביר להניח שקצב הרענון של רוב המכשירים שתתכננו יהיה מהיר. זה כולל מחשבים שולחניים ורוב המכשירים הניידים. לקוראים אלקטרוניים ולמכשירים כמו מערכות תשלום בעוצמה נמוכה, עשוי להיות קצב רענון איטי. כשאתה יודע שהמכשיר לא יכול לטפל באנימציה או בעדכונים תכופים, תוכל לחסוך בצריכת הסוללה או בהצגת עדכונים שגויים.
עדכון של Screencast
עדכון הדגמה (דמו)
מידע נוסף על @media (עדכון).
שאילתת מדיה של כתיבת סקריפטים
ניתן להשתמש בשאילתת המדיה של הסקריפט כדי לבדוק אם JavaScript זמין או לא. זה נחמד מאוד לשיפור הדרגתי. לפני שאילתת המדיה הזו, האסטרטגיה לזיהוי הזמינות של JavaScript הייתה הוספת מחלקה nojs
ב-HTML והסרה שלה באמצעות JavaScript. אפשר להסיר את הסקריפטים האלה, כי ל-CSS יש עכשיו דרך לזהות JavaScript ולבצע שינויים בהתאם.
כאן מוסבר איך מפעילים ומשביתים JavaScript בדף לצורך בדיקות דרך כלי הפיתוח ל-Chrome.
ביצוע סקריפטים של Screencast
הדגמה של ביצוע סקריפטים
כדאי לשקול להחליף עיצוב באתר. שאילתת המדיה של הסקריפט יכולה לעזור לכם לבצע את המעבר בהתאם להעדפות המערכת, כי אין JavaScript זמין. או לשקול להשתמש ברכיב מתג – אם JavaScript זמין, ניתן להחליק את המתג באמצעות תנועה במקום רק להפעיל או להשבית אותו. אם הסקריפט מושבת, יש הרבה הזדמנויות מעולות לשדרג את חוויית המשתמש ולהבטיח חוויית בסיס משמעותית.
מידע נוסף על script
שאילתת מדיה עם שקיפות מופחתת
ממשקים לא אטומים עלולים לגרום לכאבי ראש או לקשיים ויזואליים מסוגים שונים של ליקויי ראייה. לכן, ב-Windows, ב-macOS וב-iOS יש העדפות מערכת שיכולות לצמצם או להסיר את השקיפות בממשק המשתמש. שאילתת המדיה הזו עבור prefers-reduced-transparency
מתאימה היטב לשאילתות מדיה אחרות שההעדפות של משתמשים בהן, שמאפשרות לך להיות יצירתי וגם להתאים את המודעות למשתמשים.
הקלטת מסך בשקיפות מופחתת
הדגמה של שקיפות מופחתת
במקרים מסוימים אפשר לספק פריסה חלופית שבה אין תוכן שמוצג בשכבת-על לתוכן אחר. במקרים אחרים, ניתן להתאים את שקיפות הצבע כך שתהיה אטומה או כמעט אטומה. בפוסט הבא בבלוג יש גרסאות הדגמה מעוררות יותר השראה שמותאמות להעדפות של המשתמש. אם מסקרן אותך לדעת על המקרים שבהם שאילתת המדיה הזו חשובה, כדאי לבדוק.
למידע נוסף על @media (prefers-reduced-transparency).
אינטראקציה
אינטראקציה היא אבן יסוד בחוויות בדיגיטל. היא עוזרת למשתמשים לקבל משוב על מה הם לחצו ועל המיקום שלהם במרחב הווירטואלי. השנה הציגו הרבה פיצ'רים מגניבים שבזכותם קל יותר לכתוב וליישם אינטראקציות, מה שמאפשר למשתמשים לעבור בצורה חלקה וחוויית שימוש פרטנית יותר באינטרנט.
הצגת המעברים
למעברים בין צפיות יש השפעה עצומה על חוויית המשתמש בדף. בעזרת ה-API של המעברים לצפייה, אתם יכולים ליצור מעברים חזותיים בין שני מצבי דף באפליקציה שלכם בדף יחיד. המעברים האלה יכולים להיות מעברים בין דפים שלמים או פריטים קטנים יותר בדף, כמו הוספה או הסרה של פריט חדש לרשימה.
הליבה של ה-View Transitions API היא הפונקציה document.startViewTranstion
. מעבירים פונקציה שמעדכנת את ה-DOM למצב החדש, וה-API יטפל עבורכם בהכול. לשם כך מתבצעת תמונת מצב של התמונה לפני ואחרי, ולאחר מכן מעבר בין השתיים. שימוש ב-CSS מאפשר לכם לקבוע מה יוקלט, ואם רוצים, להתאים אישית את האופן שבו תמונות המצב יונפשו.
הקלטת מסך של VT
הדגמת VT
ה-View Migrates API לאפליקציות עם דף יחיד שנשלח ב-Chrome 111. מידע נוסף על הצגת המעברים
פונקציית התאמה לינארית
תמיכה בדפדפן
- 113
- 113
- 112
- 17.2
אל תתנו לשם של הפונקציה הזו להטעות אתכם. הפונקציה linear()
(להבדיל ממילת המפתח linear
) מאפשרת ליצור פונקציות התאמה מורכבות בדרך פשוטה, תוך הפסד של דיוק מסוים.
לפני linear()
, שנשלח בגרסה 113 של Chrome, לא הייתה אפשרות ליצור אפקטים של קפיצות או אביב ב-CSS. בעזרת linear()
אפשר לחשב את ההקלות האלה על ידי פישוט שלהן לסדרה של נקודות, ולאחר מכן לבצע אינטרפולציה לינארית בין הנקודות האלה.
הקלטת מסך לינארית
הדגמה של התאמה לינארית
מידע נוסף על linear()
. כדי ליצור עקומות linear()
, צריך להשתמש במחולל התאמה לינארית.
סיום הגלילה
ממשקים רבים כוללים אינטראקציות של גלילה, ולפעמים הממשק צריך לסנכרן מידע שרלוונטי למיקום הגלילה הנוכחי או לאחזר נתונים על סמך המצב הנוכחי. לפני האירוע של scrollend
, היה עליך להשתמש בשיטה לא מדויקת של זמן קצוב לתפוגה, שהייתה עשויה לפעול בזמן שאצבע המשתמש עדיין הייתה על המסך. האירוע scrollend
נוצר עבורך אירוע גלילה מתוזמן בדיוק לפי הצורך. הוא מאפשר להבין אם המשתמש עדיין נמצא באמצע התנועה או לא.
הקלטת מסך בגלילה
הדגמה (דמו) של גלילה
היה חשוב שהדפדפן יהיה בבעלותו מפני ש-JavaScript לא יכול לעקוב אחר נוכחות של אצבעות על המסך במהלך גלילה, המידע פשוט לא זמין. עכשיו אפשר למחוק קטעי קוד של סוף גלילה לא מדויק ולהחליף אותם באירוע ששייך לדפדפן ברמת דיוק גבוהה.
מידע נוסף על גלילה.
אנימציות שמבוססות על גלילה
אנימציות המבוססות על גלילה הן תכונה מרגשת שזמינה ב-Chrome 115. הן מאפשרות להשתמש באנימציית CSS קיימת או באנימציה שנוצרה באמצעות Web Animations API, ומשייכת אותן להיסט הגלילה של גלילה. כשגוללים למעלה ולמטה – או שמאלה וימינה בסרגל הגלילה האופקי, האנימציה המקושרת מחלצת קדימה ואחורה בתגובה ישירה.
באמצעות ScrollTimeline תוכלו לעקוב אחרי ההתקדמות הכוללת של פס גלילה, כמו שאפשר לראות בהדגמה הבאה. כשגוללים לסוף הדף, הטקסט מתגלה דמות אחר תו.
הקלטת מסך SDA
הדגמת SDA
באמצעות ViewTimeline אפשר לעקוב אחרי רכיב כשהוא חוצה את נקודת הגלילה. הדבר דומה לאופן שבו IntersectionObserver עוקב אחר רכיב. בהדגמה הבאה, כל תמונה חושפת את עצמה מהרגע שבו היא נכנסת לחלונית הגלילה ועד שהיא במרכז.
הקלטת מסך להדגמה של SDA
הדגמה חיה של SDA
מכיוון שאנימציות מבוססות-גלילה פועלות עם אנימציות 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 Screencast
הדגמה של @starting-style.
למידע נוסף על @starting-style ועל אנימציות נוספות הקשורות להרשמה.
שכבת-על
ניתן להוסיף את מאפיין ה-CSS החדש overlay
למעבר שלך כדי לאפשר לרכיבים עם סגנונות בשכבה העליונה – כמו popover
ו-dialog
– ליצור אנימציה מהשכבה העליונה בצורה חלקה. אם לא מעבירים את שכבת-העל, הרכיב מיד יחזור להיחתך, ישתנה ומכוסה, והמעבר לא יופיע. באופן דומה, overlay
מאפשר ל-::backdrop
ליצור אנימציה בצורה חלקה כשמוסיפים אותו לרכיב בשכבה העליונה.
הקלטת מסך בשכבת-על
הדגמה בשידור חי של שכבת-על
מידע נוסף על שכבת-על ואנימציות אחרות ביציאה.
רכיבים
שנת 2023 הייתה שנה גדולה להצטלבות בין רכיבי סגנון ו-HTML, עם הנחיתה של popover
והשקעת הרבה מאמצים כדי לשפר את מיצוב מודעות העוגן ואת העתיד של תפריטי העיצוב הנפתחים. בעזרת הרכיבים האלה קל יותר ליצור דפוסים נפוצים של ממשק משתמש בלי להסתמך על ספריות נוספות או לפתח מערכות ניהול מצבים משלכם בכל פעם.
חלון קופץ
ה-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
עד שהמשתמש ישנה את הקלט וישאיר אותו במצב לא חוקי.
עם הבוררים החדשים האלה, כבר אין צורך לכתוב קוד עם שמירת מצב כדי לעקוב אחר קלט שהמשתמש השתנה.
:user-* Screencast
:user-* הדגמה חיה
למידע נוסף על השימוש ברכיבי פסאודו-אלמנטים לאימות טפסים* של משתמש.
אקורדיון בלעדי
תמיכה בדפדפן
- 120
- 120
- x
- 17.2
דפוס נפוץ של ממשק משתמש באינטרנט הוא רכיב אקורדיון. כדי ליישם דפוס זה, אתה משלב כמה אלמנטים של <details>
ובדרך כלל מקבץ אותם באופן חזותי כדי לציין שהם שייכים זה לזה.
גרסה חדשה ב-Chrome 120 תומכת במאפיין name
ברכיבי <details>
. כשמשתמשים במאפיין הזה, כמה אלמנטים של <details>
שיש להם אותו ערך של name
יוצרים קבוצה סמנטית. רק רכיב אחד בקבוצה יכול להיות פתוח בבת אחת: כשפותחים אחד מהאלמנטים של <details>
מהקבוצה, הרכיב הקודם שנפתח ייסגר באופן אוטומטי. סוג אקורדיון זה נקרא אקורדיון בלעדי.
רכיבי <details>
שהם חלק מאקורדיון בלעדי לא חייבים להיות אחים. אפשר לפזר אותם בין התמונות במסמך.
שירות ה-CSS עבר רנסנסציה כזו בשנים האחרונות, ובמיוחד במהלך שנת 2023. אם זו הפעם הראשונה שאתם משתמשים בשירות CSS או רוצים לרענן את הידע שלכם על עקרונות הבסיס, תוכלו ללמוד את הקורס לימודי CSS בחינם, לצד קורסים אחרים שמוצעים בחינם ב-web.dev.
אנחנו מאחלים לך עונת חגים מהנה ומקווים שתהיה לך הזדמנות לשלב בקרוב כמה מהתכונות החדשות והמבריקות של CSS וממשקי המשתמש בעבודה שלך!
⇾ צוות הפיתוח של ממשק המשתמש ב-Chrome,