The :has()
sözde sınıf eller aşağı, en sevdiğim yeni CSS özelliği. En azından çoğunuz için öyle olduğunu biliyorum. State of CSS anketine katılanlarınız. Seçicileri baş aşağı yazma yeteneği bize asla mümkün olduğunu düşünmediğim kadar çok süper güç veriyor.
"Daha fazla süper güç" diyorum çünkü şimdiden bir grup süper zeki insan tarafından yayınlanan bir ton gerçekten harika zekice fikir var, örneğin:
Bu makale kesin bir rehber değildir. :has()
. Ayrıca daha önce söylenenleri yeniden canlandırmak için burada değil. Sadece ben (merhaba 👋) kullanma olasılığımın en yüksek olduğu yollardan bazılarını paylaşmak için bir anlığına çoğunluğa atlıyorum :has()
günlük işlerimde… yani Firefox tarafından resmi olarak desteklendikten sonra hangisi yakın.
Bu olduğunda, kullanmaya başlayacağıma bahse girebilirsiniz :has()
her yerde. İşte son zamanlarda yaptığım ve kendi kendime "Vay canına, bu bir kez çok daha güzel olacak" diye düşündüğüm bazı gerçek dünya örnekleri. :has()
tamamen desteklenmektedir.”
JavaScript bileşeninizin dışına ulaşmak zorunda kalmayın
Bazen sayfanın başka bir yerindeki stilleri etkilemesi gereken etkileşimli bir bileşen oluşturdunuz mu? Aşağıdaki örneği alın, burada <nav>
bir mega menüve açmak renklerini değiştirir. <header>
bunun üzerindeki içerik.
Böyle bir şey yapmam gerekiyormuş gibi hissediyorum her zaman.
Bu özel örnek, bir site için yaptığım bir React bileşenidir. ile sayfanın React kısmının “dışarısına ulaşmak” zorunda kaldım. document.querySelector(...)
ve üzerinde bir sınıf geçiş <body>
, <header>
veya başka bir bileşen. Bu dünyanın sonu değil, ama kesinlikle biraz kötü hissettiriyor. Tamamen React sitesinde (bir Next.js sitesi diyelim) bile, bir menuIsOpen
bileşen ağacında çok daha yükseğe çıkın veya aynı DOM öğesi seçimini yapın - ki bu pek de React-y değildir.
İle :has()
, sorun ortadan kalkar:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
Artık JavaScript bileşenlerimde DOM'un diğer bölümleriyle uğraşmak yok!
Daha iyi tablo şeritleme UX
Tablolarınıza alternatif satır "şeritler" eklemek güzel bir UX geliştirmesi olabilir. Masayı tararken gözlerinizin hangi sırada olduğunuzu takip etmesine yardımcı olurlar.
Ancak deneyimlerime göre, bu sadece iki veya üç sıralı masalarda pek işe yaramıyor. Örneğin, içinde üç satır bulunan bir tablonuz varsa, <tbody>
ve her "çift" satırı "çiziyorsunuz", sonunda sadece bir şerit elde edebilirsiniz. Bu gerçekten bir kalıba değmez ve kullanıcıların vurgulanan satırda neyin bu kadar özel olduğunu merak etmelerine neden olabilir.
Bu tekniği kullanarak nerede Bramus'un kullanımları :has()
çocuk sayısına göre stilleri uygulamak için, diyelim ki üçten fazla satır olduğunda tablo şeritleri uygulayabiliriz:
Ne daha süslü olsun? Bunu yalnızca tabloda en azından belirli sayıda sütun varsa yapmaya da karar verebilirsiniz:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
Şablonlardan koşullu sınıf mantığını kaldırın
Sayfada ne olduğuna bağlı olarak sık sık sayfa düzenini değiştirmem gerekiyor. Ana içeriğin yerleşiminin, bir kenar çubuğu olup olmadığına bağlı olarak ızgara alanlarını değiştirdiği aşağıdaki Izgara düzenini ele alalım.
Bu, CMS'de ayarlanmış kardeş sayfalar olup olmadığına bağlı olabilecek bir şeydir. Normalde bunu koşullu olarak eklemek için şablon mantığıyla yapardım BEM değiştirici sınıfları her iki düzeni de hesaba katmak için düzen sarmalayıcısına. Bu CSS şöyle görünebilir (kısa olması için yanıt veren kurallar ve diğer şeyler çıkarılmıştır):
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar { grid-template-areas: '. m m m m m m m m m . .';
}
CSS açısından, bu elbette gayet iyi. Ancak şablon kodunu biraz dağınık hale getirir. Şablonlama dilinize bağlı olarak, özellikle bunu çok sayıda alt öğeyle yapmanız gerekiyorsa, koşullu olarak bir grup sınıf eklemek oldukça çirkin olabilir.
Bunu a ile karşılaştırın :has()
tabanlı yaklaşım:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) { grid-template-areas: '. m m m m m m m m m . .';
}
Dürüst olmak gerekirse, bu CSS açısından çok daha iyi değil. Ancak bana sorarsanız, koşullu değiştirici sınıfları HTML şablonundan kaldırmak güzel bir kazanç.
için mikro tasarım kararları düşünmek kolaydır. :has()
- İçinde resim olan bir kart gibi - ama bence bu makro düzen değişiklikleri için de gerçekten faydalı olacak.
Daha iyi özgüllük yönetimi
Eğer okursanız son makalem, benim özgüllük konusunda titiz olduğumu bileceksin. Benim gibi, eklerken özgüllük puanlarınızın patlamasını istemiyorsanız :has()
ve :not()
stilleriniz boyunca kullandığınızdan emin olun :where()
.
Bunun nedeni, özgüllüğün :has()
dayanır bağımsız değişken listesindeki en belirgin öğe. Dolayısıyla, orada bir kimlik gibi bir şeye sahipseniz, seçicinizi kademeli olarak geçersiz kılmak zor olacaktır.
Öte yandan, özgüllüğü :where()
her zaman sıfırdır, hiçbir zaman özgüllük puanına ekleme yapmaz.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
Gelecek parlak
Bunlar, üretimde kullanabilmek için sabırsızlandığım birkaç şey. CSS-Tricks Almanac'ın da bir sürü örneği var. ne yapmak için can atıyorsun :has()
? Nerede ne tür gerçek dünya örnekleriyle karşılaştınız? :has()
mükemmel bir çözüm olur muydu?
- SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
- Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. Buradan Erişin.
- Kaynak: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- kabiliyet
- Yapabilmek
- Hakkımızda
- yukarıdaki
- Hesap
- etkiler
- Türkiye
- zaten
- her zaman
- şaşırtıcı
- ve
- Başka
- Tamam
- yaklaşım
- alanlar
- tartışma
- göre
- merkezli
- Çünkü
- Bahis
- Daha iyi
- arasında
- Bit
- üfleme
- yapılı
- Demet
- Alabilirsin
- kart
- şelaleler
- belli
- değişiklik
- değişiklikler
- çocuk
- Klinik
- sınıf
- sınıflar
- cms
- kod
- Sütunlar
- bileşen
- içeren
- içerik
- olabilir
- Kurs
- CSS
- kararlar
- kesin
- bağlı
- Dizayn
- Değil
- yapıyor
- KARAR
- Dont
- aşağı
- elemanları
- özellikle
- vb
- Hatta
- hİÇ
- Her
- örnek
- örnekler
- deneyim
- Gözler
- Favori
- Özellikler(Hazırlık aşamasında)
- az
- ince
- Firefox
- takip etme
- ileri
- itibaren
- tamamen
- almak
- verir
- Goes
- gidiş
- harika
- Grid
- ızgara-şablon-alanları
- rehberlik
- olmak
- sahip olan
- yardım et
- okuyun
- hi
- daha yüksek
- Vurgulanan
- HTML
- HTTPS
- Ben
- fikirler
- görüntü
- iyileşme
- in
- interaktif
- IT
- JavaScript
- sadece bir
- tutmak
- Nezaket.
- Bilmek
- dil
- Soyad
- Düzen
- Muhtemelen
- küçük
- Bakın
- bakıyor
- Çok
- Makro
- yapılmış
- Ana
- yapmak
- yönetme
- çok
- olabilir
- an
- Daha
- çoğu
- mozilla
- gerek
- ihtiyaçlar
- yeni
- sonraki
- Next.js
- normalde
- numara
- Resmi olarak
- ONE
- açma
- Diğer
- dışında
- Bölüm
- belirli
- parçalar
- model
- İnsanlar
- MÜKEMMEL OLAN YERİ BULUN
- yer
- Platon
- Plato Veri Zekası
- PlatoVeri
- mümkün
- mevcut
- güzel
- Sorun
- üretim
- yayınlanan
- ulaşmak
- React
- Okumak
- Gerçek dünya
- geçenlerde
- kaldırma
- duyarlı
- SIRA
- kurallar
- koşmak
- Adı geçen
- aynı
- taramak
- seçim
- set
- paylaş
- yer
- akıllı
- So
- çözüm
- biraz
- bir şey
- bir yerde
- özel
- özel
- özgüllük
- başlama
- Eyalet
- şerit
- Stripes
- stil
- harika
- destekli
- tablo
- Bizi daha iyi tanımak için
- TD
- şablon
- The
- Devlet
- Dünya
- şey
- işler
- düşünce
- üç
- boyunca
- için
- ton
- çok
- TAMAMEN
- iz
- gerçek
- Üst taraf
- us
- kullanım
- kullanıcılar
- ux
- beklemek
- yolları
- Ne
- olup olmadığını
- hangi
- DSÖ
- kazanmak
- merak
- İş
- Dünya
- değer
- olur
- yazmak
- Sen
- zefirnet