شارك فريق Chrome بشكل كبير في مؤتمر CSS Day هذا العام. لقد نظمنا مكتب مساعدة CSS للإجابة عن أسئلة المشاركين، كما وفّرنا لوحة بيضاء حيث سألنا المستخدمين عن الميزات التي يعتقدون أنّها لا تزال غير متوفّرة في CSS. في هذا المنشور، سأحدّثك عن نتائج طرح هذا السؤال، ونطلب منك أيضًا إخبارنا بالميزات التي تعتقد أنّها غير متوفرة في HTML وCSS من خلال إكمال هذا الاستطلاع القصير. هل توافق على رأي ضيوف CSS Day؟
أهم عشر طلبات
طُلب من الحاضرين كتابة أفكارهم على ملاحظات لاصقة وإضافتها إلى اللوحة. ويمكن للمستخدمين أيضًا إضافة ملصق لتعبيرهم عن رأيهم في الأفكار. في ما يلي أهم عشرة ميزات:
إتاحة إدخالات التصميم
وقد حصل هذا الطلب على 21 صوتًا، ما جعله من أكثر الميزات المطلوبة. أنت بحاجة إلى طرق لتنسيق عناصر واجهة المستخدم الشائعة هذه بطريقة متّسقة.
نحن في Chrome على دراية تامة بهذا المجال، لأنّه يشكّل أحد أهم المشاكل التي تواجه المطوّرين، ونحن نعمل على توفير حلول أفضل لهم. على سبيل المثال، تهدف عناصر محدّدة قابلة للتخصيص إلى توفير طريقة لتفعيل سلوك التصميم الجديد. يمكنك بعد ذلك تنفيذ إجراءات مثل إضافة صور أو حتى تصميم أكثر تفصيلاً للخيارات. وتتمثل ميزة هذا النهج في أنّه سيعود إلى قائمة اختيار عادية، ما يتيح إجراء تحسينات متزايدة.
تم إخفاء المحتوى بصريًا
حصل هذا الطلب على 19 صوتًا في CSS Day، ما جعله ثاني أكثر الطلبات رواجًا. يهدف الطلب إلى توفير طريقة لإضافة محتوى يستخدمه قارئ الشاشة فقط. قد يكون هذا العنصر من رمز HTML ، حيث لا يتم عرض المحتوى بل يقرأه فقط أحد برامج قراءة الشاشة.
وعادةً ما يحقّق المستخدمون ذلك اليوم من خلال إنشاء
فئة .visually-hidden
لإخفاء
المحتوى مع السماح لبرامج قراءة الشاشة بالوصول إليه.
على الرغم من أنّ هذا الطلب شائع، هناك مستخدمون لا يعتقدون أنّه ينبغي تنفيذه. للاطّلاع على التفاصيل، يُرجى قراءة مقالة المحتوى المخفيّ بصريًا هو عملية اختراق يجب حلّها وليس تكريسها، وهذه المناقشة حول المشكلة 560 في مجموعة عمل CSS.
position: sticky inside overflow:hidden
حصد هذا الطلب 16 صوتًا. لا تعمل ميزة position: sticky حاليًا إلا عندما يكون
جميع الوالدَين overflow: visible.
هناك مشكلة مفتوحة منذ عام 2017 تطلب ذلك،
وعلى الرغم من أنّ حالة الاستخدام المبدئي
لتفعيل استخدام overflow: hidden لإزالة القيم العائمة قد تكون أقل
طلبًا اليوم، هناك العديد من السيناريوهات الأخرى الموضّحة بالتفصيل في سلسلة المحادثات.
إضافة تأثيرات متحركة إلى height: auto
بعد حصول الخيار height: auto على 12 صوتًا، أراد العديد من الحاضرين إضافة حركة إليه. يسرّنا إعلامك بأنّه سيتم توفير هذه الميزة على منصة الويب باستخدام سمة CSS interpolate-size والدالة calc-size().
وستتوفّر هذه الميزة اعتبارًا من الإصدار 129 من Chrome.
ننصحك بترقّب مشاركة مستقبلية تتضمّن مزيدًا من المعلومات حول هذه الميزات.
أنواع الإدخال الإضافية
وفّرت لك لغة HTML5 العديد من
الأنواع المختلفة لعنصر <input>، مثل
type="email" لعنوان بريد إلكتروني أو type="range" لمؤشر التمرير في النطاق.
في حدث CSS Day، حصلنا على 10 أصوات لإضافة المزيد من هذه الأنواع، مثل النطاق المزدوج،
أو الإكمال التلقائي باستخدام قائمة بيانات مخصّصة.
أرقام عشوائية حقيقية في CSS
وكان هناك طلب آخر حصل على 10 أصوات لتوفير أرقام عشوائية حقيقية في CSS. سبق أن تم طلب ذلك وحلّنا المشكلة في السابق باستخدام قيمة عشوائية لanimation-duration.
فئات أسلوب Mixin
أضافت CSS عددًا من الميزات التي كانت متوفّرة سابقًا في CSS المُعالجات المُسبَقة، وهي المتغيّرات التي تحتوي على سمات مخصّصة، والآن "تداخل CSS". ومع ذلك، لم تصبح أدوات الادماج القابلة لإعادة الاستخدام جزءًا من اللغة بعد، ولكن سبعة من ضيوف CSS Day كانوا حريصين على رؤيتها.
تم التصويت على قرار مجموعة عمل CSS لبدء العمل على مواصفات لهذه الميزة، ويمكنك إضافة أفكارك وحالات الاستخدام إلى المناقشة في هذه المشكلة.
الأنماط العامة في النطاق الموازي
هناك مشكلة أخرى تتضمن سلسلة محادثات كبيرة حول حالات الاستخدام، وهي طلب السماح بتطبيق أنماط CSS الشاملة داخل DOM الظلّي، وقد طلب ستة أشخاص ذلك في CSS Day. ستسمح هذه الميزة بتطبيق أنماط إعادة الضبط الشاملة أيضًا في مكوّنات الويب، وتعمل ملفات CSS الفردية على جميع مكوّنات الموقع الإلكتروني. يمكنك الاطّلاع على هذا الملخّص لحالات الاستخدام، وإعلامنا إذا كنت تريد أيضًا الحصول على هذه الميزة.
قسمة الوحدات المختلطة
تم تقديم اقتراح بشأن Interop 2024
يطلب فيه
القدرة على القسمة على وحدات مختلطة، مثل calc(100vw / 1px). وقد تبيّن أنّه
موضوع واسع جدًا بالنسبة إلى Interop 2024، ولكنّ العديد من المطوّرين، بما في ذلك ستة أشخاص في CSS
Day، يريدون تنفيذ هذا الإجراء.
nth-letter
تتضمّن CSS عددًا من العناصر الزائفة التي تعمل كما لو كنت قد لفّت عنصر span حول
قسم من المحتوى. على سبيل المثال، يستهدف العنصر الاصطناعي
::first-letter
الحرف الأول من السطر الأول لحاوية الكتلة
التي يتم تطبيقه عليها.
لا يتوفّر في هذه القائمة ::nth-letter، وقد طلبت
::nth-letter منذ حوالي عشرين عامًا، لذلك
نعلم أنّ هذا الطلب من مطوّري الويب منذ فترة طويلة. في يوم CSS، صوّت ستة أشخاص
لهذه الميزة، ما جعلها آخر الميزات العشر الأكثر طلبًا.
هل توافق على أهم عشر أدوات في CSS Day؟
يهمّنا معرفة رأي جمهور أوسع نطاقًا بشأن هذه المشاكل. هل هناك أي مما يلي ضمن أهم عشر مشاكل بالنسبة إليك؟ إذا لم يكن الأمر كذلك، هل هناك أيّ ميزة أخرى تريد الاطّلاع عليها في CSS وHTML؟ يُرجى إعلامنا من خلال ملء هذا النموذج المختصر وسنلخّص الردود في منشور آخر.