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

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

Rachel Andrew

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

المشكلة

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

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

انقر على المثال واستخدِم علامة التبويب (Tab) للاطّلاع على كيفية إلغاء ربط ترتيب التنقل بـ Tab من ترتيب التنسيق، باستخدام خاصية "order" (order).

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

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

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

انقر على المثال وانقر على علامة التبويب لمعرفة كيفية إلغاء ربط ترتيب التنقل بـ Tab من ترتيب التنسيق باستخدام خصائص موضع الشبكة.

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

تقترح مجموعة عمل 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. تحتوي العناصر المرنة على 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 ليصبحوا شيئًا يمكن تنفيذه في المتصفّحات.

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