Zapytania właściwości @supports

Język CSS ma wbudowany prosty system obsługi starszych wersji przeglądarek, które nie interpretują pełnej specyfikacji. Właściwości (cechy), których przeglądarka nie rozumie, są ignorowane. Oczywiście w takiej sytuacji strona nie będzie wyglądać dokładnie tak, jak założył jej twórca, ale nadal powinna być czytelna. Co ważne, nie spowoduje to odrzucenia całego arkusza stylów, więc dokument HTML zostanie poddany częściowemu formatowaniu - na tyle, ile będzie możliwe.

Zdarzają się jednak przypadki zbyt skomplikowane, aby do ich obsługi wystarczył ten prosty mechanizm. Zaimplementowana w przeglądarce obsługa jednej właściwości przy jednoczesnym braku innych może poważnie popsuć wygląd strony, a w przypadku skrajnym nawet całkowicie uniemożliwić jej odbiór przez czytelnika. Właście na taką ewentualność zostały stworzone warunkowe reguły stylów (zapytania właściwości - ang. feature queries). Pozwalają one dodać do arkusza deklaracje, które zostaną użyte przez przeglądarkę tylko jeżeli potrafi ona obsłużyć (albo nie potrafi obsłużyć) wskazaną deklarację CSS.

Na przykład, aby zastosować zespół reguł CSS tylko dla przeglądarek, które obsługują układ elastyczny, wystarczy otoczyć je specjalnym blokiem reguł warunkowych:

@supports (display: flex) {
	body {
		display: flex;
	}
	#MENU {
		width: 150px;
		min-width: 150px;
		order: -1;
		overflow: hidden;
	}
}

Natomiast dla przeglądarek, które nie obsługują takiego układu, możemy podać alternatywne reguły CSS:

@supports not (display: flex) {
	#MENU {
		width: 150px;
		float: left;
		overflow: hidden;
		position: relative;
	}
	#TRESC {
		margin-left: 150px;
	}
}

Możliwe jest również określanie bardziej skomplikowanych warunków przy użyciu operatorów logicznych and (ang. i) oraz or (ang. lub):

@supports (box-shadow: 0 0 10px 0 #000) or
	(-moz-box-shadow: 0 0 10px 0 #000) or
	(-webkit-box-shadow: 0 0 10px 0 #000) or
	(-o-box-shadow: 0 0 10px 0 #000) {
	.box {
		-moz-box-shadow: 0 0 10px 0 #000;
		-webkit-box-shadow: 0 0 10px 0 #000;
		-o-box-shadow: 0 0 10px 0 #000;
		box-shadow: 0 0 10px 0 #000;
	}
}

Przed oraz po operatorze logicznym (not, or, and) musi być wstawiony bały znak - np. spacja albo nowa linia. Ponadto w przypadku gdy w jednym wyrażeniu występują jednocześnie różne operatory, zgodnie ze specyfikacją CSS zawsze konieczne jest użycie dodatkowych nawiasów w taki sposób, aby w każdym z nich występowały tylko operatory tego samego typu. Sama testowana właściwość również zawsze musi być umieszczona w nawiasie.

@supports ((display: flex) or (display: inline-flex)) and (order: -1) {
	/* ... */
}

@supports (display: flex) or ((display: inline-flex) and (order: -1)) {
	/* ... */
}

Przy okazji zwracam uwagę, że dwa umieszczone powyżej warunki, znaczą zupełnie co innego. W ramach ćwiczenia zostawiam czytelnikowi zadanie wyjaśnienia, w jakiej sytuacji zostanie zastosowana pierwsza, a w jakiej druga reguła warunkowa.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
supports	28 2013-07-09	22 2013-06-25	12 2015-07-29	12.1 2012-11-20	9 2015-09-30