Bazı modern CSS büyüsü ile Dave Rupert bu klasik bilmecelerden birini ele alıyor: Bileşen için CSS, ona attığımız içeriği kaldıramadığında ne olur?
Özel durum, bir yerleşim ızgarasının çift sayıda öğe beklediği, ancak bunun yerine tek bir sayı ile sağlandığı durumdur. Sonunda, düzeni bozan "sarkan" bir öğe kaldı. İhtiyacın olan şey biraz gibi görünüyor Savunma CSS'si ve Dave bunu başarır.
o ulaşır :has() tek sayıda öğe içeren bir ızgaradaki son öğeyi koklayan şık bir seçici yazmak için:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Bunu kırmak:
- Bir ana kapsayıcımız var
.items. - eğer konteyner
:has()an.itemtürünün son örneği olan çocuk, - …ve şu
.itemtek sayılı bir örnek olur, - …sonra ilkini seçin
.itembu türden bir öğe ve stil verin!
Bu durumda, bu son .item düzende delikleri önlemek için tam genişliğe ayarlanabilir.
Eğer… o zaman… CSS'nin koşullu mantık güçleri var! Şu anda yalnızca Safari TP ve Edge/Chrome Canary desteğinden bahsediyoruz, ancak bu oldukça harika.
Tesadüf eseri Temani Afif geçtiğimiz günlerde öğrendiği püf noktalarını paylaştı. örtük ızgaralarla deneme. CSS Grid'in otomatik yerleştirme algoritmasından yararlanarak, bir ızgara için açıkça sabit sayıda sütun ve satır bildirmemize bile gerek kalmaz - CSS, gerekirse bunları bizim için oluşturur!
Hayır, Temani'nin teknikleri Dave'in “sarkan” ikilemine alternatif çözümler değil. Ancak Temani'nin tekrarlanabilir ızgara düzeni modellerine yaklaşımını Dave'in defansif CSS kullanımıyla birleştirir. :has(), hafif olan ve dengeli, tekrarlanabilir bir deseni korurken herhangi bir sayıda öğeyi işleyebilen oldukça güçlü ve karmaşık görünümlü bir ızgara elde ediyoruz.
