Rozpoznawanie przeglądarki w stylu CSS

Kategoria: Webmastering Data publikacji:

Można tworzyć wiele standardów, specyfikacji, norm dotyczących stron internetowych, ale prawdopodobnie nigdy nie osiągniemy stanu, w którym wszystkie przeglądarki renderują strony identycznie. To zrozumiałe — różne firmy, różni producenci, różni ludzie mają różne interesy. Jednak autor strony WWW powinien zadbać o to, by mimo tej niezgodności, tworzona witryna jakimś cudem w każdej przeglądarce zachowywała się dokładnie tak samo.

Dlatego chciałbym podzielić się z wami ciekawą sztuczką, jaką udało mi się wymyślić podczas pracy nad najnowszą wersją serwisu RadioLista. Otóż w CSS-ie jest klauzula o nazwie @supports. Ma ona składnię bardzo podobną do @media, lecz tak jak @media służy do rozpoznawania medium, urządzenia używanego do renderowania strony, tak @supports umożliwia zweryfikowanie, czy używana przeglądarka wspiera (supports) jakąś funkcję CSS-a. Zobaczmy to na prostym przykładzie.

@supports( background-position-x: 0 ) {
	div#kaczociong {
		background-position-x: 10px;
	}
}

Właściwości background-position-x oraz background-position-y umożliwiają zmianę pozycji tła obrazkowego w poziomie i pionie oddzielnie. Są obsługiwane od lat przez Chrome, a nawet przez Internet Explorera 6. Niestety Firefox zyskał wsparcie do tej funkcji dopiero kilka miesięcy temu. Co prawda popularność „liska” osłabła, jednak nadal podczas tworzenia witryny WWW nie należy ignorować jego użytkowników. W takich sytuacjach klauzula @supports może być przydatna. Dzięki niej możemy część kodu CSS podać tylko tym przeglądarkom, które potrafią go obsłużyć.

W tym przykładzie jedynie przeglądarki wspierające background-position-x dostaną podany styl CSS, a te niewspierające tej właściwości nie otrzymają nic. Gdy zechcemy zachowania odwrotnego, możemy skorzystać z negacji.

@supports( not (background-position-x: 0) ) {
	div#kaczociong {
		background-position: 10px 0;
	}
}

Klauzulę @supports wspierają: Firefox (od sierpnia 2013 roku), Chrome (od lipca 2013 roku), a także Microsoft Edge. Jak łatwo zgadnąć, w Internet Explorerze wsparcia do tej funkcji brak. Więcej informacji na caniuse.com.

Podczas przygotowywania stylów CSS dla RadioListy wykorzystałem jednak @supports bardziej kreatywnie. ;-) Zachciało mi się dodać blokowi nagłówkowemu cień za pomocą box-shadow. I wszystko było dobrze, dopóki nie odpaliłem przeglądarki innej niż ta używana przeze mnie. Okazało się, że te same wartości box-shadow są inaczej renderowane przez różne przeglądarki. Ten sam cień Internet Explorer renderuje bardzo delikatnie, Chrome tylko odrobinę mocniej, za to Firefox — mocno. Gdy już miałem rozłożyć ręce, z pomocą przyszła klauzula @supports.

header.main {
	box-shadow: 0 0 5px rgba( 0,0,0, 0.2 );
	/* Chrome, IE, Edge */
}
@supports( (-moz-user-select: none) or (-o-transition: none) ) {
	header.main {
		box-shadow: 0 0 4px rgba( 0,0,0, 0.18 );
		/* Firefox, Opera 12 */
	}
}

Można by uznać, że skoro każda z przeglądarek box-shadow wspiera, to @supports nie jest tu potrzebne, ale to nie o to chodzi. Otóż każda, ale to każda przeglądarka posiada właściwości poza standardami, niedostępne w innych przeglądarkach. To, że nazwę jednej z nich wsadzę w warunek @supports, nie oznacza, że muszę z niej skorzystać. ;-) W ten sposób można rozpoznać używaną przeglądarkę internetową w stylu CSS.

div:before { content: "Nie wiem, czego używasz" }

@supports( -webkit-app-region: initial ) {
	div:before { content: "Używasz Chrome'a" }
}
@supports( -moz-user-select: none ) {
	div:before { content: "Używasz Firefoksa" }
}
@supports( -ms-scroll-limit: 0 0 0 0 ) {
	div:before { content: "Używasz MS Edge" }
}
@supports( -o-transition: none ) {
	div:before { content: "Używasz Opery 12" }
}

Choć wygląda to arcyciekawie, warto pamiętać o dwóch sprawach. Po pierwsze, właściwości CSS spoza standardów mogą w przyszłości zniknąć z danej przeglądarki, więc nie należy używać tego triku wobec krytycznych elementów strony. Należy też zawsze zadbać o styl podstawowy poza @supports. Po drugie, niektóre przeglądarki nieoparte na silnikach WebKit/Blink wspierają część właściwości z przedroskitem -webkit-(na przykład Opera 12 lub MS Edge), należy więc dobierać je ostrożnie.

Dodaj komentarz