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

Chrome 120'de önizleme iç içe yerleştirilmesi 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.

Tarayıcı desteği

• 120
• 120
• 117
• 17.2

Kaynak

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. Bu sorun giderildi ve aşağıdaki CSS iç içe yerleştirme geçerli hale geldi:

.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 ne 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 şüphelerimiz vardı. Tarayıcı, jetonun bir özellik olduğunu anlamak için ileriye bakarak bilinmeyen jetondan sonra bir : olup olmadığını kontrol etmelidir. Bu nedenle, orijinal spesifikasyonda tarayıcıya, sonraki öğenin normal bir CSS mülkü ve değeri değil, iç içe yerleştirilmiş olduğunu belirtmek için & sembolü kullanıldı.

Neyse ki bir mühendis, ayrıştırıcı normal tüketim geçişine göre iç içe yerleştirilmiş seçiciyi mülk olarak ayrıştıramadığında, mülk yerine seçiciyi varsaydığı bir modda yeniden başlatılabileceğini keşfetti. Ayrıştırma devam eder ve iç içe yerleştirme, 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.