CSS’de yazımı basitleştirmek için :is() kullanımı

Merhaba, yakın tarihte gündem olan css de is:() kullanımı ile ilgili türkçe bir kaynak göremedim ya da bulamadım ve bu konuyu kaleme almak istedim. :)

Avantajları neler? Daha az kod yazarak sonuca ulaşmamızı sağlıyor. Olayı bir örnekle hızlıca açıklayalım.

Can I use - :is()

Sözdizimi — Kullanımı #

.className :is(h1, .twoClassName a, .threeClassName span) {
  color: red;
}

Trick bilgi #

*:is(*:hover, *:focus)
.card:is(.card:hover, .card:focus)

Yazdığımız durumda tarayıcı aşağıdaki şekilde yorumlayacaktır.

*:is(:hover, :focus)
.card:is(:hover, :focus)

Kafaları daha fazla karıştırmadan örneklendirelim :) — Öncelikle yapıyı kuralım.

css has kullanımı

<div class="container">
    <h1>CSS is:() kullanımı</h1>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Ana Sayfa</a></li>
            <li class="breadcrumb-item"><a href="/about">Hakkımda</a></li>
            <li class="breadcrumb-item"><a href="/contact">İletisim</a></li>
        </ol>
    </nav>
    <div class="row">
        <div class="col-6 card active">
            <p>
                Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir...
                <a href="#">Devamını oku...</a>
            </p>
        </div>
    </div>
</div>

/* eski hali */
.container h1,
.container .breadcrumb a,
.container .card a {
    color: red;
}
/* yeni hali */
.container :is(h1, .breadcrumb a, .card a) {
    color: red;
}

Faydalanılan kaynaklar
https://www.w3.org/TR/selectors-4/#matches https://www.youtube.com/watch?v=McC4QkCvbaY https://css-tricks.com/where-has-a-cool-specificity-trick-too/