طلب الحصول على ملاحظات المطوّرين حول مسار القراءة والعناصر التي تتضمّن سمة العرض: المحتوى

Rachel Andrew

في العام الماضي، نشرنا مشاركة المدونة حلّ مشكلة عدم تطابق تنسيق CSS وترتيب المصدر. يوضّح هذا الاقتراح بالتفصيل ما تتم مناقشته في مجموعة عمل CSS، ويهدف إلى حلّ المشكلة التي تؤدي إلى انقطاع تجربة التنقل باستخدام مفتاح التبويب عند إعادة ترتيب العناصر في المربّع المرن والشبكة. يوضّح القسم الافتتاحي من هذا المنشور المشكلة التي تحاول المجموعة العاملة حلّها. وقد سارت الأمور منذ ذلك الحين، وتقدم هذه المشاركة تحديثًا موجزًا للمكان الذي نحن فيه الآن. لدينا أيضًا مجال محدّد نحتاج فيه إلى معرفة ملاحظاتك: كيف نتعامل مع العناصر التي تحتوي على display-contents؟

تعديلات على الاقتراح

يتوفّر الآن نص مسودة المواصفات في مواصفات CSS Display Level 4. يعرِض هذا الإجراء موقعًا جديدًا يُسمى reading-flow. تتم إضافة هذه السمة إلى العنصر الذي يحتوي على تنسيق شبكة أو مرن (العنصر الذي يحتوي على display: grid أو display: flex).

يقبل الحقل القيم التالية:

• normal: اتّبِع ترتيب العناصر في DOM، وهو السلوك الحالي.
• flex-visual: لا يتم تطبيقها إلا على الحاويات المرنة. يتّبع ترتيب القراءة المرئية لعناصر Flex، مع مراعاة وضع الكتابة.
• flex-flow: لا يتم تطبيقها إلا على الحاويات المرنة. يتّبع اتجاه تدفق المرونة .
• ‫grid-rows: لا يسري هذا الخيار إلا على حاويات الشبكة. يتّبع الترتيب المرئي لعناصر الشبكة حسب الصف، مع مراعاة وضع الكتابة.
• ‫grid-columns: لا يسري هذا الخيار إلا على حاويات الشبكة. يتبع الترتيب المرئي لعناصر الشبكة حسب العمود، مع أخذ وضع الكتابة في الاعتبار.
• grid-order: لا يسري هذا الخيار إلا على حاويات الشبكة. تأخذ السمة order في الاعتبار، وتعمل بخلاف ذلك مثل normal.

على سبيل المثال، إذا كان لديك ثلاثة عناصر مرنة في حاوية، وضبطت flex-direction على row-reverse، سيتم وضعها في ترتيب من نهاية الحاوية المرنة، وينتقل ترتيب التنقل بـ Tab من اليمين إلى اليسار.

.flex {
  display: flex;
  flex-direction: row-reverse;
}

أضِف flex-flow: visual، وسيتبع تدفق القراءة الترتيب المرئي في الإنجليزية، وبالتالي من اليسار إلى اليمين.

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

في تنسيقات الشبكة، استخدِم reading-flow لاتّباع الصفوف أو الأعمدة المرئية بدلاً من ترتيب المصدر. في المثال التالي، يتّبع مسار القراءة صفوف الجدول.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-areas: "d b b"
                       "c c a";
  reading-flow: grid-rows;
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }

جرّبه الآن

هذه الخاصية في CSS تجريبية حاليًا، ولكن يمكن تفعيلها للاختبار. لتجربة هذه الميزة، ثبِّت الإصدار 128 من Chrome Dev أو Canary أو إصدار أحدث، وفعِّل علامة وقت التشغيل CSSReadingFlow. في ما يلي بعض الأمثلة لمساعدتك على البدء، والتي تعمل جميعها في Canary مع تفعيل العلامة.

لا يزال السلوك الخاص بطلبات display: contents قيد التطوير وقد يتغيّر استنادًا إلى الملاحظات التي تقدّمها بعد قراءة القسم التالي من هذه المشاركة.

العناصر التي تحتوي على display: contents ومكونات الويب

هناك مشكلة عالقة على مجموعة عمل CSS تحديد كيفية التعامل مع الموقف الذي يكون فيه أحد العناصر الفرعية لعنصر يتضمّن مسار قراءة يحتوي على display: contents، وكذلك الحال إذا كان العنصر <slot>.

في المثال التالي، تحتوي عناصر <div> على display: contents. ونتيجةً لذلك، تتم ترقية جميع عناصر <button> للمشاركة في تنسيق المرن، وبالتالي يراعي reading-flow ترتيبها.

 .wrapper {
   display: flex;
   reading-flow: flex-visual;
 }

<div class="wrapper">
   <div style="display: contents" id="contents1">
     <button style="order: 3" id="o3">3</button>
     <button style="order: 1" id="o1">1</button>
     <div style="display: contents" id=contents2>
       <button style="order: 4" id="o4">4</button>
       <button style="order: 2" id=o2>2</button>
     </div>
   </div>
 </div>

نريد معرفة ما إذا كانت لديك أي أمثلة من الواقع تؤدي إلى حدوث المشكلة المعروضة في هذا المثال. هل سبق لك أن احتجت إلى إعادة ترتيب العناصر داخل عنصر يحتوي على display: contents مع عناصر ليست أخوة، بسبب أنّها أخوة للعنصر الذي يحتوي على display: contents؟

بالإضافة إلى ذلك، أثناء عملنا على حلّ المشاكل المتعلّقة بـ display: contents، سيكون من المفيد الاطّلاع على أي أمثلة قد تحتاج فيها إلى استخدام السمة reading-flow مع display: contents. سيساعدنا فهم حالات الاستخدام التي تواجهها في العالم الواقعي في تصميم حل يلبي احتياجاتك.

أضِف حالات الاستخدام إلى مشكلة فريق عمل CSS. إذا كانت لديك أمثلة على المواقع الإلكترونية المنشورة أو كان بإمكانك إنشاء عرض توضيحي على CodePen أو JSFiddle، سيكون ذلك مفيدًا جدًا عند مناقشة هذه المشكلة كمجموعة. إذا كانت لديك أفكار حول ما تتوقّع حدوثه، قد يكون ذلك مفيدًا أيضًا. ومع ذلك، فإنّ أهم شيء هو الاطّلاع على حالات الاستخدام الفعلية.