I dagens CSS skal vi se på @supports
Denne regelen kan tenkes på mange måter som det samme som mediaqueries, men for støtte for andre CSS regler. Det vil si at man kan spørre nettleseren først om noe er støttet før du prøver å ta det i bruk. Selvfølgelig bør man da ha en stil å falle tilbake på om det ikke er støttet.
@supports selector(h2 > p) {
}
Dette eksempelet vil for sjekke om nettleseren støtter >
selektoren før den setter på stilene. Her er selector()
funksjonen brukt som er en av mange funksjoner støttet av @supports
. Man kan også bruke and
, or
og not
for å finjustere spørringen enda mer.
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {
}
Med dette kan man drive med det som pleide å være en buzzword noen år tilbake, nemlig progressive enhancement, hvor man legger til mer og mer funksjonalitet ettersom de er støttet. Anbefaller alle å ta i bruk denne da den er godt støttet.
Sjekk gjerne ut MDN-siden for å finne ut alle muligheten som @supports
støtter.