tarihinde Fatih Hayrioğlu

CSS’de en çok ihtiyaç duyduğumuz özelliklerden birisiydi ebeveyn (parent) seçicisi. Bir ögenin içindeki elemana olup bitene göre CSS tanımı yapma isteği uzun süredir beklenen bir özellikti. Daha önceleri şöyle bir savunma vardı: Tarayıcılar CSS’i yorumlarken dokümanı aşağı yönlü yorumluyor, bundan ötürü bir elemanın yukarı yönlü elemanını seçmesi için tüm ebeveynlere erişmesi gibi durumlar söz konusudur ve bu performans açısından sıkıntılara neden olur. Tabi tarayıcılar son yıllarda ciddi gelişim gösterdi ve bu kabulleri de aşacak çözümleri sunmaya başladılar.

Ebeveyn seçicisi aslında çoğu zaman ihtiyacımız olan bir seçici olmasa da lazım olduğunda ‘ah be olsaydı ne güzel olurdu’ diye içimizden geçirdiğimiz bir seçici.

Nasıl kullanılır?

:has() ebeveyn seçicisi nasıl kullanılır? Örnekle anlaşılması daha kolay olacak.

// cocuklu aile
<div class="aile">
	<div>
		<div class="cocuk"></div>
	</div>
</div>

// cocuksuz aile
<div class="aile"></div>

Yukarıdaki kodda çocuklu ailelere özel kampanya yapmak istersek :)

.aile:has(.cocuk) {
	animation: partiZamani 21s linear;
}

Yukarıdaki kodda hedef .aile elemanı koşul ise .cocukvar mı? yok mu? Koşulun gerçekleştiği durumda tanım uygulanacak.

Tablo örneği

:has() seçicisini duyalı çok oluyor ancak uygulama imkanı yakın zamanda oldu. Aşağıdaki örnekte gördüğünüze benzer bir tablo ihtiyacımız oldu. Burada javascript ile seçim yapıldığında o tablo satırına bir css sınıfı tanımlayarak olabilirdi. Tabi bir işi CSS ile yapmak daha kolay ve mantıklı.

Kodun can alıcı noktası

tbody tr:has(input:checked) td {
  background: #636363;
  color: #fff;
}

Burada input işaretlenmiş tablo satırına tanım yaparak ihtiyacımızı karşıladık.

<figure> örneği

:has() seçicisini anlatırken verilen en popüler örnek: Bir <figure> elemanımızın olduğunu düşünelim. Bu elemanın bazen sadece resim içerirken bazen resim ve <figcaption> içeren çeşitlerinin olduğu durumlar var. Biz <figcaption> olduğu durumlar için. stil tanımlaması yapmak istesek.

figure:has(figcaption) {
  background: white;
  padding: 10px;
}

Kodu ile <figcaption> içeriği olan <figure> elemanına beyaz ardalan ve padding veriyoruz.

Form doğrulama örneği

Bir diğer popüler örnekte form doğrulam için :has() seçicisinden yararlanma örnekleri. Form elemanlarının doğrulaması için CSS sözde sınıflarını :invalid ve :valid kullanıyoruz ancak bu seçicileri kullanarak üstündeki ve öncesindeki elemanlara erişemediğimiz için sorun yaşıyorduk. :has seçicisi burada yardımımıza koştu.

Burada daha önce :focus-within tanımı yazısındaki formu alalım ve buraya e-posta alanı ekleyelim. E-posta kontrolü sonucu hatalı ise farklı bg ve etiketin başına x işareti koyalım.

Burada dikkat etmemiz gereken kısım kodun sonu

label:has(+ input:invalid)::before {
  content: '✖ ';
  color: #ff0024;
}

Hatalı input öncesinde gelenlabel elemanına hata durumunda x işareti ekliyoruz.

Not: Ebeveyn seçicisi sadece üst elemana değil daha önce erişemediğimiz aynı seviye önceki kardeş seçiciye de erişme imkanı sağlıyor.

Bir diğer kod

form:has(input:invalid)::after {
  box-shadow: inset 0 0 60px whitesmoke, inset 20px 0 80px #ff0024, inset -20px 0 80px #ff8f00, inset 20px 0 300px #ff0058, inset -20px 0 300px #ffc200, 0 0 50px #fff, -10px 0 80px #ff004a, 10px 0 80px #ff5b00;
}

Hatalı input’un ebeveyni olan form elemanının ardalanına kırmızı tonlu bir ardalan tanımlıyoruz.

Izgara (grid) örneği

