En sevdiğimiz CSS ön işlemci özelliklerinden biri artık dile yerleşik olarak sunuluyor: iç içe yerleştirme stili kuralları.
İç 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. sahip olacaksınız.
.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; } } }
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:
![Renkli şekil ızgarasında artık daireler yok,
arka planda oldukça soluk görünürler.](https://developer.chrome.com/static/docs/css-ui/css-nesting/image/the-colorful-grid-shapes-f1beac5a4a5be.png?hl=tr)
Üç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:
![Bu renkli şekil ızgarasında yalnızca daireler var,
diğer tüm şekiller neredeyse hiç görünmez.](https://developer.chrome.com/static/docs/css-ui/css-nesting/image/the-colorful-grid-shapes-5baea09e41652.png?hl=tr)
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:
![Renkli ızgarada yalnızca küçük ve orta şekiller görülebilir.](https://developer.chrome.com/static/docs/css-ui/css-nesting/image/the-colorful-grid-has-sm-5a9e56b5c62b4.png?hl=tr)
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:
![Rengarenk ızgarada artık tek renkli, yalnızca pembe şekiller gösteriliyor.](https://developer.chrome.com/static/docs/css-ui/css-nesting/image/the-colorful-grid-is-mon-0203fb32e8aea.png?hl=tr)
&
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ı vermelerini öğ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 gösterilmektedir.
yazarın istemiş olabileceği şekilde basamak sırasını korur. Ürünün 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.