Media Queries level 4

Zapytania o media przeglądarki są bardzo istotne, gdy tworzymy responsywne strony www. Dzisiaj dobrą praktyką jest projektowanie stron w tak zwanym podejściu „mobile first” oraz elastycznie dopasowane do rodzaju urządzenia i szerokości jego ekranu. Dzisiaj chcę przedstawić czwarty poziom Media Queries, czyli dostosowanie elementów względem wielu parametrów w nowym podejściu (zakresy).

Teoria

Zapytanie @media jest określane jako spełnione, gdy typ mediów jest zgodny z urządzeniem, na którym jest wyświetlany dokument, a wszystkie wyrażenia funkcji mediów są prawdziwe.

Dla przypomnienia, są 4 typy urządzeń rozpoznawalnych w zapytaniach @media: all (wszystkie urządzenia), screen (urządzenia z ekranami), print (przeznaczone głównie dla wydruków), speech (syntezatory mowy).

W teorii wygląda to strasznie, jednak w praktyce jest to bardzo proste.

Zakres w zapytaniach @media

Każdy z nas do tej pory używa zapytań @media w poniższym stylu:

@media screen and (min-width: 480px) and (max-width: 860px) {
  .bar {
    display: block;
  }
}

Media Queries Level 4 zawiera wiele nowości i udogodnień w związku z tworzeniem zapytań. Jedną z nich jest tzw. zakres, który dla powyższego przykładu będzie wyglądał następująco:

@media screen and (480px <= width <= 860px) {
  .bar {
    display: block;
  }
}

Zatem, co się zmieni? Otóż ułatwi się sposób zapisu, a nawet się skróci. Nie trzeba będzie stosować już prefixów „min-„, „max-„.

Sposób zapisu jest już jasny, jednak jakie parametry można będzie objąć w zakres @media? Właściwie wszystkie te, które do tej pory.

Powyższy graf zawiera pełną informację o schemacie używania nowego zakresu.

Wsparcie przeglądarek

Niestety na chwilę obecną (17.09.2021) Media Queries Level 4 jest dopiero kandydatem do standardu.

Wsparcie wg. CaniUse.