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

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

Adam Argyle

Bu yılın başlarında Chrome, 112 yılında CSS iç içe yerleştirme özelliğini gönderdi ve iki büyük tarayıcıda da sunar.

Tarayıcı Desteği

• . 120)
• . 120)
• . 117
• . 17,2

Kaynak

Ancak, bu şarta ilişkin katı ve beklenmedik bir şekilde söz dizimi, geçersiz iç içe yerleştirme örneklerinin ilk makalesinde listelenmiştir. Bu takip makalesinde, spesifikasyonda yapılan değişiklikler ve Chrome'dan gelen değişiklikler ele alınmaktadır. 120.)

İç içe öğe etiket adları

CSS iç içe yerleştirmenin ilk sürümündeki en şaşırtıcı sınırlamalardan biri söz dizimi, sade öğe etiket adlarının iç içe yerleştirilememesiydi. Bu yetersizlik kaldırılarak aşağıdaki CSS iç içe yerleştirmesi geçerli hale gelir:

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

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

Sıralı, sıralanmamış veya tanım listeleri iç içe yerleştirilirken bu oldukça kullanışlı 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?

Bunu büyük ölçüde Chrome mühendislerinin yaptıkları birtakım keşifler ve prototipler sayesinde sağlıyorlar. ve CSS Çalışma Grubu'nun isteğiyle bir araya geliyor.

CSS ayrıştırıcıya bir şeyi öğretebileceği konusunda epey şüphe vardı bir etiket adını (div) ve bir özellik adını (visibility) ayrıştırıcının şimdilik ileriyi düşünmesi yoktur. Sorunun jeton bir mülktür, tarayıcının ileriye bakması ve bir : tarafından takip edilip edilmediğini bilinmeyen jeton. Bu nedenle, orijinal spesifikasyonda & simgesi şu amaçlarla kullanılmıştır: tarayıcıya, normal bir CSS'nin değil, bunun iç içe yerleştirilmiş olduğunu belirtme özellik ve değer.

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, özellik yerine seçici varsayıldığı bir modda yeniden başlatıldı. Ayrıştırma Böylece, iç içe yerleştirmenin seçicinin iç içe yerleştirilmiş olması olarak kabul edilir. Yeterince hızlı ve söz dizimini kullanıma sunmaya yetecek kadar güvenilir.