Yeni Desteklenen, Modern CSS Sözde Sınıf Seçiciler İçin Bir Kılavuz

Sözde sınıf seçiciler, iki nokta üst üste karakteri “ : ” ile başlayan ve geçerli öğenin durumuna göre eşleşen seçicilerdir. Durum, belge ağacına göre veya :hover veya :checked gibi bir durum değişikliğine yanıt olarak olabilir.

:any-link

Seçici Düzey 4'te tanımlanmış olmasına rağmen, bu sözde sınıf oldukça uzun bir süredir çapraz tarayıcı desteğine sahiptir. any-link sözde sınıfı, href olduğu sürece bir bağlantı köprüsüyle eşleşir. Hem :link hem de :visited ile aynı anda eşleşmeye eşdeğer bir şekilde eşleşecektir. Esasen, ziyaret durumlarından bağımsız olarak tüm bağlantılara uygulamak istediğiniz color gibi temel özellikleri ekliyorsanız bu, stillerinizi bir seçici azaltabilir.

 :any-link { color: blue; text-underline-offset: 0.05em; }

Spesifiklikle ilgili önemli bir not, bir sınıfın özgüllüğüne sahip olduğundan, a kademeli olarak daha aşağı yerleştirilse bile :any-link bir seçici olarak a karşı kazanacaktır. Aşağıdaki örnekte, bağlantılar mor olacaktır:

 :any-link { color: purple; } a { color: red; }

Bu nedenle, :any-link tanıtırsanız, belirlilik için doğrudan rekabet içinde olacaklarsa, onu seçici olarak a örneklerine eklemeniz gerekeceğini unutmayın.

:focus-visible

Bahse girerim, web'deki en yaygın erişilebilirlik ihlallerinden biri, bağlantılar, düğmeler ve form girdileri gibi etkileşimli öğelerin :focus durumu için outline kaldırmaktır. Bu outline ana amaçlarından biri, gezinmek için öncelikle klavye kullanan kullanıcılar için görsel bir gösterge işlevi görmektir. Görünür bir odak durumu, bu kullanıcılar bir arayüzde sekmeler yaparken ve etkileşimli bir öğenin ne olduğunu güçlendirmeye yardımcı olmak için bir yol bulma aracı olarak kritik öneme sahiptir. Spesifik olarak, görünür odak, WCAG Başarı Ölçütü 2.4.11: Odak Görünümü (Minimum) kapsamındadır.

:focus-visible sözde sınıfının, yalnızca kullanıcı aracısı buluşsal yöntemler aracılığıyla görünür olması gerektiğini belirlediğinde bir odak halkası göstermesi amaçlanmıştır. Başka bir deyişle: tarayıcılar, giriş yöntemi, öğe türü ve etkileşimin bağlamı gibi şeylere dayalı olarak :focus-visible ne zaman uygulanacağını belirler. Klavye ve fare girişi olan bir masaüstü bilgisayar aracılığıyla test amacıyla, etkileşimli bir öğeye tıkladığınızda eklenmiş :focus-visible stilleri görmelisiniz, ancak :focus-visible göstermesi gereken metin girişleri ve metin alanları hariç, tıkladığınızda değil. tüm odak giriş türleri için :focus-visible .

Not : Daha fazla ayrıntı için :focus-visible spesifikasyonunun çalışma taslağını inceleyin.

Firefox ve Chromium tarayıcılarının en son sürümleri, artık UA'nın :focus stillerini :focus-visible eşleşmeleri durumunda kaldırması gerektiğini söyleyen spesifikasyona göre form girişlerinde :focus-visible işliyor gibi görünüyor. Safari henüz :focus-visible desteklemiyor, bu nedenle erişilebilirlik için outline kaldırmaktan kaçınmak için bir :focus stilinin geri dönüş olarak dahil edildiğinden emin olmamız gerekiyor.

Aşağıdaki stiller kümesiyle bir düğme ve metin girişi verildiğinde, ne olduğunu görelim:

 input:focus, button:focus { outline: 2px solid blue; outline-offset: 0.25em; } input:focus-visible { outline: 2px solid transparent; border-color: blue; } button:focus:not(:focus-visible) { outline: none; } button:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px #fff, 0 0 0 4px blue; }

Chromium ve Firefox

• input
  Öğeler fare girişi yoluyla :focus-visible lehine odaklandığında :focus stillerini doğru şekilde kaldırın, bu da border-color değiştirmeye ve klavye girişindeki outline gizlemeye neden olur
