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

Rachel Andrew

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

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

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

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

• normal: اتبع ترتيب العناصر في DOM، وهو النموذج الحالي السلوك.
• flex-visual: يسري هذا الإجراء على حاويات العناصر المرنة فقط. يتبع الترتيب المرئي للعناصر المرنة، مع مراعاة وضع الكتابة.
• 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 هذا تجريبيًا في الوقت الحالي، ولكن من الممكن تفعيله. للاختبار. لتجربته، يجب تثبيت إصدار مطوّري البرامج من Chrome أو الإصدار 128 من إصدار 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 التي قد تكون مفيدة للغاية عندما نناقش هذه المشكلة كمجموعة. إذا كانت لديك أفكار حول ما تتوقعه أن يحدث، وهذا مفيد أيضًا. ومع ذلك، الشيء الأكثر أهمية هو معرفة حالات الاستخدام الحقيقية.