ما هي المعلومات التي تقدّمها لنا استطلاعات حالة CSS وHTML؟

Rachel Andrew

تاريخ النشر: 6 كانون الأول (ديسمبر) 2024

أصبحت نتائج حالة CSS لعام 2024 وحالة HTML لعام 2024 متاحة الآن. تقدّم هذه المشاركة اطّلاعًا أوليًا على بعض النتائج الأكثر إثارة للاهتمام في هذه الاستطلاعات.

التفاؤل بشأن منصة الويب

قبل النظر في بعض المشاكل التي يواجهها المستخدمون في HTML وCSS، تُظهر المناقشات تفاؤلاً كبيرًا بشأن المنصة. عندما سُئل المشاركون في استطلاع "حالة HTML" عما إذا كانت منصة الويب تسير في الاتجاه الصحيح بشكل عام، وافق ‎58% من المشاركين على هذا البيان، ووافق ‎18% منهم بشدة.

بالنسبة إلى CSS، حققت :has() فوزًا ساحقًا كميزة CSS الجديدة المفضّلة، حيث صنّفها% 36 من المستخدِمين على أنّها أفضل ميزة جديدة. أما الخيار الثاني المفضّل، فهو @container بنسبة% 17، وهو مرتبط بدمج CSS.

ما هو الجهاز الذي تستخدمه؟

لقد رصدنا بعض المفاجآت في بيانات CSS. على سبيل المثال، أكثر من% 75 من المستخدمين استخدموا تأثيرات فلاتر CSS، ما يجعلها الميزة الأكثر استخدامًا. نظرًا لعدد شكاوى العميل بشأن التسلسل على مرّ السنين، من المثير للاهتمام أنّ ‎18.9% فقط من المستخدمين يستخدمون التسلسل. ربما يكون هناك رابط هنا لاعتماد أدوات مثل Tailwind التي تمنع المستخدمين من مواجهة مشاكل متكررة مرتبطة بالتأثير المتسلسل.

تظهر عناصر المعالم، مثل <main> و<nav>، في أعلى استطلاع HTML للعناصر التي تستخدمها. يسرّنا رؤية الكثير من الأشخاص يستخدمون تقنيات التحميل البطيء والصور المتجاوبة.

أهم المشاكل المتعلّقة بتوافق المتصفّح

تحدث دائمًا مشاكل تتعلّق بالتشغيل التفاعلي أو إتاحة الميزات للمتصفحات عند التحدّث مع المطوّرين. لقد طرحت عليك الاستطلاعات أسئلة مباشرةً عن المشاكل التي واجهتها. في ما يلي أهم 10 ميزات تسبّب مشاكل، مرتّبة حسب النسبة المئوية للمستخدمين الذين اختاروا هذه الميزة.

  • Popover API
  • موضع الرابط
  • طلبات البحث عن الحاوية
  • :has()
  • عرض تداخل صفحات الأنماط المتتالية (CSS)
  • واجهة برمجة التطبيقات Transition API
  • الشبكة الفرعية
  • شبكة
  • <dialog>
  • تطبيقات الويب التقدّمية

حقّق موضع العنصر النائب نسبة% 11 في كلا الاستطلاعَين، وحقّقت View Transition API نسبة% 9 في حالة CSS و% 8 في حالة HTML، ما يشير إلى مدى قيمة هذه الميزات في نظر المطوّرين.

ومن المثير للاهتمام أنّ العديد من الميزات تتوافق مع بعضها. طلبات البحث عن الحاوية، :has()، وتداخل CSS، والشبكة الفرعية هي قاعدة أساسية متاحة حديثًا. كانت واجهة برمجة التطبيقات Popover API متوفّرة، ولكن بسبب مشكلة في إغلاق النوافذ المنبثقة بنقرة خفيفة على نظام التشغيل iOS. أصبح العنصر <dialog> متاحًا الآن على نطاق واسع، كما هو الحال مع تنسيق شبكة CSS. قد يكون من المفيد التوغّل في هذه النتائج لمعرفة المشاكل التي يواجهها المستخدمون. على سبيل المثال، غالبًا ما تشير الردود بشأن الشبكة إلى صعوبة تعلّمها، بدلاً من الإشارة إلى مشكلة فعلية في التشغيل التفاعلي.

نأمل أن يساعد مطوّرو التطبيقات في فهم حالة التطبيقات، ومعرفة ما إذا كانت المشكلة التي يواجهونها ناتجة عن عدم توافق المتصفّح أو أي مشكلة أخرى. يسرّنا أن نرى أنّ هذه الاستطلاعات تُبرز حالة الأساس للميزات. يمكنك أيضًا الاطّلاع على حالة مدى التوفّر على مستوى المتصفّحات لأبرز مشاكل CSS على webstatus.dev.

مميزات مفقودة

تسأل الاستطلاعات أيضًا عن الميزات والوظائف غير المتوفّرة في النظام الأساسي. يساعدنا ذلك في معرفة ما يبقى من الأمور الصعبة. كانت معدّلات الردّ على هذا السؤال منخفضة، ولكن في استطلاع "حالة CSS"، كان السؤال الأكثر تكرارًا هو عن الخلاصات المنطقية والتصميم باللوحة المربّعة والمنطق الشَرطي. من المثير للاهتمام أنّ المستخدمين طلبوا أيضًا أداة اختيار العنصر الرئيسي (يوفّر الرمز:has() هذه الميزة) والتداخل، وهو متاح حاليًا في الإصدار الأساسي.

كان السؤال الذي تم طرحه على المشاركين في استطلاع "حالة HTML" هو "إذا كان بإمكانك إضافة 3 عناصر إلى HTML، ما هي؟" طلب% 51 من المستخدمين جداول data ، وتشمل الخيارات الشائعة الأخرى علامات التبويب وعناصر التبديل.

ما هو الموضوع الذي تريد معرفة المزيد من المعلومات عنه؟

تتضمّن الاستطلاعات ميزة تتيح لك إضافة عناصر إلى قائمة القراءة، إذا كان تريد معرفة المزيد عنها بعد إكمال الاستطلاع. هذه بيانات مهمة، خاصةً إذا كنت تعمل في مجال إنشاء محتوى موجّه للمطوّرين. في القائمة التالية، يتم عرض أهم عشر ميزات في الاستطلاعَين، مرتّبة حسب النسبة المئوية لمشاركي الاستطلاع الذين أضافوها إلى قائمتهم.

  • CSS hanging-punctuation
  • CSS offset-path
  • @scope
  • موضع الرابط
  • اختيار قابل للتخصيص
  • view-timeline
  • scroll-timeline
  • سمة واحدة (focusgroup)
  • الصور المتحركة للخصائص المحدَّدة القيم
  • image()

اطّلِع على النتائج الكاملة من خلال قائمة قراءة CSS وقائمة قراءة HTML.

إشارة واحدة من منتدى الويب

يتيح Chrome إجراء هذه الاستطلاعات لأنّها إحدى الطرق التي يمكننا من خلالها الحصول على معلومات عن أهم المشاكل التي تواجهك والأمور التي تهمّك على منصة الويب. لا يُعدّ هذا الإجراء الإشارة الوحيدة التي نستخدمها، ولكنه يمثّل مكانًا يمكنك فيه إخبارنا مباشرةً برأيك. نشكرك إذا سبق لك ملء أحد هذين القياسَين أو كليهما. أنت تساعدنا في تحسين الويب بالطريقة التي تريدها. إذا أردت المساعدة، لا يزال لديك الوقت للمشاركة في The State of JS.