מעטפת CSS: 2023!

סיכום של שירות CSS: שנת 2023!

מעבר אל התוכן:

• יסודות אדריכליים
• פונקציות טריגונומטריות
• בחירה מורכבת מ-* n
• היקף
• הצבת עץ

• טיפוגרפיה
• אות ראשונה
• יתרה במעטפת טקסט/יפה

• צבע
• רמת צבע 4
• פונקציית תמהיל צבעים
• תחביר של צבעים יחסיים

• עיצוב רספונסיבי
• שאילתות של קונטיינרים
• שאילתות סגנון
• :has סלקטור
• עדכון של שאילתת המדיה
• כתיבת שאילתת מדיה
• שאילתת מדיה לשקיפות

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

• רכיבים
• חלון קופץ
• האזור הרצוי
• מחלקות פסאודו תקינות/לא חוקיות של משתמש
• אקורדיון בלעדי

וואו! 2023 הייתה שנה אדירה לשירותי ה-CSS.

החל מ-#Interop2023 ועד לנחיתות חדשות רבות במרחב של שירות ה-CSS וממשק המשתמש, שמאפשרות למפתחים ליצור יכולות שפעם היו בלתי אפשריים בפלטפורמת האינטרנט. כל דפדפן מודרני תומך עכשיו בשאילתות קונטיינרים, ברשת משנה, בבורר :has() ובשפע של מרחבי צבעים ופונקציות חדשים. יש לנו תמיכה ב-Chrome עבור אנימציות שמבוססות על גלילה ב-CSS בלבד ואנימציה חלקה בין תצוגות אינטרנט באמצעות מעברים בין תצוגות. בנוסף, יש כל כך הרבה קווים ראשוניים חדשים שהצליחו לשפר את חוויות הפיתוח, כמו הקמה של שירותי CSS וסגנונות של היקף.

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

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

• = התכונה זמינה עכשיו בכל הגרסאות היציבות של הדפדפנים המובילים.

• = זמינות חלקית בדפדפנים העיקריים.

יסודות אדריכליים

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

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

תמיכה בדפדפן

• 111
• 111
• 108
• 15.4

מקור

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

הדגמה של פונקציות טריגונומטריות

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

בחירה מורכבת מ-* n

תמיכה בדפדפן

• 111
• 111
• 113
• 9

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

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

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

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

למידע נוסף על אפשרויות בחירות מורכבות*.

היקף

תמיכה בדפדפן

• 118
• 118
• 
• 17.4

מקור

בגרסה 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.

הצבת עץ

תמיכה בדפדפן

• 120
• 120
• 117
• 17.2

מקור

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

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

משנים את בורר ההצבה הרגועה כדי לקבוע את המנצחת במרוץ

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

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

רשת משנה

תמיכה בדפדפן

• 117
• 117
• 71
• 16

מקור

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

הקלטת מסך בתת-רשת

הדגמה בשידור חי של Subgrid

כותרת, גוף וכותרות תחתונות מותאמות לגדלים הדינמיים של פריטי האחיזה שלהם.

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

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

טיפוגרפיה

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

אות ראשונה

תמיכה בדפדפן

• 110
• 110
• X
• 9

מקור

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

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

הדגמה ראשונה

שנה את הערכים של initial-letterלרכיב ::first-letter כדי לראות שהוא זז.

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

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

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

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

הקלטת מסך בעטיפת טקסט

הדגמה בשידור חי של גלישת טקסט

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

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

צבע

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

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

תמיכה בדפדפן

• 111
• 111
• 113
• 15

מקור

תמיכה בדפדפן

• 111
• 111
• 113
• 15

מקור

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

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

הקלטת מסך בצבע 4

הדגמת צבע 4

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

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

פונקציית תמהיל צבעים

תמיכה בדפדפן

• 111
• 111
• 113
• 16.2

מקור

שילוב צבעים הוא משימה קלאסית, וב-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() תומך ברכיבים הבעלים של סגנון רספונסיבי והגיוני שלהם בהתאם לגודל ההורה, וגם לנוכחות או למצב של הילדים. כלומר, אתם יכולים סוף סוף להפריד בין הפריסה ברמת הדף לבין הפריסה ברמת הרכיב, ולכתוב את הלוגיקה פעם אחת כדי להשתמש ברכיב בכל מקום!

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

