مجموعة عمل CSS في TPAC: ما الجديد في CSS؟

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

ما هو TPAC؟

TPAC هو أسبوع الجلسات الفنية العامة / اجتماعات اللجنة الاستشارية لـ W3C. فرصة لجميع مجموعات العمل المختلفة التي هي جزء من W3C للالتقاء تحت سقف واحد. يقام الحدث في جزء مختلف من العالم كل عام ، وقد أقيم هذا العام في ليون ، فرنسا. في TPAC ، تعقد مجموعات العمل مثل مجموعة عمل CSS اجتماعاتها الخاصة ، تمامًا كما نفعل في أوقات أخرى من العام. ومع ذلك ، نظرًا لأننا جميعًا في مبنى واحد ، فهذا يعني أن الأشخاص من المجموعات الأخرى يمكن أن يأتوا بسهولة كمراقبين ، ويمكن مناقشة اهتمامات مجموعات العمل المشتركة.

الحضور في TPAC هم عادة أعضاء في واحدة أو أكثر من مجموعات العمل التي تعمل على تقنيات W3C. سيكونون إما ممثلين لمنظمة عضو أو خبراء مدعوين. كما هو الحال مع أي اجتماعات أخرى لمجموعات العمل W3C ، ستكون محاضر جميع المناقشات التي عقدت في TPAC متاحة علنًا ، عادةً كسجلات IRC مكتوبة أثناء الاجتماعات.

مجموعة عمل CSS

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

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

فيما يلي مجموعة مختارة من الأشياء التي ناقشناها والتي أعتقد أنها ستكون ذات أهمية قصوى بالنسبة لك.

أشرطة تمرير CSS

تسعى مواصفات CSS Scrollbars إلى إعطاء طريقة قياسية لتصميم حجم ولون أشرطة التمرير. إذا كان لديك Firefox Nightly ، فيمكنك تجربته. للاطلاع على الأمثلة أدناه ، استخدم Firefox Nightly وقم بتمكين تخطيط العلامات layout.css.scrollbar-width.enabled و layout.css.scrollbar-color.enabled من خلال زيارة https://about:config في Firefox Nightly.

تعطينا المواصفات خاصيتين جديدتين: scrollbar-width scrollbar-color . يمكن أن تأخذ خاصية scrollbar-width قيمة auto أو thin أو none أو length (مثل 1em ). يبدو كما لو أن قيمة length يمكن إزالتها من المواصفات. كما يمكنك أن تتخيل ، سيكون من الممكن لمطور الويب إنشاء شريط تمرير غير قابل للاستخدام للغاية من خلال اللعب بالعرض ، لذلك قد يكون من الأفضل السماح للمتصفح بتحديد العرض الدقيق الذي يكون منطقيًا ولكن بدلاً من ذلك يظهر إما نحيفًا أو سميكًا أشرطة التمرير. لم يطبق Firefox خيار الطول.

إذا كنت تستخدم القيمة auto ، فسيستخدم المتصفح أشرطة التمرير الافتراضية: سيعطيك شريط التمرير الرفيع شريط تمرير thin ، ولن يعرض none شريط تمرير مرئي (ولكن سيظل العنصر قابلاً للتمرير).

في المستعرض الذي يدعم CSS Scrollbars ، يمكنك رؤية هذا عمليًا في العرض التوضيحي:

تتعامل خاصية scrollbar-color - كما تتوقع - مع ألوان شريط التمرير. يتكون شريط التمرير من جزأين قد ترغب في تلوينهما بشكل مستقل:

• إبهام
  شريط التمرير الذي يتحرك لأعلى ولأسفل أثناء التمرير.
• مسار
  خلفية شريط التمرير.

قيم خاصية scrollbar-color هي auto ، dark ، light and <color> <color> .

يمنحك استخدام auto كقيمة كلمة رئيسية ألوان شريط التمرير الافتراضية لهذا المتصفح ، وسيوفر dark شريط تمرير مظلمًا ، إما في الوضع المظلم لهذا النظام الأساسي أو في الوضع المظلم المخصص ، أو light وضع الإضاءة للنظام الأساسي أو وضع الإضاءة المخصص .

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

في متصفح يدعم CSS Scrollbars ، يمكنك رؤية هذا في العرض التوضيحي:

وحدات نسبة العرض إلى الارتفاع

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

هناك مشكلتان تم طرحهما على GitHub وتتعلقان بهذا المطلب:

• وحدات نسبة العرض إلى الارتفاع المطلوبة
• ابعاد متزنة.

يوجد الآن مسودة المواصفات في المستوى 4 من تحجيم CSS ، وكان قرار الاجتماع هو أن هذا يحتاج إلى مزيد من المناقشة على GitHub قبل اتخاذ أي قرارات. لذلك، إذا كنت مهتما بهذا، أو لديك حالات استخدام إضافية، فسيكون مجموعة عمل CSS اهتماما بتعليقاتكم على هذه القضايا.

ال :where() الفئة الوظيفية الزائفة

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

:matches() جديدا بالنسبة لك كما هو محدد المستوى 4، فإنه يسمح لك بتحديد مجموعة من المحددين لتطبيق بعض CSS. على سبيل المثال ، يمكنك كتابة:

 .foo a:hover, pa:hover { color: green; }

