Hey, siz harika geliştiriciler oradasınız! Bu yazıda kullanımını inceleyeceğiz. :has() bir sonraki web projenizde. :has() nispeten yenidir ancak kullanıcı arayüzünüzdeki çeşitli öğeler üzerinde kontrol sağlayarak ön uç topluluğunda popülerlik kazanmıştır. Şimdi sözde sınıfın ne olduğuna ve onu nasıl kullanabileceğimize bir göz atalım.

Sözdizimi

The :has() CSS sözde sınıfı, içinde aradığımız herhangi bir şeyin bulunması ve hesaba katılması durumunda, bir öğenin stillendirilmesine yardımcı olur. Sanki şunu söylemek gibi: "Bu kutunun içinde belirli bir şey varsa, kutuyu bu şekilde VE yalnızca bu şekilde şekillendirin."

:has(<direct-selector>) {
  /* ... */
}

Stil Sorunu

Geçmiş yıllarda, bir ebeveyn öğesini CSS ile o ebeveynin doğrudan çocuğuna veya başka bir öğeye dayalı bir öğeye dayalı olarak şekillendirmenin hiçbir yolu yoktu. Bunu yapmak zorunda kalmamız durumunda, bazı JavaScript kullanmamız ve HTML yapısına göre sınıfları açıp kapatmamız gerekecekti. :has() bu sorunu çözdü.

Diyelim ki 1. düzey bir başlık öğeniz var (h1) bu, bir blog listesi sayfasındaki bir yazının veya buna benzer bir şeyin başlığıdır ve ardından 2. düzey bir başlık düzeyine sahip olursunuz (h2) doğrudan onu takip eder. Bu h2 yazının alt başlığı olabilir. Eğer h2 mevcut, önemli ve doğrudan sonra h1h1'in öne çıkmasını isteyebilirsiniz. Daha önce bir JS işlevi yazmanız gerekirdi.

Eski Okul Yolu – JavaScript

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

Bu JS işlevi, sahip olan tüm h1'leri arıyor. h2 devam etmek ve bir vurgu içeriği sınıfı uygulamak h1 önemli bir makale olarak öne çıkıyor.

Günümüzün CSS'sinin sıcak bir şekilde gelmesiyle yeni ve geliştirilmiş! Tarayıcıda yapabileceklerimizin yetenekleri uzun bir yol kat etti. Artık geleneksel olarak JavaScript ile yapmamız gereken şeyleri yapmak için CSS'nin avantajlarından yararlanabiliriz; her şeyi değil ama bazı şeyleri.

Yeni Okul Yolu – CSS

h1:has(+ h2) {
    color: blue;
}

Üzerine Biraz :has() Atın!

Şimdi kullanabilirsiniz :has() JS işlevinin yaptığı şeyin aynısını başarmak için. Bu CSS herhangi bir h1'i kontrol ediyor ve kardeş birleştirici hemen ardından gelen ve metne mavi rengini ekleyen h2'nin kontrol edilmesi. Aşağıda ne zaman kullanıldığına dair birkaç kullanım örneği verilmiştir: :has() kullanışlı gelebilir.

:Seçici Örnek 1'e sahiptir

HTML

<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
	<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

	<h1>This is a test</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

CSS

h1:has(+ h2) {
    color: blue;
}

:Seçici Örnek 2'e sahiptir

Biz web çalışanları olarak çoğu zaman görselleri manipüle ediyoruz veya resimlerle çalışıyoruz. Şu araçları kullanıyor olabiliriz: Bulutsu görsellerimizde çeşitli dönüşümlerden faydalanmamızı sağlar, ancak genellikle alt gölgeler, kenarlık yarıçapları ve başlıklar eklemek isteriz (alt özelliğindeki alternatif metinle karıştırılmamalıdır).

Aşağıdaki örnek kullanılıyor :has() Bir şeklin veya görselin figcaption öğesi olup olmadığını görmek için ve eğer varsa, görselin öne çıkmasını sağlamak için bir miktar arka plan ve kenarlık yarıçapı uygular.

HTML

<section>
	<figure>
		<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
		<figcaption>My Aunt Sally's Doggo</figcaption>
	</figure>
</section>

CSS

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

Yapabilirmiyim :has() o?

Görebilirsin :has() modern tarayıcılarda mükemmel desteğe sahiptir.

:has() toplulukta!

Akranlarımın nasıl kullandığını görmek için Twitter'daki ağıma ulaştım :has() günlük işlerinde ve bu konuda söylemeleri gereken şey buydu.

svg:has(> #Mail) {
  stroke-width: 1;
}

Topluluk üyelerinin gerçek dünya sorunlarını çözmek için modern CSS'yi nasıl kullandıklarını görmek harika ve aynı zamanda erişilebilirlik nedeniyle bunu kullanan Abbey'e de teşekkür ederiz!

Dikkatli Olmanız Gerekenler

Kullanırken akılda tutulması gereken birkaç önemli nokta vardır. :has() Referans verilen madde işaretleri MDN.

• Sözde sınıf, argümanındaki en spesifik seçicinin özgüllüğünü üstlenir
• Eğer :has() sözde sınıfın kendisi bir tarayıcıda desteklenmiyorsa, seçme bloğunun tamamı başarısız olacaktır. :has() bağışlayıcı bir seçici listesindedir, örneğin :is() ve :where()
• The :has() sözde sınıf başka bir sınıfın içine yerleştirilemez :has() 
• Sözde öğeler aynı zamanda geçerli seçiciler değildir. :has() ve sözde elemanlar geçerli çapalar değildir :has()

Sonuç

gibi gelişmiş özellikler de dahil olmak üzere CSS'nin gücünden yararlanma :has() sözde sınıf, olağanüstü web deneyimleri oluşturmamızı sağlar. CSS'nin güçlü yönleri, kademesinde ve özgüllüğünde yatmaktadır; en iyi kısmı, onun tüm potansiyelinden yararlanmamıza olanak sağlamasıdır. CSS'nin yeteneklerini benimseyerek web tasarımını ve geliştirmeyi ileriye taşıyabilir, yeni olanakların kilidini açabilir ve çığır açan kullanıcı arayüzleri yaratabiliriz.

Bağlantılar:

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• PlatoData.Network Dikey Üretken Yapay Zeka. Kendine güç ver. Buradan Erişin.
• PlatoAiStream. Web3 Zekası. Bilgi Genişletildi. Buradan Erişin.
• PlatoESG. karbon, temiz teknoloji, Enerji, Çevre, Güneş, Atık Yönetimi. Buradan Erişin.
• PlatoSağlık. Biyoteknoloji ve Klinik Araştırmalar Zekası. Buradan Erişin.
• Kaynak: https://css-tricks.com/the-power-of-has-in-css/