CSS İç İçe Yerleştirme

En sevdiğimiz CSS ön işlemci özelliklerinden biri artık dile yerleşik olarak sunuluyor: iç içe yerleştirme stili kuralları.

Adam Argyle

İç içe yerleştirmeden önce, her seçicinin teşvik eder. Bu da tekrara, stil sayfası topluna ve dağınık bir yazma işlemine yol açar. sunmaktır.

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

İç içe yerleştirildikten sonra, seçiciler ilişkili, devam eden ve ilişkili stil kurallarını da gruplandırabilirsiniz.

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Bunu tarayıcıda deneyin.

Nesting, bir yandan seçicileri tekrarlama ihtiyacını azaltırken diğer yandan ilgili öğeler için ortak yerleştirme stil kuralları. Ayrıca stillerin Hedeflediği HTML. Önceki örnekteki .nesting bileşeni projeden kaldırıldığında arama yapmak yerine grubun tamamını silebilirsiniz. dosyalarını da kullanabilirsiniz.

İç içe yerleştirme işlevi şu konularda yardımcı olabilir: - Kuruluş - Dosya boyutunu küçültme - Yeniden düzenleme

İç içe yerleştirme özelliği Chrome 112'den itibaren mevcuttur ve Safari Teknik Önizleme 162'de deneyebilirsiniz.

CSS Nesting'i kullanmaya başlama

Bu gönderinin geri kalanında size yardımcı olmak için aşağıdaki demo korumalı alanı kullanılmıştır ve seçimleri görselleştirir. Bu varsayılan durumda hiçbir şey seçilmez ve her şeyi görebilirsiniz. Çeşitli şekil ve boyutları seçerek şunları yapabilirsiniz: söz dizimini uygulayın ve onu işin başında görün.

Korumalı alan içinde daireler, üçgenler ve kareler vardır. Bazıları küçük, orta gerektiğini unutmayın. Diğerleri mavi, pembe veya mor. Hepsi .demo içinde öğesidir. Aşağıda, hedeflemenize yardımcı olabilir.

<div class="demo">
  <div class="sm triangle pink"></div>
  <div class="sm triangle blue"></div>
  <div class="square blue"></div>
  <div class="sm square pink"></div>
  <div class="sm square blue"></div>
  <div class="circle pink"></div>
  …
</div>

İç içe yerleştirme örnekleri

CSS iç içe yerleştirme, bir öğe için bağlam içinde stil tanımlamanızı sağlar. kullanabilirsiniz.

.parent {
  color: blue;

  .child {
    color: red;
  }
}

Bu örnekte, .child sınıf seçici, tablodaki .parent sınıf seçicisinde Bu, iç içe yerleştirilmiş .child seçicisinin yalnızca .parent sınıfına sahip öğelerin alt öğeleri olan öğeler için geçerlidir.

Bu örnek, alternatif olarak & sembolü kullanılarak üst sınıfın nereye yerleştirilmesi gerektiğini belirtir.

.parent {
  color: blue;

  & .child {
    color: red;
  }
}

Bu iki örnek işlevsel olarak eşdeğerdir ve size sunulan seçeneklerin Bu makalede daha gelişmiş örnekler incelendiği için daha net olacaktır.

Çevreleri seçme

Bu ilk örnekte görev, yalnızca renk geçişini artırıp bulanıklaştırmak için dairelerin içine yerleştirin.

İç içe yerleştirme olmadan, CSS bugün:

.demo .circle {
  opacity: .25;
  filter: blur(25px);
}

İç içe yerleştirme ile iki geçerli yol vardır:

