حل مشكلة إلغاء ربط تنسيق CSS وترتيب المصدر

نودّ الحصول على ملاحظاتك بشأن حلّ مقترح لمشكلة ترتيب العناصر في طرق التنسيق بترتيب غير مرتبط بمصدر المستند.

Rachel Andrew

تعمل مجموعة CSS Working Group على إيجاد حلّ للحالات التي يمكن فيها لطريقة التنسيق ترتيب العناصر بترتيب غير مرتبط بالمصدر، وبالتالي بترتيب القراءة والتركيز في المستند. توضّح هذه المقالة المشكلة والحلّ المقترَح، ويسرّنا تلقّي ملاحظاتك.

المشكلة

يتبع ترتيب القراءة في مستند HTML ترتيب المصدر. وهذا يعني أنّ قارئ الشاشة سيقرأ المستند كما هو معروض في المصدر، وأنّ الشخص الذي يستخدم لوحة المفاتيح للتنقل في المستند سيتبع أيضًا ترتيب المصدر. عادةً ما يكون هذا الإجراء منطقيًا، كما أنّ ترتيب المصدر المعقول للمستند ضروري لعرض المحتوى في "وضع القراءة" وبرامج قراءة الشاشة وأي جهاز يتضمّن CSS محدودًا. ومع ذلك، يمكن أن تنشئ لغة CSS، وخاصةً flexbox وgrid، تنسيقات يحدّد فيها التنسيق ترتيب قراءة مرئيًا يختلف عن المصدر الأساسي.

على سبيل المثال، يؤدي استخدام السمة order على العناصر المرنة إلى تغيير ترتيب التنسيق وليس الترتيب في المصدر.

انقر على المثال واستخدِم مفتاح Tab للتنقّل بين العناصر لمعرفة كيف أنّ ترتيب علامات التبويب منفصل عن ترتيب التنسيق، وذلك باستخدام السمة `order`.

باستخدام تخطيط الشبكة، من المحتمل أن تؤدي طريقة التخطيط المحدّدة إلى تشويش ترتيب علامات التبويب، مثلاً عند استخدام grid-auto-flow: dense، ما يؤدي إلى إنشاء ترتيب تخطيط عشوائي للعناصر.

انقر على المثال واستخدِم مفتاح Tab للتنقّل بين العناصر لمعرفة كيف تم فصل ترتيب علامات التبويب عن ترتيب التصميم، وذلك من خلال ترتيب العناصر في شبكة بشكل غير منتظم.

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

انقر على المثال واستخدِم مفتاح Tab للتنقّل بين العناصر لمعرفة كيف يتم فصل ترتيب علامات التبويب عن ترتيب التنسيق باستخدام خصائص موضع الشبكة.

الحل المقترَح

تقترح مجموعة عمل 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 بذلك.

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

الصورة المصغّرة من إعداد باتريك توماسو. نشكر كلاً من كريس هاريلسون وتاب أتكنز وإيان كيلباتريك على ملاحظاتهم ومراجعتهم.