الشبكات الضمنية وأنماط التخطيط القابلة للتكرار والمتدليات

Dave Rupert مع بعض سحر CSS الحديث التي تعالج واحدة من تلك الألغاز الكلاسيكية: ماذا يحدث عندما يكون CSS للمكون غير قادر على التعامل مع المحتوى الذي نطرحه عليه؟

الموقف المحدد هو عندما تتوقع شبكة التخطيط عددًا زوجيًا من العناصر ، ولكن يتم توفيرها برقم فردي بدلاً من ذلك. لقد تركنا مع عنصر "متدلي" في النهاية يلقي بالتخطيط. يبدو أن ما هو مطلوب هو بعض CSS الدفاعية وديف أنجزها.

يصل ل :has() لكتابة مُحدِّد أنيق يستنشق العنصر الأخير في شبكة تحتوي على عدد فردي من العناصر:

.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }

تحطيم ذلك:

• لدينا حاوية أصل من .items.
• إذا كانت الحاوية :has() an .item طفل هو الأخير من نوعه ،
• …وذلك .item تصادف أن يكون مثيلًا ذي رقم فردي ،
• ... ثم حدد الأول .item عنصر من هذا النوع وأسلوبه!

في هذه الحالة ، هذا الأخير .item يمكن ضبطه ليذهب إلى العرض الكامل لمنع الثغرات في التخطيط.

If… then… CSS لها صلاحيات منطقية شرطية! نحن نتحدث فقط عن دعم Safari TP و Edge / Chrome Canary في الوقت الحالي ، لكن هذا رائع جدًا.

حسب الصدفة ، شارك تيماني عفيف مؤخرًا الحيل التي تعلمها أثناء ذلك تجربة الشبكات الضمنية. من خلال الاستفادة من خوارزمية الموضع التلقائي لشبكة CSS ، لا يتعين علينا حتى الإعلان صراحة عن عدد ثابت من الأعمدة والصفوف للشبكة - ستقوم CSS بإنشائها لنا إذا لزم الأمر!

لا ، تقنيات Temani ليست حلولًا بديلة لمعضلة Dave "المتدلية". لكن الجمع بين نهج Temani لأنماط تخطيط الشبكة القابلة للتكرار مع استخدام Dave الدفاعي لـ CSS :has()، نحصل على شبكة قوية جدًا ومعقدة المظهر وخفيفة الوزن وقادرة على التعامل مع أي عدد من العناصر مع الحفاظ على نمط متوازن وقابل للتكرار.