מה אנחנו יכולים ללמוד מהסקרים על מצב CSS ו-HTML?

Rachel Andrew

תאריך פרסום: 6 בדצמבר 2024

התוצאות של State of CSS 2024 ושל State of HTML 2024 זמינות עכשיו. בפוסט הזה נסקור בקצרה חלק מהממצאים המעניינים ביותר מהסקרים האלה.

אופטימיזם לגבי פלטפורמת האינטרנט

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

ב-CSS, :has() ניצחה בגדול בתור התכונה החדשה המועדפת ב-CSS, עם 36% מהאנשים שדרגו אותה כתכונה החדשה הטובה ביותר. האפשרות השנייה המועדפת היא @container עם 17%, שווה ערך לאפשרות של עיצוב CSS בתצוגת עץ.

במה אתם משתמשים?

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

רכיבי ציון דרך כמו <main> ו-<nav> הם הרכיבים המובילים בסקר HTML לגבי הדברים שבהם אתם משתמשים. נהדר לראות שכל כך הרבה אנשים משתמשים בשיטות של טעינת פריטים בזמן אמת (lazy loading) ותמונות רספונסיביות.

הבעיות הנפוצות ביותר בתמיכה בדפדפנים

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

  • Popover API
  • מיקום של עוגן
  • שאילתות בקונטיינרים
  • :has()
  • תצוגת עץ של CSS
  • Transition API
  • רשת משנה
  • תצוגת רשת
  • <dialog>
  • Progressive Web Apps

מיקום עוגן קיבל 11% בשני הסקרים, View Transition API קיבל 9% ב-State of CSS ו-8% ב-State of HTML, מה שמראה עד כמה המפתחים רואים את התכונות האלה כחשובות.

מעניין לציין שחלק מהתכונות ניתנות לפעולה הדדית. שאילתות של קונטיינרים, ‏:has(), הטמעת CSS ורשת משנה הן תכונות בסיסיות שזמינות עכשיו. גם Popover API יהיה זמין, אבל יש בעיה עם סגירה קלה ב-iOS. הרכיב <dialog> זמין עכשיו באופן נרחב, וכך גם פריסה של רשת CSS. כדאי לבדוק את התוצאות האלה כדי לברר אילו בעיות נתקלים בהן אנשים. לדוגמה, התגובות לגבי רשתות נוטים להתייחס לקושי בלמידה שלהן, ולא לציין בעיה בפועל של יכולת פעולה הדדית.

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

תכונות חסרות

בסקרים נשאלים גם אילו תכונות ופונקציונליות חסרות בפלטפורמה. כך אנחנו יכולים לראות מה עדיין קשה לעשות. שיעור התשובות לשאלה הזו היה נמוך יותר, אבל בסקר 'מצב CSS', הבקשות הנפוצות ביותר היו ל-mixins, לוגיקה מותנית ותצוגת 'לבנים'. באופן מעניין, אנשים ביקשו גם בורר הורה (:has() מספק את הפונקציונליות הזו) ועיצוב בתצוגת עץ – שכבר קיים וזמין בגרסת Baseline החדשה.

השאלה ששאלנו את המשיבים בסקר State of HTML הייתה: "אם הייתם יכולים להוסיף 3 רכיבים ל-HTML, מהם היו הרכיבים האלה?" 51% מהאנשים ביקשו טבלאות נתונים. אפשרויות פופולריות אחרות כוללות כרטיסיות ורכיבי החלפת מצב.

באיזה נושא אוכל לתת לך מידע נוסף?

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

  • CSS hanging-punctuation
  • CSS offset-path
  • @scope
  • מיקום של עוגן
  • בחירת פריטים בהתאמה אישית
  • view-timeline
  • scroll-timeline
  • מאפיין אחד (focusgroup)
  • אנימציה של מאפיינים נפרדים
  • image()

אפשר לעיין בתוצאות המלאות ברשימת הקריאה של CSS וברשימת הקריאה של HTML.

אות אחד מקהילת האינטרנט

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