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()
، نحصل على شبكة قوية جدًا ومعقدة المظهر وخفيفة الوزن وقادرة على التعامل مع أي عدد من العناصر مع الحفاظ على نمط متوازن وقابل للتكرار.