Nowa składnia zapytań o media zakres

Dowiedz się, jak nowa składnia może uprościć zapytania o multimedia.

Rachel Andrew

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.

Przykłady poniżej pokazują, jak może ona uprościć zapytania.

Typowe testowanie zapytania o multimedia pod kątem minimalnej szerokości widocznego obszaru wyglądałoby w taki sposób:

@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 uprościć zapytania, zwłaszcza podczas testowania między 2 szerokościami. W poniższym przykładzie zapytanie o multimedia testuje widoczny obszar o minimalnej szerokości 400 pikseli i maksymalnej szerokości 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- obejmują podane wartości, np. min-width: 400px sprawdza szerokość 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ą.