:is() CSS4 çalışma taslağındaki "Matches-Any" sözde sınıfının mevcut adıdır.
Başlangıçta, bu sözde sınıfın adı verildi :any()ve satıcıya özel sınırlı destekle uygulandı:
/* Never actually worked */ :any(div, p) > em ( /*… */ )Daha sonra "Matches-Any" sözde sınıf adı :matches()CSS4 çalışma taslağının ilk sürümlerinde olarak değiştirildi ve bazı tarayıcılara ek (eksik) destek verildi.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Son olarak, mevcut çalışma taslağı bu sözde sınıfı :is()şu anda tarayıcılarda desteklenmeyen olarak yeniden adlandırdı .
/* Will work in the future? */ :is(div, p) > em ( /*… */ )"Herhangi Biriyle Eşleşir" seçicisinin (tüm adlarıyla birlikte) amacı, seçicilerin karmaşık gruplamalarının yazılmasını kolaylaştırmaktır.
Sözdizimi
/* Theoretical until CSS4 support finalized */ :is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) ( color: #BADA55; ) /*… which would be the equivalent of: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 ( color: #BADA55; )Hey, bu CSS ön işleme gibi değil mi?
İle seçicilerin basitleştirilmesi :is(), CSS ön işlemcilerinin iç içe geçmiş kuralları işleme biçimine gerçekten benzer:
/* SCSS written like this: */ div, p, ul, ol ( span ( /*… */ ) ) /* after processing becomes: */ div span, p span, ul span, ol span ( /*… */ ) /* which is a lot like the effect of :is()! */Ama dikkat et! Sass gibi önişlemciler, yuvalanmış kurallarınızı kolayca anlaşılan seçiciler listesine "açar". :is()özgüllük kurallarını biraz farklı bir şekilde ele alacak:
Özgüllük İlginçtir
CSS4 Çalışma Taslağına göre:
: İs () sözde sınıfının özgüllüğü, en özel argümanının özgüllüğü ile değiştirilir. Bu nedenle,: is () ile yazılan bir seçici,: is () olmadan yazılan eşdeğer seçiciye eşdeğer özgünlüğe sahip olmayabilir.
Bu, özgüllüğünün :is()sağlanan bağımsız değişkenler listesindeki en özel öğeye otomatik olarak yükseltileceği anlamına gelir :
/* This has higher precedence… */ :is(ol, .list, ul) li ( /*… */ ) /*… than this, even though this is later… */ ol li ( /*… */ ) /*… because :is() has the weight of it's heaviest selector, which is `.list`! */Tarayıcı Desteği
Buna daha önce değindik, ancak :is()şu anda tarayıcı desteği yok. Editörün CSS Seçicileri Seviye 4 Spesifikasyonunun 1. Taslağında tanıtıldı. Bu, tarayıcıların böyle bir konsept etrafında toplanmasını biraz erken yaparak işlerin hala şekillendiği anlamına geliyor.
Bununla :matchesbirlikte :any, genel işlevsellik için (satıcı tarafından önceden eklenmiş bazı boşlukları doldurarak) şeklinde harika bir tarayıcı desteğine sahibiz . Ve elbette, :noteşleştirmeye yardımcı olabilecek başka bir sözde sınıftır.
İlginç olan, :is()daha sonra :matchestanıtılmasının ardından tanıtılmasıdır :any. Bu , yol boyunca değişen detaylarla, yerini :anyalması gibi bir şey . Bunların nasıl geliştiğini görmek için her zaman temiz.:matches:is()
"Matches-Any" için maksimum destek elde etmek için, geçmiş adların bir karışımının kullanılması gerekir, çünkü tarayıcı kullanımı şu anda bu noktada satıcı öneklerinin ve deneysel ayarların bir karmaşasıdır.
/* These are deprecated, but still necessary in some browsers: */ :-moz-any(div, p) > em ( /*… */ ) :-webkit-any(div, p) > em ( /*… */ ) /* Has been replaced by :is() in CSS4, but still supported by some browsers with experimental features enabled */ :matches(div, p) > em ( /*… */ ) /* Doesn't work yet, but for future support, maybe add this? */ :is(div, p) > em ( /*… */ )CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan herhangi bir sözde sınıfın Pen örneklerine bakın.
İlişkili
:matches():not():any-link()
Kaynaklar
- David Baron'un Gecko'ya neden
:-moz-anydestek eklediğini açıklayan blog yazısı - MDN Belgeleri
- CSS Seçiciler Seviye 4 Spesifikasyonu (Editörün Taslağı 1):
:is()Sözde sınıfı tanıtan spesifikasyon . - Sözde Sınıf Seçicilerle Tanışın: CSS Hileleri, sözde sınıfların nasıl çalıştığını özetleyen bir gönderi.