Grid özelliği tanımlanan bir elemanın birincil derecedeki tüm elemanları grid ögesi olur. Grid ögelerinin davranış ve durumuna göre kapsayıcı gride tanım yapmak :has() seçicisi çıkana kadar CSS ile yapmak imkansızdı.

:nth-child ve :nth-last-child sözde sınıfları yardımıyla ve de :has() seçicisinin gücüyle bir grid içeriğinde 2 adet eleman varsa ona göre kod, 3 tane eleman varsa ona göre kod yazabiliyoruz artık.

.grid:has(:nth-child(2):last-child) {
  grid-template-columns: 1fr 1fr;
}

İçinde iki adet öge bulunan bir kapsayıcı gridi yukarıdaki şekilde yakalayıp iki kolonlu bir yapı kurabiliriz. Aynı şekilde

.grid:has(:nth-child(3):last-child) {
  grid-template-columns: 1fr 1fr 1fr;
}

İçinde üç adet öge bulunan kapsayıcı elemana tanım yapabiliriz.

Dört ve fazlası için de

.grid:has(:nth-child(n+4)) {
  grid-template-columns: repeat(4, 1fr);
}

Gerçekten hayat kurtaracak özellik.

Örnekleri çoğaltmak gayet mümkün. Kaynakların altında farklı tip örnekleri paylaşıyorum. Bu örneklere bakarak ufkumuz açılıyor.

Sonuç

Tarayıcı desteği konusunda Firefox hariç tüm tarayıcıların desteği var. Firefox’un çalışmaları var ama henüz tam destek gelmedi. Bu sene sonuna kadar gelmesini bekliyorum.

CSS’in son senelerdeki gelişmelerini heyecanla takip ediyorum. Bayram çocuğu gibi mutlu hissettiriyor. :)

Kalın sağlıcakla.

Kaynaklar

Örnekler

tarihinde Fatih Hayrioğlu

Bir önceki yazımdan CSS iç içe (nesting) yazım sonra ilk akla gelen sorulardan bir tanesi acaba SASS ile yolları ayırma vakti geldi mi?

Yazı genelinde SASS olarak belirteceğim ancak benzer şeyler diğer CSS önişlemcileri (LESS, Stylus, PostCSS) için de geçerli. PostCSS belki bunlardan ayrı tutulabilir. PostCSS modüler olarak sadece istediğiniz özelliği kullanma imkanı sağlıyor.

CSS önişlemcilerinin bizlere sağladığı avantajları sıralarsak

  • Değişkenler: Değişkenlerden daha yetenekli Custom Properties CSS’e geldi. CSS Değişkenleri (Custom Properties)
  • İç içe yazım avantajı: Bir iki ufak dezavantajı olsa da avantajları ile CSS’e iç içe yazım geldi. CSS iç içe (nesting) yazım
  • Mixins ve placeholder: Yeterli olmasa da aşağıda bahsettiğim bir alternatif çözüm var.
  • Renk çözümleri: Yeni renk tanımı ve fonksiyonlarıyla bu özellikler CSS’e de geldi/geliyor. color-mix(), lch()
  • Matematiksel işlemler: Tümü olmasa da büyük çoğunluğu CSS’e de geldi. calc(), clamp(), min(), max(), vd.
  • Döngüler, koşul kullanımı ve map.get: Şuanlık eksik.

Mixin için alternatif çözüm Chris Coyier attığı örnek ile ufkumuzu açtı.

SASS ile aradaki farklar

SASS ile alıştığımız kullanımdan farklılıklar. Aradaki farkları bilirsek geçişlerde nasıl bir yol izlememiz gerektiğine daha doğru karar veririz.

1. HTML elementleri & ile kullanmak

HTML elementlerini iç içe kullanırken &kullanmak gerekiyor. Firefox’un da öncü olduğu yeni standartlar ile bu fark ortadan kalkacak.

2. BEM desteği

BEM gibi yapılarda kullanmaya alışık olduğumuz &__ gibi yapıları birleştirme desteği yok.

3. Etkinlik (Specifity) sorunu

CSS iç içe yazımının SASS’a göre bir başka farkı, iç içe kullanılan seçiçileri :is() ile sarması. Sass ise bu seçicileri kopyalayıp yapıştırılmış gibi ayrı ayrı kullanır.

4. Çoklu satır yorum

Önceki makaleyi yazdıktan sonra bir tane daha fark buldum SASS ile çoklu satır yorum yazılabilirken CSS’de tek satır yorum yazıla biliyor.

5. import

