CSS :is()

CSS značka :is() nam omogoča krajše pisanje CSS kode. Na prvo žogo je pisanje kode rahlo podobno pisanju v CSS predprocesorju.

V praksi to pomeni, da lahko zapis:

ul li, ol li {}

napišemo v obliki:

:is(ul, ol) li {}

V zgornjem primeru se vidi logika pisanja :is(), če jo implementiramo na večjo obliko pa se pokaže prednost takega pisanja kode. Primer:

:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
color: #BADA55;
}

Zgornja :is() koda pokrije vse spodnje opcije

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;
}

Zanimivo razlago :is() je pripravil tudi Kevin Powell

Pred uporabo značke :is() se prepričajte v podpori slednji v spletnih brskalnikih vaših uporabnikov. Trenutno je podprta v praktično vseh brskalnikih, razen IE brskalnikih. Zanimiva pa je tudi funkcionalnost značke :where().

Vir: https://css-tricks.com/almanac/selectors/i/is/

Oznake: CSSis

Komentiraj


*