• button
  Yalnızca :focus-visible , button:focus:not(:focus-visible) için ek kural olmadan kullanmaz, bu da :focus üzerindeki anahattı kaldırır, ancak box-shadow yalnızca klavye girişinde görünmesine izin verir

Safari

• input
  Yalnızca :focus stillerini kullanmaya devam eder
• button
  Bu, şimdi, tıklamadaki :focus stillerini gizleyerek, ancak yine de klavye etkileşiminde :focus stillerini göstererek, düğmede :focus-visible visible'ın amacına kısmen saygı duyuyor gibi görünüyor .

Bu nedenle, şimdilik tavsiye, :focus stilleri dahil etmeye devam etmek ve ardından demo kodunun izin verdiği :focus-visible kullanmaya kadar aşamalı olarak geliştirmek olacaktır. İşte test etmeye devam etmeniz için bir CodePen:

:focus-within

:focus-within sözde sınıfı, tüm modern tarayıcılar arasında desteğe sahiptir ve neredeyse bir üst seçici gibi davranır, ancak yalnızca çok özel bir koşul için. Bir içeren öğeye eklendiğinde ve :focus için bir alt öğe eşleştiğinde, içeren öğeye ve/veya kap içindeki diğer öğelere stiller eklenebilir.

Bu davranışı kullanmak için pratik bir geliştirme, ilişkili girdiye odaklanıldığında bir form etiketinin stillendirilmesidir. Bunun çalışması için, etiketi ve girdiyi bir kapsayıcıya sarıyoruz ve ardından etiketi seçmenin yanı sıra bu kapsayıcıya :focus-within inin'i ekliyoruz:

 .form-group:focus-within label { color: blue; }

Bu, girişe odaklanıldığında etiketin maviye dönmesine neden olur.

Bu CodePen demosu ayrıca doğrudan .form-group kabına bir anahat eklemeyi de içerir:

:is()

"Herhangi bir sözde sınıfla eşleşir" olarak da bilinen :is() , eşleşmeye çalışmak için bir seçiciler listesi alabilir. Örneğin, başlık stillerini tek tek listelemek yerine, bunları :is(h1, h2, h3) seçicisi altında gruplayabilirsiniz.

:is() seçici listesiyle ilgili birkaç benzersiz davranış:

