CSS @supports

Krzysiek Furtak CSS/SCSS 1 Comment

Każdy developer doskonale wie, że nasze projekty musimy testować pod różnymi przeglądarkami. Im bardziej nowatorskie rozwiązania chcemy zastosować, tym bardziej musimy się do tego przyłożyć.

Na szczęście mamy wiele narzędzi do wykrywania czy dana przeglądarka wspiera nasze rozwiązanie. Doskonale sprawdza się w tym biblioteka Modernizr. Warto jednak zwrócić uwagę na nową funkcję CSS o nazwie @supports.

Pozwala ona sprawdzić czy przeglądarka wspiera daną właściwość wprost z szablonu CSS. Jako przykład wykorzystamy kod z artykułu o gradiencie nakładanym na tekst.

@supports(-webkit-background-clip:text) {
(...)
}

Dzięki tej linijce zabezpieczamy się przed brzydkim wyświetleniem tła pod tekstem. Jeśli przeglądarka nie obsługuje -webkit-background-clip:text; cała sekcja CSS’a zostanie pominięta.

Dla testów możecie otworzyć przykład w FF i Chrome, zobaczcie efekt. A następnie w obu przeglądarkach usuńcie linikę z @supports. O ile w Chrome efekt zostanie taki sam, to w FF zobaczymy brzydki prostokąt z gradientem.

Wsparcie przeglądarek (możesz sprawdzić na caniuse.com). Może nie jest imponujące, na tą chwilę wynosi nieco ponad 60%. Jednak jeśli stosujecie ją przy realizacji efektów wizualnych na stronie, moim zdaniem spokojnie można ją używać. Sekcja zostanie pominięta przez przeglądarki, które ją nie wspierają.