תמיכה בדפדפן

• 105
• 105
• 110
• 16

מקור

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

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

@container Screencast

הדגמה של @container

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

שאילתות מסוג מאגר תגים

תמיכה בדפדפן

• 111
• 111
• X
• 18

מקור

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

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

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

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

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

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

סלקטור:has()

תמיכה בדפדפן

• 105
• 105
• 121
• 15.4

מקור

במשך כמעט 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: אביזר עגינה

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

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

תמיכה בדפדפן

• 113
• 113
• 102
• 17

מקור

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

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

עדכון של Screencast

עדכון ההדגמה

לדמות (על ידי בחירה של אפשרות רדיו) ערך של מהירות עדכון לראות איך זה משפיע על הברווז.

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

כתיבת שאילתת מדיה

תמיכה בדפדפן

• 120
• 120
• 113
• 17

מקור

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

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

כתיבת סקריפטים ל-Screencast

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

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

מידע נוסף על סקריפטים

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

תמיכה בדפדפן

• 118
• 118
• 
• X

מקור

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

הקלטת מסך מופחתת בשקיפות

הדגמת שקיפות מופחתת

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

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

אינטראקציה

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

הצגת המעברים

תמיכה בדפדפן

• 111
• 111
• X
• 18

מקור

למעברים בין תצוגות יש השפעה משמעותית על חוויית המשתמש בדף. באמצעות 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(), משתמשים במחולל ההתאמה ליניארית.

סוף הגלילה

תמיכה בדפדפן

• 114
• 114
• 109
• X

מקור

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

סיום גלילה ל-Screencast

הדגמה בסיום גלילה

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

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

אנימציות שגוללות

תמיכה בדפדפן

• 115
• 115
• 
• X

מקור

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

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

הקלטת מסך של SDA

הדגמה של SDA

הדגמה של אנימציות מבוססות גלילה בשירות CSS: ציר הזמן לגלילה

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

אפליקציית Screencast להדגמה של SDA

הדגמה בשידור חי של SDA

הדגמה של אנימציות מבוססות גלילה בשירות CSS: צפייה בציר הזמן

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

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

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

תמיכה בדפדפן

• 116
• 116
• X
• X

מקור

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

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

עם timeline-scope מוצהר על ההורה המשותף, scroll-timeline שהוצהר בחלונית הגלילה מופיע על ידי הרכיב שמשתמש בו בתור ה-animation-timeline

הדגמה של Screencast

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

הדגמה של אנימציות מבוססות גלילה בשירות CSS: קובץ מצורף של ציר זמן בעיכוב

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

אנימציות מאפיינים בדידות

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

אנימה בדידה. הקלטת מסך

אנימה בדידה. הדגמה (דמו)

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

@starting-style

תמיכה בדפדפן

• 117
• 117
• 129
• 17.5

מקור

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

@starting-style Screencast

@starting-style הדגמה (דמו)

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

שכבת-על

תמיכה בדפדפן

• 117
• 117
• X
• X

מקור

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

הקלטת מסך בשכבת-על

הדגמה בשידור חי של שכבת-על

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

רכיבים

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

חלון קופץ

תמיכה בדפדפן

• 114
• 114
• 125
• 17

מקור

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

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

הקלטת מסך בחלון קופץ

הדגמה חיה של חלון קופץ

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

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

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

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

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

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

תמיכה בדפדפן

• 119
• 119
• 88
• 16.5

מקור

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

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

:user-* Screencast

:user-* הדגמה בשידור חי

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

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

תמיכה בדפדפן

• 120
• 120
• 130
• 17.2

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

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

הדגמת אקורדיון בלעדית

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

סיכום

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

אנחנו מאחלים לכם עונת חגים שמחה ומקווים שבקרוב תהיה לכם הזדמנות לשלב כמה מהתכונות החדשות והנהדרות האלה של ממשק המשתמש ושל שירות ה-CSS בעבודה שלכם.

⇾ צוות DevRel בממשק המשתמש של Chrome,

Una Kravets

Bramus

Adam Argyle