• Listelenen bir seçici geçersizse, kural geçerli seçicilerle eşleşmeye devam eder. Verilen :is(-ua-invalid, article, p) kural article ve p ile eşleşir.
• Hesaplanan özgüllük, en yüksek özgüllüğe sahip geçen seçicininkine eşit olacaktır. Örneğin, :is(#id, p) #id — 1.0.0 — öğesinin özgüllüğüne sahipken :is(p, a) özgüllüğü 0.0.1 olacaktır.

Geçersiz seçicileri yok saymanın ilk davranışı önemli bir avantajdır. Bir seçicinin geçersiz olduğu bir grupta diğer seçicileri kullanırken, tarayıcı tüm kuralı atacaktır. Bu, satıcı öneklerinin hala gerekli olduğu birkaç durumda devreye girer ve ön ekli ve ön ekli olmayan seçicilerin gruplandırılması, kuralın tüm tarayıcılarda başarısız olmasına neden olur. :is() ile bu stilleri güvenli bir şekilde gruplayabilirsiniz ve bunlar eşleştiğinde uygulanır ve uymadığında yoksayılır.

Bana göre, başlık stillerini daha önce belirtildiği gibi gruplamak bu seçiciyle zaten büyük bir kazanç. Aynı zamanda, kritik olmayan stiller uygularken geri dönüş olmadan rahatça kullanabileceğim bir kural türüdür, örneğin:

 :is(h1, h2, h3) { line-height: 1.2; } :is(h2, h3):not(:first-child) { margin-top: 2em; }

Bu örnekte (SmolCSS projemdeki belge stillerinden geliyor), temel stillerden miras alınan daha büyük line-height sahip olmak veya margin-top olmaması, desteklemeyen tarayıcılar için gerçekten bir sorun değil. Bu sadece idealden daha az. Henüz :is() kullanmak istemeyeceğiniz şey, arayüzünüzü önemli ölçüde kontrol eden Grid veya Flex gibi kritik düzen stilleri olacaktır.

Ek olarak, başka bir seçiciye zincirlendiğinde, temel seçicinin :is() içindeki bir alt seçiciyle eşleşip eşleşmediğini test edebilirsiniz. Örneğin, aşağıdaki kural yalnızca makalelerin doğrudan alt öğeleri olan paragrafları seçer. Evrensel seçici, p temel seçiciye referans olarak kullanılıyor.

 p:is(article > *)

Mevcut en iyi destek için, kullanmaya başlamak istiyorsanız, :-webkit-any() ve :matches() kullanarak yinelenen kurallar ekleyerek stilleri ikiye katlamak isteyeceksiniz. Bu bireysel kuralları koymayı unutmayın, yoksa destekleyen tarayıcı bile onu atacaktır! Başka bir deyişle, aşağıdakilerin tümünü dahil edin:

 :matches(h1, h2, h3) { } :-webkit-any(h1, h2, h3) { } :is(h1, h2, h3) { }

Bu noktada bahsetmeye değer, daha yeni seçicilerle birlikte, @supports selector olan güncellenmiş bir @supports varyasyonudur. Bu, @supports not selector olarak da mevcuttur.

Not : Şu anda (modern tarayıcılarda), bu kuralı yalnızca Safari desteklememektedir.

Aşağıdaki gibi bir şeyle :is() desteğini kontrol edebilirsiniz, ancak Safari :is() 'i desteklediğinden ancak @supports selector desteklemediğinden aslında Safari'yi destekleme konusunda kaybedersiniz.

 @supports selector(:is(h1)) { :is(h1, h2, h3) { line-height: 1.1; } }

:where()

Sözde sınıf :where() , bir kritik fark dışında :is() ) ile hemen hemen aynıdır: her zaman sıfır özgüllüğe sahip olacaktır. Bunun çerçeveler, temalar ve tasarım sistemleri oluşturan insanlar için inanılmaz etkileri vardır. :where() işlevini kullanarak, bir yazar varsayılanları ayarlayabilir ve aşağı akış geliştiricileri, özgünlük çakışması olmadan geçersiz kılmaları veya uzantıları dahil edebilir.

Aşağıdaki img stillerini göz önünde bulundurun. :where() kullanıldığında, daha yüksek bir özgüllük seçiciyle bile özgünlük sıfır kalır. Aşağıdaki örnekte, görüntünün hangi renk sınırına sahip olacağını düşünüyorsunuz?

 :where(article img:not(:first-child)) { border: 5px solid red; } :where(article) img { border: 5px solid green; } img { border: 5px solid orange; }

Tamamen :where() içinde yer aldığından, ilk kuralın özgünlüğü sıfırdır. Yani doğrudan ikinci kurala karşı, ikinci kural kazanır. Yalnızca img öğesi seçicisini son kural olarak tanıtan, kademeli nedeniyle kazanacak. Bunun nedeni, :where(article) img kuralıyla aynı özgüllükte hesaplanacak olmasıdır, çünkü :where() kısmı özgüllüğü artırmaz.

Sıfır özgüllük özelliği nedeniyle :where() işlevini yedeklerle birlikte kullanmak biraz daha zordur, çünkü bu özellik muhtemelen onu :is() üzerinde kullanmak isteyeceksiniz . Ve eğer geri dönüş kuralları eklerseniz, doğası gereği bunların :where() i geçmesi muhtemeldir. Ayrıca, @supports selector daha iyi bir genel desteğe sahiptir, bu nedenle bunu bir geri dönüş oluşturmak için kullanmaya çalışmanın (varsa) fazla bir kazanç sağlama olasılığı yoktur. Temel olarak, :where() için geri dönüşleri doğru şekilde oluşturamadığınızın farkında olun ve benzersiz hedef kitleniz için kullanmaya başlamanın güvenli olup olmadığını belirlemek için kendi verilerinizi dikkatlice kontrol edin.

:where() 'i yukarıdan img seçicilerini kullanan aşağıdaki CodePen ile daha fazla test edebilirsiniz:

Geliştirilmiş :not()

Temel :not() seçicisi, Internet Explorer 9'dan beri desteklenmektedir. Ancak 4. Düzey Seçiciler, :not() öğesini, tıpkı :is() ve :where() gibi bir seçici listesi almasına izin vererek geliştirir.

