Nowa składnia zapytań o media zakres

Dowiedz się, jak ta nowa składnia może usprawnić zapytania o media.

Rachel Andrew

Zapytania o multimedia umożliwiają elastyczne projektowanie stron. Funkcje zakresu, które umożliwiają testowanie minimalnego i maksymalnego rozmiaru widocznego obszaru, są używane w przypadku około 80% witryn, które używają zapytań o multimedia. Specyfikacja zapytań o multimedia na poziomie 4 zawiera ulepszoną składnię zapytań dotyczących zakresów.

Obsługa przeglądarek

Źródło

Z przykładów poniżej dowiesz się, jak może to usprawnić 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ównania:

@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.
}

Natomiast wersja wykorzystująca 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 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.
}

Można to zmienić w nowej składni w taki sposób:

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

Testowana funkcja – w tym przypadku width – przechodzi między obiema wartościami.

Poza tym, że zapytania o multimedia są mniej szczegółowe, nowa składnia nosi tę samą zaletę co do dokładności. Zapytania min- i max- zawierają podane wartości, np. testy min-width: 400px dla szerokości co najmniej 400 pikseli. Nowa składnia pozwoli Ci wyraźniej określić, co chcesz przekazać, i uniknąć sprzeczności zapytań.

Aby możliwe było użycie nowej składni zakresu z uwzględnieniem przeglądarek, które jeszcze jej nie wdrożyły, dostępna jest wtyczka PostCSS, która przepisuje w arkuszach nową składnię zgodnie ze starą.