CSS: Feature Queries

CSS Feature Queries, ki jih uporabimo s pomočjo značke @supports nam omogoča, da del CSS-ja zapremo v pogojni blok. V praksi to pomeni, da se določen del CSS-ja izpiše le v primeru, če brskalnik oz. njegov »user agent« podpira določeno CSS značko.

Zelo futuristična značka, ki smo jo že dlje časa čakali v CSS-ju je @supports. Slednja nam omogoča pogojevanje določenih stilov v samem CSS-ju. Poleg osnovnega pogoja lahko uporabimo tudi operaterje, kot so »and« in »not«. Uporaba CSS značk, kot je flexbox in grid bo sedaj precej lažja.

Primer za Flexbox

@supports ( display: flex ) {
.foo { display: flex; }
}

Naprednejša oblika, ki preveri, če brskalnik uporablja samo starejšo verzijo Flexbox-a

@supports ( display: flexbox ) and ( not ( display: flex ) ) {
.foo { display: flexbox; }
}

Ali lahko Feature Queries – @supports že uporabimo?

Feature Queries ima danes že zelo široko podporo, težave imamo lahko le pri brskalniku IE, kjer je potrebno zagotoviti ustrezno alternativo.

Save

Oznake: CSSFeature QueriesHTML

Komentiraj


*