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

Rachel Andrew

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

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

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

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

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

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

.flex {
  display: flex;
  flex-direction: row-reverse;
}
المسار التلقائي للعناصر المرنة مع row-reverse.

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

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}
باستخدام 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; }
باستخدام reading-flow: grid-rows.

جرِّبه الآن

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