نودّ الحصول على ملاحظاتك بشأن حلّ مقترَح لمشكلة ترتيب عناصر طرق التنسيق بترتيب غير مرتبط بمصدر المستند.
يعمل فريق CSS Working Group على إيجاد حلّ للحالات التي يمكن فيها لطريقة التنسيق ترتيب العناصر بترتيب مختلف عن ترتيب المصدر، وبالتالي عن ترتيب القراءة والتركيز في المستند. تشرح هذه المقالة المشكلة والحل المقترَح، ويسرّنا تلقّي ملاحظاتك.
المشكلة
يتبع ترتيب القراءة في مستند HTML ترتيب المصدر. وهذا يعني أنّ قارئ الشاشة سيقرأ المستند كما هو مرتّب في المصدر، وأنّ الشخص الذي يستخدم لوحة المفاتيح للتنقّل في المستند سيتبع أيضًا ترتيب المصدر. عادةً ما يكون هذا الأمر منطقيًا، كما أنّ ترتيب المصدر المعقول للمستند ضروري لعرض المحتوى في "وضع القراءة" وبرامج قراءة الشاشة وأي جهاز يتضمّن CSS محدودًا. ومع ذلك، يمكن أن تنشئ CSS، ونموذج flexbox والشبكة على وجه الخصوص، تخطيطات يحدد فيها التخطيط ترتيب قراءة مرئيًا يختلف عن المصدر الأساسي.
على سبيل المثال، يؤدي استخدام السمة order على العناصر المرنة إلى تغيير ترتيب التنسيق وليس الترتيب في المصدر.
باستخدام التنسيق الشبكي، من المحتمل أن تؤدي طريقة التنسيق المحدّدة إلى تشويش ترتيب علامات التبويب، مثلاً عند استخدام grid-auto-flow: dense، ما يؤدي إلى إنشاء ترتيب تنسيق عشوائي للعناصر.
يمكن للمطوّر أيضًا التسبّب في حدوث هذا الانقطاع من خلال وضع العناصر في الشبكة بترتيب مختلف عن الترتيب المحدّد في المصدر.
الحل المقترَح
تقترح مجموعة عمل CSS حلاً لهذه المشكلة، وترغب في الحصول على ملاحظات من المطوّرين ومجتمع أدوات تسهيل الاستخدام حول هذا النهج.
تنسيقات عشوائية مع reading-order: auto
في الحالات التي تؤدي إلى ترتيب عشوائي للتصميم، مثل استخدام التعبئة الكثيفة في التصميم الشبكي، من المحتمل أنّك تريد أن يتّبع المتصفّح التصميم بدلاً من ترتيب المصدر. لتحقيق ذلك، يجب أن تحتوي عناصر flex أو grid على السمة 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. تحتوي العناصر المرنة على reading-order: auto، ويحتوي الحاوي المرن على 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 Working Group بذلك.
هناك سلسلة محادثات مستمرة تتضمّن العديد من حالات الاستخدام والأفكار حول هذا النهج. تُعدّ سلسلة المحادثات هذه مكانًا رائعًا لإضافة أي تعليقات وإبراز المشاكل المحتملة في هذا الاقتراح. يُرجى العِلم أنّ الاقتراح الحالي يختلف كثيرًا عن اقتراحي الأولي الذي بدأ سلسلة المحادثات. قد يستمتع المهتمون بكل المحادثات التي أدّت إلى ما نحن عليه اليوم، لأنّها مثال جيد على كيفية العمل على المقترحات في "فريق عمل CSS" لتصبح شيئًا يمكن تنفيذه في المتصفحات.
الصورة المصغّرة من إعداد باتريك توماسو. نشكر كلاً من كريس هاريلسون وتاب أتكنز وإيان كيلباتريك على ملاحظاتهم ومراجعتهم.