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

Chrome 120'de ileriye dönük iç içe yerleştirme etkinleştirildi.

Adam Argyle

Bu yılın başlarında Chrome, 112'de CSS iç içe yerleştirme özelliğini kullanıma sundu ve bu özellik şu anda tüm önemli tarayıcılarda kullanıma sunuldu.

Bununla birlikte, geçersiz iç içe yerleştirme örneklerinin ilk makalesinde listelenen, söz dizimi için katı ve potansiyel olarak beklenmedik bir gereklilik vardı. Bu takip makalesinde, spesifikasyondaki ve Chrome 120'deki değişiklikler ele alınmaktadır.

İç içe öğe etiketi adları

CSS iç içe yerleştirme söz diziminin ilk sürümündeki en şaşırtıcı sınırlamalardan biri, çıplak öğe etiketi adlarının iç içe yerleştirilememesiydi. Bu engel kaldırılmıştır. Böylece aşağıdaki CSS iç içe yerleştirme geçerli hale gelmiştir:

.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ştirirken bu durum son derece hoş bir hale gelir:

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

  dd {
    /* dl dd styles */
  }
}

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

Bu değişiklik büyük ölçüde Chrome mühendislerinin yaptığı keşif ve prototip oluşturma süreçlerine ve topluluğun ve CSS Çalışma Grubunun isteğine katkıda bulundu.

CSS ayrıştırıcının şu anda ileriye bakma kavramı olmadığından, etiket adı (div) ile özellik adı (visibility) arasında ayrım yapmayı öğretebileceğine dair yeterince şüphe vardı. Jetonun bir özellik olduğunu anlamak için tarayıcının ileriye bakması ve bir : öğesinin bilinmeyen jetonu takip edip etmediğini görmesi gerekir. Bu nedenle, orijinal spesifikasyonda tarayıcıya normal bir CSS özelliği ve değeri değil, sonraki öğenin iç içe yerleştirilmiş olduğunu belirtmek için & sembolü kullanılmıştır.

Neyse ki bir mühendis, ayrıştırıcının iç içe yerleştirilmiş seçiciyi normal tüketim pasosuna göre bir özellik olarak ayrıştıramadığında, özellik yerine seçiciyi varsayan bir modda yeniden başlatılabileceğini keşfetmiştir. Ayrıştırma işlemi devam eder ve iç içe yerleştirmenin seçici iç içe yerleştirme olduğunu onaylar. Söz dizimini serbest bırakacak kadar belirlendiği kadar hızlı ve güvenilirdir.