أنترنت

ماذا تخبرنا حالة استطلاعات CSS وHTML؟ | مدونة | web.dev


تاريخ النشر: 6 ديسمبر 2024

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

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

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

بالنسبة لـ CSS، :has() تم اقتحامها كميزة CSS الجديدة المفضلة حيث صنفها 36% من الأشخاص كأفضل ميزة جديدة. الكائن المفضل الثاني
@container بنسبة 17% مرتبطة بتداخل CSS.

ماذا تستخدم؟

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

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

أهم مشكلات دعم المتصفح

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

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

حصل الموضع الأساسي على 11% في كلا الاستطلاعين، وحصلت واجهة برمجة التطبيقات View Transition API على 9% في حالة CSS و8% في حالة HTML مما يوضح مدى أهمية رؤية المطورين لهذه الميزات.

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

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

ميزات مفقودة

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

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

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

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

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

ألق نظرة على النتائج الكاملة من خلال قائمة قراءة CSS وقائمة قراءة HTML.

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى