סיכום של שירות CSS: שנת 2023!
מעבר אל התוכן:
וואו! 2023 הייתה שנה ענקית לשירותי CSS!
החל מ-#Interop2023 ועד לנחיתות חדשות רבות במרחב של שירות ה-CSS וממשק המשתמש, שמאפשרות למפתחים של יכולות נחשבות לבלתי אפשרי בפלטפורמת האינטרנט. כל דפדפן מודרני תומך עכשיו בשאילתות קונטיינרים, ברשת משנה, בבורר :has() ובשפע של מרחבי צבעים ופונקציות חדשים. יש לנו תמיכה ב-Chrome עבור אנימציות שמבוססות על גלילה ב-CSS בלבד ואנימציה חלקה בין תצוגות אינטרנט באמצעות מעברים בין תצוגות. בנוסף, יש כל כך הרבה קווים ראשוניים חדשים שהצליחו לשפר את חוויות הפיתוח, כמו הקמה של שירותי CSS וסגנונות של היקף.
איזו שנה הייתה! ולכן אנחנו רוצים לסיים את השנה הזו לציון דרך לציון כל העבודה הקשה של מפתחי הדפדפנים וקהילת האינטרנט שאפשרו את כל זה.
יסודות אדריכליים
נתחיל עם עדכונים בשפה וביכולות הליבה של CSS. התכונות האלה הן הבסיס לאופן שבו כותבים ומארגנים סגנונות, והן מניבות כוחות מעולים.
פונקציות טריגונומטריות
בגרסה 111 של Chrome נוספה תמיכה בפונקציות הטריגונומטריות sin(), cos(), tan(), asin(), acos(), atan() ו-atan2(), ועכשיו הן זמינות בכל המנועים העיקריים. הפונקציות האלה שימושיות מאוד למטרות אנימציה ופריסה. לדוגמה, עכשיו הרבה יותר קל לפרוס רכיבים במעגל סביב מרכז שנבחר.
בחירה מורכבת מ-* n
תמיכה בדפדפן
- 111
- 111
- 113
- 9
באמצעות בורר המחלקה המדומה :nth-child() אפשר לבחור רכיבים ב-DOM לפי האינדקס שלהם. באמצעות מיקרו-תחביר An+B, ניתן לשלוט מצוין באלמנטים שרוצים לבחור.
כברירת מחדל, בפסאודו :nth-*() המערכת מביאה בחשבון את כל רכיבי הצאצא. החל מגרסה 111 של Chrome, אפשר גם להעביר רשימת בוררים אל :nth-child() ו-:nth-last-child(). כך אפשר לסנן מראש את רשימת הילדים לפני ש-An+B עושה את הפעולה הזו.
בהדגמה הבאה, הלוגיקה 3n+1 מיושמת רק על הבובות הקטנות. לשם כך, היא מסננים אותן מראש באמצעות of .small. אפשר להשתמש בתפריטים הנפתחים כדי לשנות באופן דינמי את הבורר שנמצא בשימוש.
למידע נוסף על אפשרויות בחירות מורכבות*.
היקף
בגרסה 118 של Chrome נוספה תמיכה ב-@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 לשירות CSSמידע נוסף על @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 */
}
אפליקציית Screencast מוצבת
הדגמה בשידור חי של Nesting
קינון יכול להפחית את המשקל של גיליון סגנונות, לצמצם את התקורה של בוררים חוזרים ולרכז את סגנונות הרכיבים. התחביר שפורסם בהתחלה עם מגבלה שדורשת שימוש ב-& במקומות שונים, אבל מאז הוסר באמצעות עדכון תחביר רגוע יותר.
רשת משנה
שירות CSS subgrid מאפשר ליצור רשתות מורכבות יותר עם התאמה טובה יותר בין פריסות הצאצא. היא מאפשרת לרשת שנמצאת בתוך רשת אחרת לאמץ את השורות והעמודות של הרשת החיצונית בתור שלה, על ידי שימוש ב-subgrid כערך לשורות או לעמודות ברשת.
הקלטת מסך בתת-רשת
הדגמה בשידור חי של Subgrid
רכיב Subgrid שימושי במיוחד ליישר בין אחים לבין התוכן הדינמי אחד של השני. כך קופירייטינג, כותבי חוויית משתמש ומתרגמים לא ינסו ליצור עותק לפרויקט "מתאים" בפריסה. כשמשתמשים בתצוגת משנה, אפשר להתאים את הפריסה לתוכן.
טיפוגרפיה
הטיפוגרפיה באינטרנט השיגה כמה עדכונים חשובים בשנת 2023. המאפיין text-wrap הוא שיפור מתקדם שנחמד במיוחד. המאפיין הזה מאפשר התאמת פריסה טיפוגרפית שמופעלת בדפדפן, ללא צורך בכתיבת סקריפט נוספת. עכשיו אפשר להפסיק להשתמש בקווים מביכים, ולהשתמש בטיפוגרפיה צפויה יותר!
אות ראשונה
הנכס initial-letter נוחת בתחילת השנה בגרסה 110 של Chrome. זהו תכונת CSS קטנה אך עוצמתית שמגדירה עיצוב למיקום של האותיות הראשונות. אפשר למקם אותיות במצב 'שמט' או 'מוגבה'. המאפיין הזה מקבל שני ארגומנטים: הראשון מציין את רמת העומק של שחרור האות בפסקה המתאימה, והשני מציין את רמת הצירוף של האות שמעליה. אפשר אפילו לשלב בין שתי האפשרויות, כמו בהדגמה הבאה.
צילום מסך של האות הראשונה
הדגמה ראשונה
initial-letterלרכיב ::first-letter כדי לראות שהוא זז.גלישת טקסט: איזון ויפה
כמפתחים, אתם לא יודעים מה הגודל הסופי, גודל הגופן או אפילו השפה של כותרת או פסקה. כל המשתנים הדרושים לטיפול יעיל ואסתטי בגלישת טקסט נמצאים בדפדפן. מכיוון שהדפדפן יודע את כל הגורמים, כמו גודל הגופן, השפה והשטח שהוקצה לו, הוא מתאים מאוד לטיפול בפריסת טקסט מתקדמת ואיכותית.
כאן נכנסים לתמונה שתי טכניקות חדשות לגלישת טקסט: אחת בשם balance והשנייה pretty. הערך 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
מידע נוסף על צבע 4 ומרחבי צבעים
פונקציית תמהיל צבעים
שילוב צבעים הוא משימה קלאסית, וב-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 שמכילים תמונה ראשית (Hero) כילד.
:has() צילום מסך להדגמה
:has() Live הדגמה (דמו)
:has() לשירות CSS: כרטיס בלי/עם תמונהמכיוון ש-:has() מקבל רשימת סלקטור יחסית כארגומנט, אפשר לבחור הרבה יותר מאשר רכיב ההורה. באמצעות שילובי CSS שונים, ניתן לא רק לעלות על עץ ה-DOM, אלא גם לבצע בחירות הצידה. לדוגמה, הפונקציה li:has(+ li:hover) תבחר ברכיב <li> שקודם לרכיב <li> שמוצג כרגע כשמעבירים את העכבר מעליו.
:has() Screencast
:has() הדגמה
:has() לשירות CSS: אביזר עגינהעדכון של שאילתת המדיה
שאילתת המדיה update מאפשרת להתאים את ממשק המשתמש לקצב הרענון של המכשיר. התכונה יכולה לדווח על ערך של fast, slow או none שקשור ליכולות של מכשירים שונים.
סביר להניח שלרוב המכשירים שאתם מתכננים יש קצב רענון מהיר. המכשירים האלה כוללים מחשבים שולחניים ואת רוב המכשירים הניידים. יכול להיות שקצב הרענון של קוראי ספרים אלקטרוניים ומכשירים כמו מערכות תשלום עם צריכת חשמל נמוכה. הידיעה שהמכשיר לא יכול לטפל באנימציה או בעדכונים תכופים, מאפשרת לחסוך את השימוש בסוללה או לקבל עדכונים פגומים בתצוגה.
עדכון של Screencast
עדכון ההדגמה
מידע נוסף על @media (update).
כתיבת שאילתת מדיה
אפשר להשתמש בשאילתת המדיה ליצירת סקריפטים כדי לבדוק אם JavaScript זמין או לא. זה נחמד מאוד לשיפור הדרגתי. לפני שאילתת המדיה הזו, אסטרטגיה לזיהוי זמינות של JavaScript הייתה למקם מחלקה nojs ב-HTML ולהסיר אותה באמצעות JavaScript. ניתן להסיר את הסקריפטים האלה, כי שירות ה-CSS יכול עכשיו לזהות JavaScript ולבצע שינויים בהתאם.
כאן מוסבר איך מפעילים ומשביתים JavaScript בדף לצורך בדיקה באמצעות כלי הפיתוח ל-Chrome.
כתיבת סקריפטים ל-Screencast
הדגמה של כתיבת סקריפטים
כדאי לשקול החלפת עיצוב באתר. שאילתת המדיה של כתיבת סקריפטים יכולה לעזור לכך שההחלפה תפעל בהתאם להעדפת המערכת, כי אין JavaScript זמין. לחלופין, אפשר לשקול רכיב החלפה – אם JavaScript זמין, ניתן להחליק את המתג באמצעות תנועה במקום פשוט להפעיל ולכבות. יש הרבה הזדמנויות נהדרות לשדרג את חוויית המשתמש (אם אפשר לכתוב סקריפטים), ולספק חוויה בסיסית ומשמעותית אם הסקריפט מושבת.
שאילתת מדיה בשקיפות מופחתת
ממשקים לא אטומים עלולים לגרום לכאבי ראש או לקשיים בראייה עבור סוגים שונים של ליקויי ראייה. לכן ב-Windows, ב-macOS וב-iOS יש העדפות מערכת שיכולות לצמצם או להסיר את השקיפות בממשק המשתמש. שאילתת המדיה הזו עבור prefers-reduced-transparency מתאימה היטב לשאילתות המדיה האחרות, שמאפשרות לך להיות יצירתי וגם להתאים את המשתמשים עבור המשתמשים.
הקלטת מסך מופחתת בשקיפות
הדגמת שקיפות מופחתת
במקרים מסוימים אפשר לספק פריסה חלופית שאין בה תוכן שמכסה תוכן אחר. במקרים אחרים, ניתן להתאים את שקיפות הצבע לאטום או כמעט אטום. הפוסט בבלוג הבא כולל הדגמות מעוררות השראה שמותאמות להעדפת המשתמש. אם אתם סקרנים לגבי מקרים שבהם שאילתת המדיה הזו חשובה.
מידע נוסף על @media (prefers-reduced-transparency)
אינטראקציה
אינטראקציה היא אבן יסוד בחוויות בדיגיטל. כך משתמשים יכולים לקבל משוב על מה שהם לחצו עליהם והיכן הם נמצאים במרחב הווירטואלי. השנה השקנו תכונות מלהיבות רבות שבזכותן קל יותר לכתוב אינטראקציות ולהטמיע אותן, כך שהתהליכים שעוברים המשתמשים יהיו חלקים וחוויית השימוש הטובה ביותר באינטרנט.
הצגת המעברים
למעברים בין תצוגות יש השפעה משמעותית על חוויית המשתמש בדף. באמצעות View חלףs API, תוכלו ליצור מעברים חזותיים בין שני מצבים של דף יחיד באפליקציה שלכם. המעברים האלה יכולים להיות מעברים מלאים בין דפים, או פעולות קטנות יותר בדף, כמו הוספה או הסרה של פריט חדש לרשימה.
הליבה של View Transitions API היא הפונקציה document.startViewTranstion. מעבירים פונקציה שמעדכנת את ה-DOM למצב החדש, וה-API יטפל בשבילכם בכל המשימות. היא עושה זאת על ידי יצירת תמונת מצב לפני ואחרי, ולאחר מכן עוברת בין שתי האפשרויות. שימוש ב-CSS מאפשר לכם לקבוע מה יודפס, ואפשר גם להתאים אישית את האופן שבו תמונות המצב האלה צריכות להיות אנימציה.
הקלטת מסך של VT
הדגמת VT
ממשק ה-API של View Transitions API לאפליקציות בדף יחיד נשלח בגרסה 111 של Chrome. מידע נוסף על הצגת מעברים
פונקציית התאמה לינארית
תמיכה בדפדפן
- 113
- 113
- 112
- 17.2
אל תתנו לשם הפונקציה הזו להטעות אתכם. הפונקציה linear() (בלי להתבלבל עם מילת המפתח linear) מאפשרת ליצור פונקציות התאמה מורכבות בקלות, בלי לאבד חלק מהדיוק.
לפני linear(), שנשלח בגרסה 113 של Chrome, לא היה אפשר ליצור אפקטים של עזיבה מהדף הראשון או אפקטים של אביב ב-CSS. הודות ל-linear() ניתן לבצע הערכה של ההקלות האלה על ידי פישוט שלהן לסדרה של נקודות, ולאחר מכן שינוי לינארי בין הנקודות האלה.
linear() משתמשת בנקודות האלה ומבצעת אינטרפולציה לינארית ביניהן.הקלטת מסך עם התאמה לינארית
הדגמה (דמו) ללינארית
linear() לשירות CSS.למידע נוסף על linear(). כדי ליצור עקומות של linear(), משתמשים במחולל ההתאמה ליניארית.
סוף הגלילה
ממשקים רבים כוללים אינטראקציות בגלילה, ולפעמים הממשק צריך לסנכרן מידע שרלוונטי למיקום הגלילה הנוכחי, או לאחזר נתונים על סמך המצב הנוכחי. לפני האירוע scrollend, היה עליך להשתמש בשיטת זמן קצוב לתפוגה לא מדויקת שהייתה יכולה לפעול כשהאצבע של המשתמש עדיין הייתה על המסך. עם האירוע scrollend, תקבלו אירוע מתוזמן היטב שיבין אם המשתמש עדיין נמצא באמצע התנועה או לא.
סיום גלילה ל-Screencast
הדגמה בסיום גלילה
זה היה חשוב מאוד לדפדפן מכיוון ש-JavaScript לא יכול לעקוב אחר הנוכחות של אצבעות על המסך במהלך גלילה, המידע פשוט אינו זמין. עכשיו אפשר למחוק מקטעים של קוד ניסיון לא מדויק בסיום הגלילה ולהחליף אותם באירוע ברמת דיוק גבוהה בבעלות הדפדפן.
אנימציות שגוללות
אנימציות מבוססות גלילה הן תכונה מרגשת שזמינה ב-Chrome 115. הם מאפשרים לקחת אנימציה קיימת ב-CSS או אנימציה שנוצרה באמצעות Web Animations API, ולצמד אותה לקיזוז הגלילה של גליל. כשגוללים למעלה ולמטה – או שמאלה וימינה בגלילה אופקית, האנימציה המקושרת גוללים קדימה ואחורה בתגובה ישירה.
באמצעות ScrollTimeline תוכלו לעקוב אחרי ההתקדמות הכוללת של פס גלילה, כמו שאפשר לראות בהדגמה הבאה. כשגוללים לסוף הדף, הטקסט חושף את עצמו תו אחר תו.
הקלטת מסך של SDA
הדגמה של SDA
באמצעות ViewTimeline אפשר לעקוב אחרי רכיב כשהוא חוצה את נקודת הגלילה. הפעולה הזו פועלת באופן דומה לאופן שבו IntersectionObserver עוקב אחר רכיב. בהדגמה הבאה, כל תמונה חושפת את עצמה מהרגע שהיא נכנסת לחלונית הגלילה ועד שהיא נמצאת במרכז.
אפליקציית Screencast להדגמה של SDA
הדגמה בשידור חי של SDA
מכיוון שאנימציות מבוססות גלילה פועלות עם אנימציות CSS ועם ממשק ה-API של אנימציות באינטרנט, כך שתוכלו ליהנות מכל היתרונות של ממשקי ה-API האלה. התכונות האלה כוללות את האפשרות לגרום לאנימציות האלה לרוץ מהשרשור הראשי. עכשיו אפשר ליהנות מאנימציות חלקות וחלקות, שמונעות על ידי גלילה, ומדלגות על השרשור הראשי עם כמה שורות קוד נוספות. איזה כיף!
למידע נוסף על אנימציות שמונעות גלילה, אפשר לעיין במאמר הזה עם כל הפרטים או לבקר ב-Browse-driven-animations.style שכולל הדגמות רבות.
קובץ מצורף של ציר זמן שנדחה
כשמחילים אנימציה הנגרמת על ידי גלילה דרך CSS, מנגנון החיפוש למציאת פס הגלילה השולט תמיד מתקדם במעלה עץ ה-DOM ולכן הוא מוגבל לישויות אב של גלילה בלבד. עם זאת, לעיתים קרובות האלמנט שצריך להפוך לאנימציה אינו צאצא של גלילה, אלא רכיב שנמצא בעץ משנה אחר לחלוטין.
כדי לאפשר לרכיב המונפש למצוא ציר זמן בעל שם של ישות שאינה ישות אב, צריך להשתמש במאפיין timeline-scope ברכיב הורה משותף. כך ניתן לצרף אל scroll-timeline או view-timeline המוגדרים עם השם הזה, ולקבל היקף רחב יותר. אחרי ההגדרה הזו, כל ילד או ילדה של ההורה המשותף יכולים להשתמש בציר הזמן עם השם הזה.
timeline-scope מוצהר על ההורה המשותף, scroll-timeline שהוצהר בחלונית הגלילה מופיע על ידי הרכיב שמשתמש בו בתור ה-animation-timelineהדגמה של Screencast
הדגמה בשידור חי
למידע נוסף על 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 השקענו הרבה עבודה בנושא מיקום העוגן והעתיד של תפריטים נפתחים של עיצוב. הרכיבים האלה מאפשרים לפתח בקלות תבניות נפוצות של ממשק משתמש, בלי להסתמך על ספריות נוספות או לבנות מערכות ניהול מצבים משלכם מהיסוד בכל פעם.
חלון קופץ
Popover API עוזר ליצור רכיבים שנמצאים בחלק העליון של שאר הדף. דוגמאות: תפריטים, אפשרויות בחירה והסברים קצרים. כדי ליצור חלון קופץ פשוט, אפשר להוסיף את המאפיין popover ואת המאפיין id לרכיב שקופץ, ולחבר את המאפיין id ללחצן ההפעלה באמצעות popovertarget="my-popover". Popover API תומך:
- קידום לשכבה העליונה. חלונות קופצים יופיעו בשכבה נפרדת מעל לשאר הדף, כך שלא יהיה צורך להשתעשע עם האינדקס Z.
- פונקציונליות עם סגירה קלה. לחיצה מחוץ לאזור הקופץ תסגור את החלון הקופץ ותחזיר את המיקוד.
- ברירת מחדל לניהול ההתמקדות. פתיחת החלון הקופץ תגרום לעצירת הכרטיסייה הבאה בתוך החלון הקופץ.
- קישורי מקלדת נגישים. הקשה על המקש
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 בעבודה שלכם.
⇅ צוות DevRel בממשק המשתמש של Chrome,