Aşağıdaki kurallar, desteklenen tarayıcılarda aynı sonucu sağlar:

 article :not(h2):not(h3):not(h4) { margin-bottom: 1.5em; } article :not(h2, h3, h4) { margin-bottom: 1.5em; }

:not() öğesinin bir seçici listesini kabul etme yeteneği, harika modern tarayıcı desteğine sahiptir.

:is() ile gördüğümüz gibi, geliştirilmiş :not() ayrıca * kullanarak bir alt öğe olarak temel seçiciye bir başvuru içerebilir. Bu CodePen, nav öğesinin soyundan gelmeyen bağlantıları seçerek bu yeteneği gösterir.

Bonus : Önceki demo ayrıca h2 veya h3 öğelerinin komşu kardeşleri olmayan görüntüleri seçmek için :not() ve :is() zincirleme örneğini de içerir.

Önerilen ancak “risk altında” — :has()

Çok heyecan verici bir teklif olan ancak deneysel bir şekilde bile uygulayan güncel bir tarayıcıya sahip olmayan son sözde sınıf :has() . Aslında, Seçici Düzey 4 Editörün Taslağı'nda “riskli” olarak listelenmiştir, bu da uygulamasını tamamlamada güçlükler yaşadığının kabul edildiği ve bu nedenle öneriden çıkarılabileceği anlamına gelir.

Uygulanırsa, :has() aslında pek çok CSS kullanıcısının sahip olmayı özlediği "üst seçici" olacaktır. Hem :focus-within in hem de :is() öğelerinin alt seçicilerle birleşimine benzer bir mantıkla çalışır, burada alt öğelerin varlığını ararsınız ancak uygulanan stil ana öğeye yönelik olur.

Aşağıdaki kural göz önüne alındığında, gezinme bir düğme içeriyorsa, gezinme üst ve alt dolguyu azaltacaktı:

 nav { padding: 0.75rem 0.25rem; nav:has(button) { padding-top: 0.25rem; padding-bottom: 0.25rem; }

Yine, bu şu anda herhangi bir tarayıcıda deneysel olarak bile uygulanmamaktadır - ancak düşünmesi eğlencelidir! Robin Rendle, CSS-Tricks üzerinden bu geleceğin seçicisi hakkında ek bilgiler sağladı.

3. Seviyeden Mansiyon: :empty

Seçici Düzey 3'ten kaçırmış olabileceğiniz yararlı bir sözde sınıf, metin düğümleri de dahil olmak üzere alt öğeleri olmadığında bir öğeyle eşleşen :empty empty'dir.

p:empty kuralı <p></p> ile eşleşir ancak <p>Hello</p> ile eşleşmez.

:empty kullanmanın bir yolu, JavaScript ile doldurulmuş dinamik içerik için yer tutucu olabilecek öğeleri gizlemektir. Belki de arama sonuçlarını alacak bir div'iniz var ve doldurulduğunda bir kenarlığı ve biraz dolgusu olacak. Ancak henüz bir sonuç olmadığı için sayfada yer kaplamasını istemezsiniz. :empty kullanarak şunu gizleyebilirsiniz:

 .search-results:empty { display: none; }

Boş durumda bir mesaj eklemeyi düşünüyor olabilirsiniz ve onu sözde öğe ve content eklemeyi düşünebilirsiniz. Buradaki tuzak, content erişip erişemeyecekleri konusunda tutarsız olan yardımcı teknoloji kullanıcıları için mesajların mevcut olmayabilmesidir. Başka bir deyişle, "sonuç yok" türünde bir mesajın erişilebilir olduğundan emin olmak için , bunu bir paragraf gibi gerçek bir öğe olarak eklemek istersiniz ( aria-label artık gizli bir div için erişilebilir olmayacaktır).

Seçiciler Hakkında Öğrenme Kaynakları

CSS, sözde sınıflar dahil daha birçok seçiciye sahiptir. Nelerin mevcut olduğu hakkında daha fazla bilgi edinmek için birkaç yer daha:

• MDN CSS seçicileri belgeleri, kapsamlı bir kategorize edilmiş liste içerir;
• Gelişmiş CSS seçicileri için iki bölümden oluşan bir kılavuz yazdım, birinci bölümden başlayabilirsiniz;
• CSS Diner oyunuyla CSS seçicileri öğrenirken eğlenin;
• Kitty Giraudel, sağlanan bir seçicinin parçalarını parçalayacak ve tanımlayacak bir seçici açıklama aracı oluşturdu.