Nowa składnia media query w CSS

Wprowadzenie

Dzisiejszy wpis opisuje w pełni składnię techniki media query i na przykładach postaram się pokazać zmianę podejścia do tego tematu.

@media screen and (min-width: 768px) {
  .element {
    /* style */
  }
}

Powyższy kod jest przykładem obecnej (jeszcze) składni. Opisuje on styl dla selektora .element, gdy okno przeglądarki jest szersze niż 768 pikseli. Zatem jaka składnia ją zastąpi?

Zakres wielkości okna

Podczas pisania styli danego elementu na stronie, może zajść konieczność zmiany jego właściwości dla pewnego zakresu szerokości okna przeglądarki. Mówiąc precyzyjnie, „od – do”. Wtedy po prostu używamy operatora „and”, a konkretnie:

@media screen and (min-width: 768px) and (max-width: 992px) {
  .element {
    /* style */
  }
}

W tym przypadku .element zostanie zmodyfikowany dla szerokości w zakresie od 768px do 992px.

Zatem jaka przyszłość czeka media query?

Nowa składnia @media query

Duża zmiana w specyfikacji Media Queries Level 4 polega na tym, że mamy nowe operatory. Do tej pory były one łączone, teraz będzie można spokojnie skorzystać z operatorów porównawczych:

• > – wartość większa od,
• < – wartość mniejsza od,
• = – wartość równa,
• >= – wartość większa bądź równa,
• <= – wartość mniejsza bądź równa.

Odnosząc się do pierwszego przykładu, nowy zapis składni media query będzie mógł wyglądać następująco:

@media (width >= 768px) {
  .element {
    /* style */
  }
}

Według mnie jest to zapis prostszy i bardziej czytelny.

Przejdźmy teraz do przykładu drugiego (patrz wyżej) i oto jak będzie wyglądał nowy zapis, jeśli chodzi o zakres szerokości „od – do”:

@media (768px <= width <= 992px) {
  .element {
    /* style */
  }
}

Wsparcie przeglądarek dla nowego media query

Przykład użycia nowego schematu

dark