في نهاية العام الماضي، اختُتمت أداة التشغيل التفاعلي لعام 2023. ويهدف هذا الجهد الذي يبذله مورّدو المتصفحات وأطراف أخرى إلى إنشاء شبكة ويب أكثر قابلية للتشغيل التفاعلي مع تقليل الاختلافات بين المتصفحات. تشارك هذه المشاركة النتائج النهائية، وأيضًا بعض الميزات المفضلة لفريق Chrome.
النتائج النهائية
من الرائع أن نرى الكثير من النتائج باللون الأخضر، ومقارنته بالنتائج في بداية عام 2023، وقد قطعنا شوطًا طويلاً، إذ شهد كل متصفّح زيادة كبيرة في النتيجة.
ما الذي نتحمس له؟
يمكنك العثور على القائمة الكاملة للمجالات التي يجب التركيز عليها لعام 2023 في لوحة بيانات Interop 2023. غطت بعض المجالات التي يتم التركيز عليها، مثل :has()
وطلبات بحث الحاوية والسمة inert، الميزة بأكملها. وقد تعاملت تطبيقات أخرى، على سبيل المثال، العمل على Flexbox، مع بعض حالات إخفاق الاختبار الطفيفة في ميزة حالية عبر المتصفحات.
:has()
"أخيرًا، أداة اختيار رئيسية لخدمة CSS. لقد تم طلب ذلك منذ اليوم الأول تقريبًا، وأخيرًا جعله مهندس علاقات المطوّرين على Chrome أمرًا رائعًا، يعني ذلك أنّ المطوّرين بحاجة إلى تشغيل عدد أقل من JavaScript لمحاكاة أداة الاختيار هذه."—توماس شتاينر، مهندس علاقات المطوّرين على Chrome
حققنا قدرًا كبيرًا من الحماس حول الفئة الزائفة الوظيفية
:has()، لأنّها أتاحت للنظام الأساسي طلبًا رئيسيًا قدّمه المطوّرون. إنه يمنحك أداة اختيار رئيسية — يمكنك تحديد عنصر بناءً على الأشياء
الموجودة بداخله. ومع ذلك، يمكن استخدامها لأكثر من ذلك بكثير. كما هو موضّح في مقالة CSS الالتفاف، يمكنك اختيار عناصر أخرى غير العنصر الرئيسي، وكذلك اختيار عناصر أخرى بانحراف.
:has() من خدمة مقارنة الأسعار (CSS): قاعدة الإرساءتوضّح أونا كرافيتس، مهندسة علاقات المطوّرين ضمن فريق Chrome:
"أداة اختيار :has() هي واحدة من أكثر ميزات CSS المتاحة حديثًا ومرونةً وفعاليةً. وباستخدامها، يمكنك تصميم أي عنصر رئيسي استنادًا إلى التواجد أو الحالة أو حتى عدد من العناصر الفرعية. وأهم ما في الأمر هو أنه يمكنك دمج هذا التصميم مع أدوات دمج أخرى لتصميم أشقاء، والحصول على مستوى جديد من التحكم في النمط على واجهة المستخدم الخاصة بك. إنها ميزة مرنة! لقد رأيت بالفعل الكثير من العروض التوضيحية الرائعة التي تقلل الحاجة إلى الاعتماد على نصوص برمجية إضافية عند الاستفادة من قوة :has()."
كما ذكّرني فيليب ياجنستيدت، مهندس برمجيات في Chrome، بأنّ الميزة ":has()" كانت أهم ميزة واجهها المطوّرون صعوبات بسبب عدم توفُّر الدعم لها عندما طرحوها في استطلاع خاص بولاية CSS في 2023.
لذلك نحن لسنا الأشخاص الوحيدين المتحمسين لتوفير هذا.
يمكنك الاستماع إلى "أونا" و"آدم أرجايل" للتحدث عن "has()" على The CSS Podcast ثم التعرّف على مزيد من المعلومات حول
:has() من هذه المشاركات من منتدى الويب.
- التعرّف على أداة اختيار لغة CSS
:has()من خلال الأمثلة - قفل شريط التمرير باستخدام "
:has()" - حالة استخدام خدمة مقارنة الأسعار (CSS)
:has()
طلبات البحث عن الحاويات
كان 2023 عامًا رائعًا لتحقيق إنجازات كانت تبدو مستحيلة في السابق. بالإضافة إلى :has()، حصلت منصة الويب أخيرًا على دعم عبر المتصفحات لطلبات البحث في الحاوية. لقد كنت تطلب استعلامات الحاوية (أو العنصر) منذ عام
2011، بعد عام فقط من تقديم مفهوم التصميم سريع الاستجابة. أصبحت هذه الميزة الآن متاحة في جميع محرّكات البحث الرئيسية.
ناقشت "أونا" و"آدم" طلبات البحث عن الحاويات في بودكاست CSS، وقدّمت "أونا" هذه الطلبات في حلقة من "Designing in the Browser". وقد شارك المنتدى أيضًا الكثير من النصائح والأفكار.
الشبكة الفرعية
إنّ Subgrid هي المنصة المفضّلة لديّ في AdMob 2023. يتيح لك تحديد شبكة على عنصر رئيسي، ثم استخدام أحجام المسار المحددة على ذلك الأصل، على الشبكات المتداخلة داخل تلك الشبكة الرئيسية. وبفضل مهندسي منصات Microsoft Edge على الويب، أصبحت الشبكة الفرعية متاحة في جميع المحركات الرئيسية خلال عام 2023 لتعزيز نتيجة Chrome وتوفير هذه الميزة الشيّقة للجميع.
أخبرتني مهندسة علاقات مطوّري برامج Chrome "أدريانا جارا" كيف سهّلت الشبكة والشبكة الفرعية إنشاء واجهة مستخدم رائعة،
"أنا فظيع في المرئيات والتخطيطات والحفاظ على مظهر متسق والتكيف مع الشاشات. ولكن مع الشبكة والشبكة الفرعية بطريقة ما، يمكن إنشاء تصميم يعمل عبر أحجام شاشات متعددة ويتكيف تلقائيًا مع المحتوى! إنه المفضل لدي لأنه يعالج حاجة أساسية لإنشاء موقع ويب يمنح المستخدمين تجربة جيدة بدون الكثير من الخبرة".
لقد كتبتُ بعض حالات الاستخدام للشبكة الفرعية في مقالة بعنوان 12 Days of Web. وكما هي الحال بالنسبة إلى الميزات الأخرى الواردة في هذه المشاركة، يمكنك الاستماع إلى حلقة بودكاست في CSS حول تلك الشبكة. هناك أيضًا العديد من الموارد من الويب.
- التعرّف على الشبكة الفرعية لخدمة CSS
- فيديو: تنسيقات سهلة وأكثر اتساقًا مع الشبكة الفرعية
- تخطيط المحتوى باستخدام شبكة CSS والشبكة الفرعية
مسافات الألوان والدوال
ولم يفاجئني مطوّر خدمة مقارنة الأسعار في Chrome Adam Argyle أنّ مساحات الألوان والدوال هي الميزة المفضّلة لديه،
"وداعًا للعمليات الحسابية لمتغير قيمة قناة HSL المحرجة؛ مرحبًا لمتغير اللون الفوري ذي سطر واحد. لا تحل مساحات الألوان والدوال الجديدة فقط مشاكل سير عمل الألوان، بل توفر أيضًا إمكانية الوصول إلى ألوان وتدرج أكثر تقدمًا وموثوقية وحيوية. ما هو جديد في هذه اللعبة؟ أضفِ الكثير من التوابل التبادلية للحصول على هذا الطبق المبهج."
ينشئ آدم بعض المحتوى الرائع لمساعدتك في فهم هذه الميزات الجديدة، مثل دليل ألوان CSS بدقة عالية وgradient.style وتحدّثنا عن دوال الألوان في بودكاست CSS.
من الرائع إتاحة هذه الميزات في جميع محرّكات المتصفحات الرئيسية. اكتشف المزيد في هذه المقالات الرائعة.
نتطلّع إلى إمكانية التشغيل التفاعلي في عام 2024
وبعد أن تصبح الميزات قابلة للتشغيل التفاعلي، تصبح جزءًا من خط الأساس الذي أصبح متوفّرًا حديثًا. من المشوّق أن نرى عدد الميزات الجديدة التي أُدخلت إلى هذه المجموعة خلال العام 2023، ولم يعُد ذلك جزءًا صغيرًا، وذلك بفضل عمل جميع المشاركين في برنامج Interop 2023. حان وقت الإعلان قريبًا جدًا عن المجالات التي تم التركيز عليها في عام 2024، ونتطلّع جميعًا إلى رؤية مدى أفضل ما يمكن أن تصبح عليه منصة الويب هذا العام.