CSS iç içe yerleştirme rahat söz dizimi güncellemesi

Chrome 120'de yeni bakış açısı iç içe yerleştirme özelliği etkinleştirildi.

Adam Argyle

Bu yılın başlarında Chrome, 112 sürümünde CSS iç içe yerleştirme özelliğini kullanıma sundu. Bu özellik artık tüm büyük tarayıcılarda mevcut.

Ancak söz dizimi için geçersiz iç içe yerleştirme örnekleri başlıklı makalenin ilk bölümünde listelenen katı ve beklenmedik bir şart vardı. Bu takip makalesinde, Chrome 120'den itibaren spesifikasyonda ve Chrome'da yapılan değişiklikler ele alınacaktır.

Öğe etiketi adlarını iç içe yerleştirme

CSS iç içe yerleştirme söz dizisinin ilk sürümündeki en şaşırtıcı sınırlamalardan biri, çıplak öğe etiket adlarının iç içe yerleştirilememesiydi. Aşağıdaki CSS iç içe yerleştirme geçerli hale getirilerek bu engel kaldırıldı:

.card {
  h1 {
    /* this is now valid! */
  }
}

/* the same as */
.card {
  & h1 {
    /* this is now valid! */
  }
}

Sıralı, sırasız veya tanım listelerini iç içe yerleştirdiğinizde bu özellik çok kullanışlı olur:

dl {
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

Bu iç içe yerleştirmeye izin vermek için neler değişti?

Bu, büyük ölçüde Chrome mühendislerinin keşifleri ve prototip çalışmaları ile topluluğun ve CSS Çalışma Grubu'nun isteği sayesinde gerçekleşti.

Ayrıştırıcının şu anda ileriye bakma kavramı olmadığından, CSS ayrıştırıcısına etiket adı (div) ile özellik adı (visibility) arasında ayrım yapmayı öğretebileceğimiz konusunda oldukça şüphemiz vardı. Tarayıcı, jetonun bir özellik olduğunu anlamak için ileriye bakarak bilinmeyen jetondan sonra bir : olup olmadığını kontrol etmelidir. Dolayısıyla, orijinal spesifikasyonda & simgesi, sonraki öğenin iç içe yerleştirildiğini tarayıcıya belirtmek için kullanılmıştır. Normal bir CSS özelliği ve değerini belirtmez.

Neyse ki bir mühendis, ayrıştırıcının iç içe yerleştirilmiş seçiciyi normal tüketim kartına göre bir özellik olarak ayrıştıramadığında, bu seçicinin, özellik yerine seçici kabul edilen bir modda yeniden başlatılabileceğini keşfetti. Ayrıştırma işlemi devam ettirilir ve iç içe yerleştirme işlemi seçici iç içe yerleştirmesi olarak kabul edilir. Söz dizimi yayınlamak için yeterli olduğu belirlenen bu araç yeterince hızlı ve güvenilirdir.