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

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

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

المشكلة

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

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

باستخدام تنسيق الشبكة، من الممكن لطريقة التنسيق التي تم اختيارها تغيير ترتيب التنقل بـ Tab، على سبيل المثال عند استخدام 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". تتضمّن العناصر المرنة 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) لتصبح أمرًا يمكن تنفيذه في المتصفحات.

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