CSS’de import var ancak asenkron çalışmadığı için çok tercih edilmiyor. Ancak biz bu dosyaları genelde webpack, vite gibi araçlarla kullandığımız için çok aramıyoruz ancak böyle bir araç ile kullanmayanlar için sorun olabilir orada da ESBuild ile bir çözüm olduğundan bahsediliyor.

Sonuç

Genel hatlarıyla CSS önişlemcilerin (SASS, LESS, Stylus, PostCSS) sağladığı bir çok avantaj CSS’de bulunuyor artık. Ben yazdığım SASS kodlarını inceledim büyük çoğunluğunda değişken, iç içe tanım, matematiksel işlemler yer alıyor. mixin, for, if else ve map-get gibi kullanımlara çok nadiren başvuruyoruz.

Tabi burada mevcut projelerimizde SASS’dan CSS’e geçmenin bir maliyeti olacağını unutmayalım. Yukarıda yazdığım SASS ile farklar kısmındaki değişiklikleri tek tek düzenlemek gibi bir iş çıkacaktır.

Daha önce jQuery’nin sonu mu geldi? yazısında da bahsettiğim gibi teknolojilerin / araçların savunucusu olmayın bu araçlar sizin işlerinizi kolaylaştırmak için var. İşinizi gördüğü müddetçe kullanın, ihtiyaç kalmadığında ise bırakmasını da bilin.

SASS’ın bırakılması için erken bence iç içe kullanımın tüm tarayıcılarda tam desteği 4-5 ay alacaktır. O zaman değerlendirilebilir.

Kaynaklar

tarihinde Fatih Hayrioğlu

CSS son yıllarda etkisini arttırarak büyüyor. Benzer gelişmeyi Javascript topluluğunda yaşamıştık. Bu kısmı biraz açarsam jQuery gibi geliştiricilerin hayatını kolaylaştıran ve sorun çözen kütüphanelerin geliştirme hızına kattıkları değerleri Javascript bünyesine katan topluluk Javascript ekosisteminin büyümesini ve gelişmesini sağladı. Benzer bir durumu CSS’de görüyoruz. SASS, LESS gibi önişlemcilerin geliştiricilere sağladığı geliştirme hızını arttırıcı özellikleri tek tek CSS’in kendi özünde benimsemesi CSS’i büyütüyor. Bu sürecin son 2 senedir hızlanarak devam ettiğini görüyoruz. Son olarak bu gelişmelere büyük bir katkı yapacak olan CSS iç içe yazım desteğinin gelmesini gösterebiliriz.

CSS yazarken çok fazla tekrara düştüğümüzü ve çözüm olarak farklı şeyler denediğimizi biliyoruz. Bu soruna net çözümü CSS önişlemcileri (preprecessor) getirdi. SASS, LESS, Stylus, PostCSS bu konuda hala bizlere iç içe yazım sayesinde avantaj sağlıyor. Bu kolaylık artık CSS ile yapabiliyoruz. Benim en çok beklediğim özellikti bu. Nihayet Safari, Chrome, Edge, Opera ve son olarak Firefox desteklerini açıkladılar. Benim tahminim yaklaşık 6-8 ay sonunda bu özelliği kod düzenimiz içinde kullanabileceğimiz.

İç içe yazımın avantajları

Twitter’da iç içe yazımla ilgili paylaşımların altında yorum olarak “Niye iç içe css yazalım? Ne avantajı var?” diye soranlar oldu. Biraz da bu sorulara cevap olarak avantajlarını yazalım.

  1. Daha modüler ve düzenlenebilir CSS kodu yazmamızı sağlar. Farklı yerlerde aynı seçiciye yapılan tanımların önüne geçip daha derli toplu ve daha az hataya neden olan kodlar üretmemizi sağlar.
  2. Tekrar tekrar aynı seçiçi isimleri yazmayı önler. Düzen ve performans kazandırır.
  3. Medya sorularında tekrarlar kodu okunmaz hale getiriyor. İç içe yazım bu karmaşayı giderip daha düzenli medya sorguları yazmamıza olanak sağlar.

CSS iç içe yazım serüveni

Uzun zamandır bu konu gündem de olmasına rağmen tarayıcıların desteğinin daha yeni açıklanması işin kolay olmadığını gösteriyor.

Konunun devamını getirmeden hemen ilk yaptığım örneği paylaşayım sizlerle

Yukarıdaki kodu görebilmeniz için tarayıcınızın bu özelliği desteklemesi gerekiyor.

CSS’e iç içe tanımı getirmek isteyen tarayıcılar bazı sorunlarla karşılaştılar. Nasıl bir iç içe kullanım olacağı konusunda kafası karışık olan tarayıcı geliştiricileri çareyi bu soruyu geliştiricilere sorarak çözme yoluna gittiler. Safari ve Chrome geliştiricileri iki farklı anket ile geliştiricilerden hangi seçeneğin tercih edileceğini sordular.

