הסתיים חלון הזמן של הפעילות ההדדית לשנת 2023 בסוף השנה שעברה. המאמץ הזה מצד ספקי דפדפנים וגורמים אחרים נועד ליצור אינטרנט עם יכולת פעולה הדדית רבה יותר, עם פחות הבדלים בין דפדפנים כדי להניע אתכם. בפוסט הזה אנחנו משתפים את התוצאות הסופיות וגם כמה מהתכונות האהובות על צוות Chrome.
התוצאות הסופיות
זה נהדר לראות כל כך הרבה ירוק, בהשוואה לציונים בתחילת 2023, והתקדמנו מאוד, כשבכל דפדפן יש עלייה עצומה בניקוד.
ממה אנחנו מתרגשים?
הרשימה המלאה של התחומים שמתמקדים ב-2023 זמינה במרכז הבקרה של יכולת פעולה הדדית לשנת 2023. בחלק מתחומי המיקוד – למשל :has(), שאילתות קונטיינרים והמאפיין inert, התייחסנו לכל הפיצ'ר. עסקים אחרים, כמו העבודה על Flexbox, התמודדו עם כמה כשלי בדיקה קלים בתכונה קיימת של דפדפנים שונים.
:has()
"סוף סוף סלקטור הורה ל-CSS! כבר קיבלנו בקשה כמעט כבר מהיום הראשון, ולבסוף, שימוש בכל הדפדפנים הוא פשוט נהדר, והמשמעות היא שמפתחים צריכים להריץ פחות JavaScript כדי לחקות את הבורר הזה." – תומאס סטיינר, מהנדס קשרי מפתחים ב-Chrome.
הייתה הרבה התלהבות בנוגע למעמד פסאודו-סיווג פונקציונלי
:has(), כי הוא הוביל לפלטפורמה בקשה חשובה ממפתחים. הוא
נותן לכם בורר הורה — אפשר לבחור רכיב על סמך הפריטים
שנמצאים בו. עם זאת, אפשר להשתמש בו למטרות רבות נוספות. כמו שמוסבר במאמר CSS wrapped, תוכלו לבחור הרבה יותר מאשר רכיב הורה, ואפילו לעשות בחירות בכיוון ההפוך.
:has(): אביזר עגינהUna Kravets, מהנדסת קשרי מפתחים בצוות Chrome:
"הבורר :has() הוא אחת מהתכונות הגמישות והעוצמתיות ביותר של CSS שזמינות. בעזרתו אפשר לעצב כל הורה בהתאם לנוכחות, למצב ואפילו למספר אפילו של רכיבי הצאצא. אבל יותר מכך, ניתן לשלב אותו עם קומבינטורים אחרים כדי לעצב את האחיות ולקבל רמה חדשה של שליטה בסגנון בממשק המשתמש. זו תכונה כל כך גמישה! כבר ראיתי המון הדגמות מגניבות שמפחיתות את הצורך להסתמך על סקריפטים נוספים כדי לנצל את העוצמה של :has()."
כפי שפיליפ יאגנסטדט (Filip Jägenstedt), מהנדס תוכנה ב-Chrome הזכיר לי, :has() הייתה התכונה המובילה שהמפתחים התקשו להתמודד איתה עקב חוסר תמיכה, כשנשאלו על הסקר State of CSS בשנת 2023.
ולכן אנחנו לא היחידים שמחים שהגרסה הזו זמינה.
אפשר להאזין ל-Una, יחד עם אדם ארגייל, לדבר על has() בפודקאסט של CSS ולקבל מידע נוסף על :has() מהפוסטים האלה בקהילה באינטרנט.
- הסבר על הסלקטור
:has()של CSS באמצעות דוגמאות - נעילת גלילה באמצעות
:has() - תרחיש לדוגמה של שירות CSS
:has()
שאילתות לגבי קונטיינר
שנת 2023 הייתה שנה מעולה לדברים שבעבר היו בלתי אפשריים. בנוסף ל-:has(), פלטפורמת האינטרנט קיבלה סוף סוף תמיכה בדפדפנים שונים עבור שאילתות של קונטיינרים. אתם מבקשים שאילתות של קונטיינרים (או רכיבים) מאז 2011, רק שנה אחרי שהשקנו את הרעיון של עיצוב רספונסיבי. עכשיו הוא כאן, וזמין בכל מנועי הדפדפנים העיקריים.
אונה ואדם דינו על שאילתות בקונטיינרים בפודקאסט של CSS, ו-Una הציגה אותן בפרק של Designing in the Browser. בנוסף, אנשים מהקהילה משתפים שפע של טיפים ורעיונות.
רשת משנה
Subgrid הוא הפריט שהכי אהבתי ב-Interop 2023. היא מאפשרת להגדיר רשת על רכיב הורה, ולאחר מכן להשתמש בגדלים של המסלולים שמוגדרים באותו הורה, ברשתות שמוצבות בתוך הרשת הראשית. בזכות העבודה של מהנדסי פלטפורמת האינטרנט של Microsoft Edge, במהלך 2023 הפך רשת המשנה לזמינה בכל מנועי הדפדפנים המובילים כדי לשפר את הדירוג ב-Chrome ולאפשר לכולם ליהנות מהתכונה המדהימה הזו.
אדריאנה ג'ארה, מהנדסת מערכות יחסים ב-Chrome סיפרה איך קל יותר ליצור ממשק משתמש מעולה,
"יש לי בעיה קשה בעיצוב החזותי, בפריסות, בשמירה על מראה עקבי ובהסתגלות למסכים. אבל אם משתמשים ברשת או בתת-רשת, אפשר ליצור עיצוב שפועל בכמה גדלים שונים של מסכים ומתאים את עצמו באופן אוטומטי לתוכן. זה המשחק האהוב עליי, כי הוא עונה על צורך בסיסי ביצירת אתר שיספק למשתמשים חוויה סבירה בלי המון ניסיון".
כתבתי כמה תרחישים לדוגמה לשימוש ברשת משנה במאמר על 12 ימים של אינטרנט, וכמו בכל שאר התכונות בפוסט הזה, תוכלו להאזין לפרק בפודקאסט של CSS. יש גם כל כך הרבה משאבים מרחבי האינטרנט.
- מידע על רשת משנה של CSS
- סרטון: פריסות פשוטות ועקביות יותר באמצעות רשת משנה
- השקת תוכן באמצעות רשת ותת-רשת של CSS
מרחבי צבעים ופונקציות
לא היה מפתיע לגלות שאדם ארגייל, מפתח CSS ב-Chrome, סיפר לי שמרחבי צבע ופונקציות הם התכונה האהובה עליו,
"להתראות לגבי משתנה ערך ערוץ HSL מביך; שלום ושורות פשוטות – וריאציית צבע בדיוק בזמן. הפונקציות ומרחבי הצבעים החדשים לא פותרים רק בעיות בתהליך העבודה של צבעים, אלא מעניקים גישה לצבעים ולהדרגתיות מתקדמים, אמינים ומלאי חיים. אין מה לאהוב במציאת יכולות מסוימות, ויחד עם זאת להפוך את החיים לקלים יותר. פורסים תיבול של מאמץ משולב עם תנועות של תיבול, והמנה הזו טעימה צבעונית".
אדם יצר תכנים מדהימים שיעזרו לכם להבין את המאפיינים החדשים האלה, כמו מדריך צבעי CSS באיכות HD ו-gradient.style, וודיבר על פונקציות צבע בפודקאסט של CSS.
זה מדהים שיש תכונות אלה זמינות בכל מנועי הדפדפנים העיקריים. כדי לקבל מידע נוסף, אפשר לעיין במאמרים הנהדרים האלה.
לקראת הפעילות ההדדית ב-2024
אחרי שתכונות מופיעות עם יכולת פעולה הדדית, הן הופכות לחלק מ-Baseline, שחדש זמין. מרגש לראות את מספר הפיצ'רים החדשים שהצטרפו לקבוצה הזו במהלך 2023, לאו דווקא בגלל העבודה של כל מי שמעורב בפעילות ההדדית בשנת 2023. בקרוב מאוד בקרוב נכריז על התחומים הנבחרים להתמקדות ב-2024, וכולנו מצפים לראות עד כמה פלטפורמת האינטרנט יכולה להשתפר השנה.