Invalid RSS feed!

CSS @supports

-

Napjaink webfejlesztésének egyik központi része a funkció detektálás. Az @supports szabály használatával szabványosan mérhetjük fel az aktuális futási környezet egyes funkcióit!

A képesség detektálás lényege, hogy egy adott környezetben felmérjük az elérhető funkciókat és a kódunkat ennek megfelelően írjuk meg. Lekezelhetjük, hogy mit jelenítsen meg egy olyan böngésző, ami éppen nem támogatja az aktuális funkciót és mit egy olyan, ami támogatja.

A legnépszerűbb képesség detektáló bővítmény a Modernizr, ami lényegében megalapozta a képesség detektálás (feature detection) fogalmát. A bővítmény segítségével egy-egy tulajdonság elérhetőségét letudjuk kezelni CSS-ben és JavaScript-ben is. CSS-ben a bővítmény által a <html> elemhez hozzáadott osztályok segítségével tudunk egy-egy feature-höz kapcsolódóan kódot írni. Attól függően, hogy egy feature elérhető, vagy sem a könyvtár a feature nevét adja a <html> elemhez, mint például: .feature, vagy .no-feature. JavaScript-ben a Modernizr objektumon keresztül kérhetjük le egy funkció állapotát! A könyvtárról részletesebben itt olvashatsz!

A @supports szabály

A @supports szabály a CSS Conditional Rules Module része, ebben a leírásban találhatjuk a @media szabályt is, ami nem véletlen!

A szabály segítségével CSS tulajdonság/érték párokat ellenőrizhetünk a Media Query-k esetében már megszokott szintaktikával!

A következőképpen néz ki egy teszt:

@supports (background-blend-mode: normal) {
    .element {
        mix-blend-mode: overlay;
    }
}

A fenti megadás előnye az, hogy ellenőrizhetünk értéket is! Előfordulhat, hogy egy böngésző már támogat egy tulajdonságot, azonban egy értéket nem!

Amennyiben a fenti állítást tagadni – vagyis azokat a böngészőket szeretnénk megcélozni, amik nem támogatják a fenti paramétereket – szeretnénk, úgy a not() kulcsszót tudjuk használni!

@supports not(background-blend-mode: normal) {
    .element {
        mix-blend-mode: overlay;
    }
}

Ha több feltételt szeretnénk ellenőrizni, úgy az or és and kulcsszót használhatjuk, akárcsak a @media szabály esetén!

@supports ((property1: value1) and (property2: value2)) {
      /* stílusok... */
}

Általános használati szabályok:

  • A tesztelendő értékeknek zárójelben kell lenniük!
  • A tesztelési feltételnek tartalmaznia kell a tulajdonságot és az értéket is!

Használat JavaScript-ben

JavaScript-ben a CSS objektum supports() függvényének a segítségével vizsgálhatunk feltételeket. A visszatérési érték true, vagy false lesz!

if (CSS.supports('mix-blend-mode', 'luminosity')) {
     // A tulajdonság/érték pár támogatott!
} else {
     // A tulajdonság/érték pár nem támogatott!
}

Támogatottság

Sajnos a @supports szabályt IE11, Opera Mini nem támogatja. Általában a nagyobb probléma az IE11 és elődei, amik még jó pár felhasználó gépén megtalálhatóak. Mindezektől függetlenül már a következő projektünkben hasznát vehetjük a szabálynak, ha Modernizr-t nem is akarunk minden projektünkben használni a @supports natív szabály nagyon hasznos lehet!

Szolgáltatások

Full-stack webfejlesztés

01.

Egyedi weboldalt szeretnél?

WordPress CMS-el fejlesztve megvalósítjuk elképzeléseid. Készítünk egy modern oldalt, amivel felveheted a versenyt a konkurenciával.

02.

Komplex webes ötleted van?

Teljes körű alkalmazásfejlesztési szolgáltatást nyújtunk, amennyiben van egy olyan ötleted, vagy terved, ami nem valósítható meg kész megoldásokkal.