:is CSS

Jobber du med CSS har du helt sikkert laget stiler for å formatere ulike elementer på samme måte, med bruk av komma, slik som dette:

#footer h2, #footer h3, #sidebar h2, #sidebar h3{}

I dette eksempelet formateres h2 og h3 i henholdsvis #footer og #sidebar, og dette gjør vedlikeholdet enklere enn å definere de hver for seg slik som dette:

#footer h2{}
#footer h3{} 
#sidebar h2{} 
#sidebar h3{}

Men, med :is kan denne koden forenkles enda mer:

:is(#footer, #sidebar) :is(h2, h3){}

Dette betyr at der vi tidligere måtte lage ganske komplekse stiler, og hvor sjansen for feil naturligvis er større, der kan vi nå komme unna med noe som er veldig mye enklere.

:is(#header, #nav, #content, #footer, #sidebar) :is(h1,h2, h3, h4, h5, h6){}

Linjen over tilsvarer følgende:

#header h1, #header h2, #header h3, #header h4, #header h5, #header h6, #nav h1, #nav h2, #nav h3, #nav h4, #nav h5, #nav h6, #content h1, #content h2, #content h3, #content h4, #content h5, #content h6, #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #sidebar h1, #sidebar h2, #sidebar h3, #sidebar h4, #sidebar h5, #sidebar h6{}

Så, i hvilke nettlesere fungerer :is? Støtten er bred, sett bort ifra IE…

Relaterte kurs

• Kurs i HTML, CSS og JavaScript