نريد معرفة ملاحظاتك حول حلّ مقترَح لمشكلة ترتيب طرق التنسيق للعناصر بترتيب غير مرتبط بمصدر المستند.
تعمل مجموعة عمل CSS على حلّ المشكلة التي تؤدي إلى ترتيب طريقة التنسيق للعناصر بترتيب غير مرتبط بالمصدر، وبالتالي بترتيب القراءة والتركيز في المستند. توضّح هذه المقالة المشكلة والحل المقترَح، ونريد معرفة ملاحظاتك وآرائك.
المشكلة
يتّبع ترتيب القراءة لمستند HTML ترتيب المصدر. وهذا يعني أنّ قارئ الشاشة سيقرأ المستند كما هو موضّح في المصدر، وسيتبع أيضًا المستخدم الذي يستخدم لوحة المفاتيح للتنقّل في المستند ترتيب المصدر هذا. يكون هذا الترتيب منطقيًا في العادة، ويجب ترتيب مصادر المستند بشكل معقول لعرض المحتوى في وضع القراءة وبرامج قراءة الشاشة وأي جهاز يتضمّن CSS محدودًا. ومع ذلك، يمكن أن تنشئ لغة CSS، وFlexbox وGrid على وجه الخصوص، تنسيقات يحدّد فيها التنسيق ترتيب قراءة مرئيًا يختلف عن المصدر الأساسي.
على سبيل المثال، يؤدي استخدام السمة order في عناصر Flex إلى تغيير ترتيب التنسيق ولكن ليس الترتيب في المصدر.
عند استخدام تنسيق الشبكة، من الممكن أن تؤدي طريقة التنسيق المحدّدة إلى ترتيب علامات التبويب بشكل عشوائي، على سبيل المثال عند استخدام grid-auto-flow: dense، ما يؤدي إلى إنشاء ترتيب عشوائي لتنسيق العناصر.
يمكن للمطوّر أيضًا أن يتسبب في حدوث هذا الانقطاع عن طريق وضع العناصر في الشبكة بترتيب مختلف عن الترتيب المحدّد في المصدر.
الحل المقترَح
تقترح مجموعة عمل CSS حلًا لهذه المشكلة، وتريد الحصول على ملاحظات من المطوّرين ومجتمع تسهيل الاستخدام حول هذا النهج.
اتّباع التنسيقات العشوائية باستخدام reading-order: auto
في الحالات التي تؤدي إلى إنشاء ترتيب عشوائي للتنسيق، مثل استخدام الحزمة الكثيفة في تنسيق الشبكة، قد تحتاج إلى أن يتّبع المتصفّح التنسيق بدلاً من ترتيب المصدر. لكي يحدث ذلك، يجب أن تحتوي عناصر المرونة أو الشبكة على سمة reading-order، مع قيمة auto.
سيؤدي ملف CSS التالي إلى أن يتّبع ترتيب القراءة موضع العناصر التي تم تجميعها بشكل كثيف بسبب grid-auto-flow: dense.
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
اتّباع التنسيقات غير العشوائية باستخدام reading-order-items
في بعض تنسيقات الشبكة والتنسيقات المرنة، يكون ترتيب التنسيق سهل الفهم. على سبيل المثال، في تنسيق مرن يستخدم السمة order لإعادة ترتيب العناصر، يكون هناك ترتيب تنسيق واضح تحدّده السمة order. في التنسيقات الأخرى، يكون من غير الواضح ترتيب التنسيق المثالي، وقد يكون هناك أكثر من خيار واحد ممكن. لذلك، عند اتّباع تنسيقات غير عشوائية، عليك إضافة السمة grid-order-items إلى الحاوية، مع قيم الكلمات الرئيسية التي توضّح هدفك من ترتيب التنسيق.
يعرض المثال التالي تنسيقًا مرنًا باستخدام row-reverse. تحتوي عناصر Flex على reading-order: auto، وحاوية Flex على reading-order-items: flex flow للإشارة إلى أنّنا نريد أيضًا أن يتّبع ترتيب القراءة الاتجاه flex-flow أيضًا، بدلاً من اتّباع ترتيب مرئي (يمكننا الإشارة إليه باستخدام flex visual).
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
في المثال التالي، يتم إنشاء تخطيط شبكة باستخدام grid-template-areas ويتم وضع العناصر بترتيب تخطيط مختلف عن ترتيب المصدر. تُستخدَم السمة reading-order-items للإشارة إلى أنّه يجب اتّباع ترتيب التنسيق، والانتقال إلى كل صف قبل الانتقال إلى الصف التالي. (يشير الرمز grid column إلى الاتجاه المقابل).
.wrapper {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-areas:
"a a b b b b"
"c c d d e e"
"f f g g h h";
reading-order-items: grid rows;
}
.a {
grid-area: a;
reading-order: auto;
}
هل يعني ذلك أنّ ترتيب المصدر لا يهمّ؟
لا، لا يزال ترتيب المصدر مهمًا. يجب عدم استخدام هذه الوظيفة إلا في حالات معيّنة قد يختلف فيها ترتيب القراءة عن المصدر. على سبيل المثال، عند استخدام طرق التنسيق التي يمكن أن تؤدي إلى حدوث هذا الانقطاع، مثل الحزم الكثيفة للشبكة، أو عندما يكون ترتيب التنسيق مختلفًا ومناسبًا عند نقطة فاصل معيّنة.
عند استخدام هذه السمات، أنشئ مستند مصدر باستخدام ترتيب منطقي في حال عرض الصفحة بدون CSS. أضِف هذه السمات فقط في الأماكن التي تتطلّب ذلك وعند نقاط التوقف.
هل يجب أن تطبّق أدوات التأليف هذه السمات؟
إنّ أدوات التأليف التي تتيح للمستخدمين إنشاء تنسيق شبكة من خلال سحب العناصر وإفلاتها، يجب أن تشجعهم على إنشاء مستند مصدر ذي معنى. لذلك، في معظم الحالات، يكون من الأنسب إعادة ترتيب المصدر استنادًا إلى ترتيب التنسيق، بدلاً من استخدام هذه السمات كطريقة سهلة للتعامل مع مشكلة عدم الربط.
يُرجى مشاركة ملاحظاتك بشأن هذا الاقتراح.
نحن حريصون جدًا على جمع الملاحظات والآراء حول هذا الموضوع. على وجه الخصوص، إذا كانت لديك حالة استخدام تعتقد أنّ هذا الإجراء لن يحلّها، أو إذا كانت لديك مشكلة في تسهيل الاستخدام في ما يتعلّق بالنهج، يُرجى إبلاغ مجموعة عمل CSS بذلك.
هناك سلسلة محادثات جارية تتضمّن العديد من حالات الاستخدام والأفكار حول المنهج. هذه السلسلة من الرسائل هي مكان رائع لإضافة أي تعليقات، وتسليط الضوء على المشاكل المحتمَلة في هذا الاقتراح. يُرجى العلم أنّ الاقتراح الحالي يختلف كثيرًا عن الاقتراح الأول الذي بدأ سلسلة المحادثات. قد يستفيد المستخدمون المهتمون من كل المحادثات التي أدّت إلى ما نحن عليه اليوم، لأنّها مثال جيد على كيفية معالجة الاقتراحات في مجموعة عمل CSS ليصبحوا شيئًا يمكن تنفيذه في المتصفّحات.
صورة مصغّرة من إنشاء باتريك توماسو نشكر "كريس هارليسون" و"تاب أتكينز" و"إيان كيلباتريك" على الملاحظات والمراجعات.