/* & is explicitly placed in front of .circle */
.demo {
  & .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

veya

/* & + " " space is added for you */
.demo {
  .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

Sonuç, .demo içindeki .circle sınıfındaki tüm öğeler bulanıklaştırılır ve neredeyse görünmez hale gelir:

Üçgen ve kare seçme

Bu görev, grup seçici olarak da adlandırılan, iç içe yerleştirilmiş birden fazla öğenin seçilmesini gerektirir.

Şu anda CSS'yi iç içe yerleştirmeden iki şekilde kullanabilirsiniz:

.demo .triangle,
.demo .square {
  opacity: .25;
  filter: blur(25px);
}

veya :is() ile

/* grouped with :is() */
.demo :is(.triangle, .square) {
  opacity: .25;
  filter: blur(25px);
}

İç içe yerleştirme ile geçerli iki yöntem vardır:

.demo {
  & .triangle,
  & .square {
    opacity: .25;
    filter: blur(25px);
  }
}

veya

.demo {
  .triangle, .square {
    opacity: .25;
    filter: blur(25px);
  }
}

Sonuç, .demo içinde yalnızca .circle öğeleri kalır:

Büyük üçgenler ve daireler seçme

Bu görev, bir birleşik seçici gerektirir. Burada öğelerinin seçilebilmesi için her iki sınıfın da mevcut olması gerekir.

İç içe yerleştirme olmadan, CSS bugün:

.demo .lg.triangle,
.demo .lg.square {
  opacity: .25;
  filter: blur(25px);
}

veya

.demo .lg:is(.triangle, .circle) {
  opacity: .25;
  filter: blur(25px);
}

İç içe yerleştirme ile geçerli iki yöntem vardır:

.demo {
  .lg.triangle,
  .lg.circle {
    opacity: .25;
    filter: blur(25px);
  }
}

veya

.demo {
  .lg {
    &.triangle,
    &.circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

Sonuçta, tüm büyük üçgenler ve daireler .demo içinde gizlenir:

Bileşik seçiciler ve iç içe yerleştirilmiş bir profesyonel ipucu

İç içe nasıl yerleştirileceğini açıkça gösterdiğinden & sembolü arkadaşınızdır seçiciler. Aşağıdaki örneği inceleyin:

.demo {
  .lg {
    .triangle,
    .circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

İç içe yerleştirmenin geçerli bir yolu olsa da sonuçlar beklediğiniz öğelerle eşleşmez. Bunun nedeni, & olmadan, birleştirilmiş .lg.triangle, .lg.circle için istenen sonucu belirtmek olmadığında gerçek sonuç .lg .triangle, .lg .circle olur; alt seçiciler.

Pembe olanlar dışındaki tüm şekilleri seçmek

Bu görev, öğelerin şöyle bir olumsuz işlevsel sanal sınıf gerektirir. belirtilen seçiciye sahip olmalıdır.

İç içe yerleştirme olmadan, CSS bugün:

.demo :not(.pink) {
  opacity: .25;
  filter: blur(25px);
}

İç içe yerleştirme ile geçerli iki yöntem vardır:

.demo {
  :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

veya

.demo {
  & :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

Sonuçta, pembe olmayan tüm şekiller .demo içinde gizlenir:

& ile hassas ve esneklik

:not() seçicisini kullanarak .demo hedefini hedeflemek istediğinizi varsayalım. & zorunludur: şu bilgileri sağlar:

.demo {
  &:not() {
    ...
  }
}

Bu, öncekinin aksine .demo ve :not() bileşiklerini .demo:not() oluşturur .demo :not() gereken örnek. Bu hatırlatıcı, bir görevi tamamlamak için bir :hover etkileşimi iç içe yerleştirmek istiyor.

.demo {
  &:hover {
    /* .demo:hover */
  }

  :hover {
    /* .demo :hover */
  }
}

Daha fazla iç içe yerleştirme örneği

İç içe yerleştirme için CSS spesifikasyonu: daha fazla örnek içerir. Söz dizimi hakkında daha fazla bilgi edinmek istiyorsanız örnekler üzerinden ayrıntılı şekilde ele aldığımızda, çok çeşitli geçerli ve geçersiz örnekleri de kapsar.

Sıradaki birkaç örnekte, CSS iç içe yerleştirme özelliğini kısaca tanıtacağız. çok çeşitliliğini kavrayabilir.

@media'yı iç içe yerleştirme

Stil sayfasının farklı bir alanına gitmek çok dikkat dağıtıcı olabilir. seçici ve stillerini değiştiren ortam sorgusu koşullarını belirtir. Dikkat dağıtan şeyler koşulları doğrudan bağlamın içine yerleştirme özelliğiyle geliştirildi.

Söz dizimi kolaylığı için, iç içe yerleştirilmiş medya sorgusu yalnızca stilleri değiştiriyorsa söz konusu olduğunda minimum bir söz dizimi kullanılabilir.

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    font-size: 1.25rem;
  }
}

& açıkça kullanılabilir:

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    &.large {
      font-size: 1.25rem;
    }
  }
}

Bu örnekte, .large hedefleme yaparken & ile genişletilmiş söz dizimi gösterilmektedir kartlarının çalışmaya devam etmesi gerekir.

@kuralları iç içe yerleştirme hakkında daha fazla bilgi edinin.

Her yerde iç içe yerleştirme

Bu noktaya kadarki tüm örnekler devam ediyor veya önceki bir bağlama eklendi. Gerekirse bağlamı tamamen değiştirebilir veya yeniden düzenleyebilirsiniz.

.card {
  .featured & {
    /* .featured .card */
  }
}

& simgesi, bir seçici nesnesine (dize değil) başvuruyu temsil eder. iç içe yerleştirilmiş seçicide herhangi bir yere yerleştirilebilir. Hatta birden fazla yerine kez:

.card {
  .featured & & & {
    /* .featured .card .card .card */
  }
}

Bu örnek biraz faydasız görünse de, bazı durumlarda seçicinin bağlamını tekrarlayabilmek çok kullanışlı.

Geçersiz iç içe yerleştirme örnekleri

Geçersiz ve sizi şaşırtabilecek birkaç iç içe yerleştirme söz dizimi senaryosu vardır ön işlemcilerde iç içe yerleştiriyorsanız

İç içe yerleştirme ve birleştirme

Birçok CSS sınıfı adlandırma kuralı, iç içe yerleştirme tekniğini kullanarak seçicileri dizeymiş gibi ekleyin. Bu işlem, CSS iç içe yerleştirmede seçiciler dize değil, nesne başvurularıdır.

.card {
  &--header {
    /* is not equal to ".card--header" */
  }
}

Daha ayrıntılı bir açıklamayı özelliklerde bulabilirsiniz.

Tricky iç içe yerleştirme örneği

Seçici listeleri ve :is() içinde iç içe yerleştirme

Aşağıdaki iç içe yerleştirilmiş CSS blokunu göz önünde bulundurun:

.one, #two {
  .three {
    /* some styles */
  }
}

Bu, bir seçici listesi ile başlayan ve daha fazla iç içe yerleştirmeye devam eden ilk örnektir. Önceki örnekler yalnızca bir seçici listesiyle sona ermişti. Bu iç içe yerleştirme örneğinde geçersiz bir şey yoktur, ancak seçici listelerinin (özellikle de bir kimlik seçici içerenlerin) içine yerleştirilmesiyle ilgili yanıltıcı bir uygulama ayrıntısı vardır.

İç içe yerleştirmenin amacının çalışması için, en iç içe yerleştirme olmayan seçici listeleri tarayıcı tarafından :is() ile sarmalanır. Bu sarmalama, seçici listesinin yazılan bağlamlar içinde gruplandırılmasını sağlar. Bu gruplandırmanın (:is(.one, #two)) yan etkisi, parantez içindeki seçiciler içindeki en yüksek puanın kesinliğini dikkate almasıdır. :is() her zaman bu şekilde çalışır, ancak iç içe yerleştirme söz dizimi kullanıldığında sürpriz olabilir. Çünkü bu, tam olarak yazıldığı şekilde değildir. Püf noktası şöyle özetleniyor: kimlikler ve seçici listeleriyle iç içe yerleştirmek, oldukça yüksek özgünlükteki seçicilere yol açabilir.

Karmaşık örneği net bir şekilde özetlemek gerekirse önceki iç içe yerleştirme bloğu dokümana şu şekilde uygulanacaktır:

:is(.one, #two) .three {
  /* some styles */
}

Kimlik seçicinin kullanıldığı bir seçici listesinin içine iç içe yerleştirirken lintörlerinize uyarıda bulunmayı öğretin. Bu seçici listesindeki iç içe yerleştirmelerin belirginliği yüksek olacaktır.

İç içe yerleştirme ve bildirimleri karıştırma

Aşağıdaki iç içe yerleştirilmiş CSS blokunu göz önünde bulundurun:

.card {
  color: green;
  & { color: blue; }
  color: red;
}

.card öğelerinin rengi blue olacak.

Karışık stil bildirimleri, sanki gerçekten önce yazıldığından emin olun. Daha fazla ayrıntıyı spesifikasyonda bulabilirsiniz.

Bununla ilgili yollar vardır. Aşağıda, & içindeki üç renk stili sarmalanmıştır. yazarın istemiş olabileceği şekilde basamak sırasını korur. Şunun rengi: .card öğeleri kırmızı olur.

.card {
  color: green;
  & { color: blue; }
  & { color: red; }
}

Hatta, iç içe yerleştirmenin ardından gelen stilleri & ile sarmalamak iyi bir uygulamadır.

.card {
  color: green;

  @media (prefers-color-scheme: dark) {
    color: lightgreen;
  }

  & {
    aspect-ratio: 4/3;
  }
}

Özellik algılama

CSS iç içe yerleştirmeyi algılamanın iki harika yolu vardır: iç içe yerleştirme kullanma veya İç içe yerleştirilmiş seçici ayrıştırma özelliğini kontrol etmek için @supports.

İç içe yerleştirmeyi kullanma:

html {
  .has-nesting {
    display: block;
  }

  .no-nesting {
    display: none;
  }
}

@supports kullanılıyor:

@supports (selector(&)) {
  /* nesting parsing available */
}

İş arkadaşım Bramus, bu stratejiyi gösteren harika bir Codepen'e sahip.

Chrome Geliştirici Araçları ile hata ayıklama

Geliştirici Araçları'nda şu anda iç içe yerleştirme desteği minimum düzeydedir. Şu anda stiller, Stiller bölmesinde beklendiği gibi temsil edilir, ancak iç içe yerleştirme izler ve tam seçici bağlamı henüz desteklenmiyor. Hem gündelik hayatınızda hem de net ve şeffaf olmasını sağlayın.

Chrome 113'te, CSS iç içe yerleştirme için ek destek sunulacaktır. Takip etmeye devam edin.

Gelecek

CSS iç içe yerleştirme yalnızca sürüm 1'dedir. 2. sürümde daha fazla söz dizimsel özellik sunulacak ve akılda kalıcı bir yolunu sunar. İç içe yerleştirmenin ayrıştırılmasının sınırlanmaması için çok fazla talep vardır zor anları olur.

İç içe yerleştirme, CSS dilinde yapılan büyük bir geliştirmedir. Yazmayla ilgili etkileri vardır önemli bir parçasını oluşturur. Bu büyük etkinin, şirket için etkili bir şekilde belirlenebilmelidir.

Son olarak, buradan demo yapabilirsiniz. @scope, iç içe yerleştirme ve @layer özelliklerini birlikte kullanan programlardır. Hepsi çok heyecan verici.