Tabi insanların büyük çoğunluğu SASS kullanımına yakın olan seçenek 3‘ü %86 oy ile kazandırdı. Bundan sonra tarayıcı geliştiriciler hızlı bir şekilde entegre edip yakın zamanda duyurusunu yaptılar.

ul {
	border: 1px solid red;
	li {
		border: 1px solid blue;
	}
}

Böyle değilde & işareti ile kullanım destekleniyor.

ul {
	border: 1px solid red;
	& li {
		border: 1px solid blue;
	}
}

Burada tarayıcılar HTML elemanlar için bu tip bir kullanımın tarayıcıları üzmeyeceğine karar verip öyle standartlaştırdılar.

Önemli Not: LeaVerou SASS’taki gibi kullanım için W3C’de bir iş açtı ve kabul gördü. Firefox bu standartla çıkacak. Yani HTML elemanlar için & kullanım zorunluluğu kalkacak.

Aşağıdaki diğer kullanımlar SASS’da kullandığımız gibi.

Sözde element ve sınıfların kullanımı da benzer

a {
	&:hover {
		background-color: lightgreeen;
	}

	&:focus {
		background-color: lightgreeen;
	}
}

CSS önişlemciler gibi parent seçici kullanımı da mevcut

h2 {
  .ebeveyn & {
    background-color: lightgreen;
  }
}

Bu kod şöyle bir etkisi olacaktır.

.ebeveyn h2 {
	background-color: lightgreen;	
}

En çok ihtiyaç duyduğumuz alanlardan birisi de medya sorguları ile kullanımı.

body {
    background-color: gray;

    @media (min-width: 600px) {
        background-color: purple;
    }
}

SASS ile aradaki farklar

SASS ile alıştığımız kullanımdan farklılıklar. Burada yeni bir gelişme ilk ve önemli bir sorunu yakın zamanda çözdü W3C.

1. HTML elementleri & ile kullanmak

Yukarıda bahsettiğim gibi Firefox hariç diğer tarayıcıların da bu yeni standardı seçmeleri sonrası düzelecek bir sorun.

2. BEM gibi yapılarda kullanmaya alışık olduğumuz &__ gibi yapıları birleştirme desteği yok.

.block {
  &__element {
    // .block__element { ... }
  }
}

Yukarıdaki gibi bir birleştirmeyi SASS’daki gibi yapmıyor.

3. Etkinlik (Specifity) sorunu

CSS iç içe yazımının SASS’a göre bir başka farkı, iç içe kullanılan seçiçileri :is() ile sarması. Sass ise bu seçicileri kopyalayıp yapıştırıp ayrı ayrı yazılmış gibi kullanır. Örneğin

.foo, #bar {
  .baz { /* ... */ }
}

Bu kodu SASS ile derlediğimizde

.foo .baz, #bar .baz {
	/* ... */
}

kodunu css iç içe yazımında tarayıcılar derlediğinde şöyle yorumlar

is(.foo, #bar) .baz {
	/* ... */
}

Tabi bu iki derleme farkı farklı etkinlik sonucuna neden olur. :is() her zaman en etkin değeri aldığı için

<div class=foo>
  <p class=baz>
</div>

Bu kodu CSS ile yazdığınızda etkinliği 1 0 0 iken Sass ile kodladığınızda 0 0 2 değerini çıkacaktır. Bu gibi durumlara dikkat etmek gerekiyor.

Tarayıcıdaki görünüm

CSS’in SASS’a göre avantajlarında birisi CSS ile yazdığımız kodun tarayıcının geliştirici araçlarında gösteriliyor olması.

chrome nesting Chrome iç içe gösterimi

chrome nesting Chrome iç içe yazım etkinlik gösteri

Safari css nesting Safari iç içe gösterimi

Firefox nesting Firefox iç içe gösterimi (yeni haliyle :)

Safari ve Firefox’un gösterimi daha güzel. Chrome’da yakında benzer bir gösterime geçer. Hem kodu hemde etkinlik değerini görebilmekte ayrı güzel.

Tarayıcı desteği

Yazıyı yazdığımda Türkiye’de %80 desteğe ulaşmış olması mükemmel bir gelişme. Firefox’un geriden gelse dahi desteği sağlaması güzel.

Tarayıcı Desteği

Chrome explorer Firefox
+ + 117+

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + -

Kalın sağlıcakla.

Kaynaklar