CSS :is(), :matches(), :any() ve :where() nedir?

CSS :is(), :matches(), :any() ve :where() nedir?

Merhaba bu yazımızda CSS içinde tekrarlayan class veya id’ler kısaltmak için kullandığımız :is() ve onun yanları olan :matches(), :any() ve :where() ne işe yaradıkları bizim avantajları ve dezavantajları nelerdir ona değineceğiz. keyifli okumlar.

Öncelikle :is() örneğimizi daha iyi anlaşılır olması için aşağıda küçük CSS örneği göstererek başlayalım.

.photo p-button:hover,
.video p-button:hover,
.post p-button:hover {
   background-color: yellow;
}

Yukarıdaki CSS örneğinde gördüğünüz .p-button:hover class’ı sürekli tekrar ediyor. İşte :is() burada bize yardımcı oluyor, seçicileri daha kompakt bir biçimde yazmak için kullanışlı ve burada kod kirliliği önlüyor.

:is(.photo, .video, .post) .p-button:hover{
   background-color: yellow;
}

:matches() ve :any() nedir?

:matches() ve :any() bu ikisi de yukarıda bahsetdiğimiz :is() aynı görevi görmektedir fakat :is() ayıran bi özelliği tarayıcı farklarıdır. :matches() Chrome, Firefox ve Safari’nin eski sürümleri ile çalışmaktadır. :any() daha eski sürümler için kullanılır. Şimdi ise ikisinin nasıl bir arada kullanıldıklarına bakalım.

:-webkit-any(.photo, .video, .post) .p-button:hover{
   background-color: yellow;
}
:-moz-any(.photo, .video, .post) .p-button:hover{
   background-color: yellow;
}
:matches(.photo, .video, .post) .p-button:hover{
   background-color: yellow;
}

SCSS kullanımı:

CSS pseudo-class(Sözde sınıf veya sözde seçici) kullanırken scss bunu kullanmıyor daha basite indirgen halde kullanıyorsunuz. Ben bu kullanımı daha çok seviyorum

//:is() olmadan önceki hali
.photo p-button,
.video p-button,
.post p-button {
   background-color: yellow;
}
//:is() css kullanımı
:is(.photo, .video, .post) .p-button{
   background-color: yellow;
}
//scss kullanımı
.photo, .video, .post{
    .p-button{
    }
}

:where() nedir?

:where() yukarıdaki gördüğümüz :is(), :any() ve :matches() aynı işlevi görmektedir. fakat aralarındaki fark ise adından anlaşılacağı üzere(yani öyle tahmin ediyorum ) seçicilerden herhangi biri geçersiz ise tüm listeyi geçersiz saymaktadır. yani herhangi seçici eklenir ise onu uygular aşağıda örnekler ile daha iyi anlayacağınızı düşünüyorum

<div class="is-style">
        <h1> :is()</h1>
        <div class="photo">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. <a href="#" class="p-button">Photo button</a></p>
        </div>
        <div class="video">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. <a href="#" class="p-button">Video button</a></p>
        </div>
        <div class="post">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. <a href="#" class="p-button">Post button</a></p>
        </div>
    </div>
    <div class="where-style">
        <h1>:where()</h1>
        <div class="photo">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. <a href="#" class="p-button">Photo button</a></p>
        </div>
        <div class="video">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. <a href="#" class="p-button">Video button</a></p>
        </div>
        <div class="post">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. <a href="#" class="p-button">Post button</a></p>
        </div>
    </div>
:is(.is-style .photo, .is-style .video, .is-style .post) .p-button{
   color: darkmagenta;
}
:where(.where-style .photo, .where-style .video, .where-style .post) .p-button{
   color: darkgreen;
}

Seçiyi geçersiz kılmaz için .photo class’ın rengini değiştiriyorum ve sonuç :where() ile eklenen sonraki eklediğin class onu etkisiz yaptı.

.photo .p-button{
    color: gold;
}
:where() ile :is() arasındaki fark
:where() ile :is() arasındaki fark

:is() :where() :any() :matches() dezavantajı ve avantajları

Avantajları: Bizi büyük yazım kolaylığından kurtarıyor ve kodu daha kompakt bir yapıda görünmesini sağlıyor.
Dezavantajları: Bir çok tarayıcının desteklememesi bu konuda bizi üzüyor çünkü bazı tarayıcılar göstermek için alternatiflerini yazdığımız için önceki kodlarla neredeyse aynı uzunluk olmuş oluyor halbuki biz bu kodu daha kod yazmak için kullanıyorduk. Umarım yakın zamanda destek verir bizi de bu dertten kurtarmış olurlar

Tavsiye Yazı:  Alaylı Yazılımcı Nedir?

Tarayıcılarla ilgili daha fazla detaya bakmak için: caniuse.com sitesini ziyaret edebilirsiniz.

Yukarıdaki yazımız içinde bulunan bütün kodların hepsi tek yerde topladım kodları indirmek için aşağıdaki butona tıklayınız.

Arkadaşlar yazımızda yazım hataları ve devrik cümleler olmuş olabilir affınıza sığınarak gördüğünüz hata veya önerileriniz olursa lütfen yorum yapmayı unutmayın.
Unutmayın! Paylaşmak; kazanmanın en hızlı ve kolay yoludur. Bir sonraki blog’ta görüşmek dileğiyle esen kalın.

Bir Cevap Yazın