Dowiedz się, jak nowa składnia może uprościć zapytania o multimedia.
Zapytania o multimedia umożliwiają elastyczne projektowanie, a funkcje zakresu, które umożliwiają testowanie minimalnego i maksymalnego rozmiaru widocznego obszaru, są używane przez około 80% witryn, które korzystają z zapytań o multimedia. Specyfikacja zapytań dotyczących multimediów na poziomie 4 zawiera ulepszoną składnię tych zapytań zakresowych.
Z przykładów poniżej dowiesz się, jak może to usprawnić zapytania.
Typowe zapytanie o multimedia sprawdzające minimalną szerokość widocznego obszaru będzie wyglądać tak:
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Nowa składnia umożliwia użycie operatora porównywania:
@media (width >= 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Testowanie maksymalnej szerokości:
@media (max-width: 30em) {
// Styles for viewports with a width of 30em or less.
}
A wersja korzystająca z składni poziomu 4:
@media (width <= 30em) {
// Styles for viewports with a width of 30em or less.
}
Ta składnia może usprawnić zapytania, zwłaszcza podczas testowania między dwiema szerokościami. W tym przykładzie zapytanie o multimedia sprawdza widoczny obszar o minimalnej szerokości 400 pikseli i maksymalnie 600 pikseli.
@media (min-width: 400px) and (max-width: 600px) {
// Styles for viewports between 400px and 600px.
}
W nowej składni wygląda to tak:
@media (400px <= width <= 600px ) {
// Styles for viewports between 400px and 600px.
}
Funkcja, którą testujesz, w tym przypadku width
, znajduje się między tymi 2 wartościami.
Oprócz tego, że nowa składnia sprawia, że zapytania dotyczące multimediów są mniej skomplikowane, ma też tę zaletę, że zapewnia dokładność. Zapytania min-
i max-
uwzględniają określone wartości, np. testy min-width: 400px
dla szerokości co najmniej 400 pikseli. Nowa składnia pozwala Ci dokładniej określić, co masz na myśli, i uniknąć potencjalnych kolizji zapytań.
Aby używać nowej składni zakresu w przypadku przeglądarek, które nie mają jeszcze zaimplementowanej nowej składni, możesz użyć wtyczki PostCSS, która w Twoich arkuszach stylów zastąpi nową składnię starą.