أو مع :matches()

 :matches(.foo, p) a:hover { color: green; }

إذا كان لديك كومة كبيرة من المحددين فقط من أجل تحديد نفس القواعد نفس القواعد، فسترى مدى فائدة ذلك. يستخدم CodePen التالي الأسماء المسبوقة لـ webkit-any و -moz-any لإثبات وظيفة matches() . يمكنك أيضًا قراءة المزيد عن التطابقات () على MDN.

حيث نفعل ذلك في كثير من الأحيان هذا النوع من تكديس المحددين، وبالتالي فإن المكان :matches() مفيدة للغاية في نوع من أنماط الأرقام الافتراضية الأولية. ومع ذلك، نحتاج ذلك، ثم نحتاج إلى أن نكون حذرين عند الكتابة فوق تلك الإعدادات الافتراضية التي يتم بها أي كتابة عملية تؤدي بطريقة تضمن أنها أكثر تحديدا من الإعدادات الافتراضية. ولهذا السبب تم اقتراح نسخة صفرية الخصوصية.

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

منذ الاجتماع ، وأثناء كتابة هذا المنشور ، تم تقديم اقتراح لإعادة تسمية matches() إلى is() . ألقِ نظرة على المشكلة وعلق إذا كان لديك أي مشاعر قوية في كلتا الحالتين!

الاختصارات المنطقية للهوامش والحشو

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

على سبيل المثال ، بالنسبة للهوامش المادية لدينا:

• margin-top
• margin-right
• margin-bottom
• margin-left

التعيينات المنطقية لهذه (بافتراض أفقي- tb) هي:

• margin-block-start
• margin-inline-end
• margin-block-end
• margin-inline-start

يمكن أن يكون لدينا اثنين من الاختصارات القيمة. على سبيل المثال ، لتعيين margin-block-start و margin-block-end كاختصار ، يمكننا استخدام margin-block: 20px 1em . تمثل القيمة الأولى حافة البداية في بُعد الكتلة ، بينما تمثل القيمة الثانية حافة النهاية في بُعد الكتلة.

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

 @mode "logical";

أو لاستخدام كتلة تشبه إلى حد ما استعلام وسائط:

 @mode (flow-mode: relative) { }

ثم اقتراحات متنوعة لمعدِّلات الكلمات الرئيسية ، باستخدام بعض علامات الترقيم ، أو إنشاء اسم خاصية جديد تمامًا:

 margin: relative 1em 2em 3em 4em; margin: 1em 2em 3em 4em !relative; margin-relative: 1em 2em 3em 4em; ~margin: 1em 2em 3em 4em;

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

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

لم نتمكن من حل المشكلة ، لذلك إذا كانت لديك أفكار حول أي منها قد يكون أفضل ، أو يمكنك رؤية مشاكل معهم لم نصفها ، فيرجى التعليق على المشكلة على GitHub.

مناقشة اختبارات منصة الويب

في اجتماع مجموعة عمل CSS ثم خلال يوم الجلسة العامة الفنية لأسلوب اللامؤتمرات ، شاركت في مناقشة كيفية إشراك المزيد من الأشخاص في كتابة الاختبارات لمواصفات CSS. يهدف مشروع Web Platform Tests إلى توفير اختبارات لجميع منصات الويب. تساعد هذه الاختبارات بائعي المستعرضات على التحقق مما إذا كان متصفحهم صحيحًا من حيث المواصفات. في مجموعة عمل CSS ، الهدف هو أن أي تغيير معياري لمواصفات وصلت إلى حالة توصية المرشح (CR) ، يجب أن يكون مصحوبًا باختبار. هذا منطقي لأنه بمجرد أن تكون المواصفات في CR ، نطلب من المتصفحات تنفيذ تلك المواصفات وتقديم التعليقات. إنهم بحاجة إلى معرفة ما إذا كان أي شيء في المواصفات يتغير حتى يتمكنوا من تحديث التعليمات البرمجية الخاصة بهم.

المشكلة هي أن لدينا عدد قليل جدا من الناس يكتبون المواصفات، لذلك بالنسبة لكتاب المواصفات يجب عليهم كتابة جميع الاختبارات ستباطأ تقدم CSS Down. نحب أن نرى أشخاص آخرين يكتبون الاختبارات، لأنه وسيلة للمساهمة في منصة الويب والاستفادة من معرفة عميقة بكيفية مواصفات العمل. لذلك التقينا لنفكر كيف يمكننا تشجيع الناس على المشاركة في هذا الجهد. لقد كتبت عن هذا الموضوع في الماضي. إذا كانت فكرة كتابة الاختبارات من النظام الأساسي تهمك، إلقاء نظرة على مقالتي ال 24 على "اختبار منصة الويب".

مع العمل!

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

إذا كنت مهتمًا بكيفية عمل مجموعة عمل CSS ، وكيف يتم اختراع CSS الجديد وينتهي به الأمر في المتصفحات ، تحقق من عرض CSSConf.eu لعام 2017 "من أين تأتي CSS؟" والمعلومات الواردة من فانتازاي في منشوراتها "منظر داخلي لمجموعة عمل CSS في W3C".