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).
ŁukaszPodziel się artykułem:
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.
