
Dziś kolejny artykuł z pogranicza, na temat CSS media queries, który nabiera dużego znaczenia zwłaszcza w kontekście współczesnych aplikacji WWW.
CSS media queries
Jest to moduł CSS3, który umożliwia renderowanie zawartości odpowiedniej dla danego typu urządzenia, w zależności od parametrów takich jak rozdzielczość ekranu. Funkcjonalność ta jest właściwie podstawą technologii Responsive Web Design, czyli w skrócie tworzenia elastycznych witryn, działających i wyglądających dobrze na możliwie wielu różnych urządzeniach (szczególnie mobilnych).
Użycie media queries
Należy określić typ @media oraz jedno lub więcej wyrażeń obejmujących właściwości. Jeśli na danym urządzeniu nastąpi dopasowanie do tych warunków, wtedy zostaną zastosowane zdefiniowane style CSS.
Przykład:
@media screen and (min-width: 480px) { border: solid 1px; }
CSS media queries można także zastosować do dołączania całych plików ze stylami.
Przykłady:
<link rel="stylesheet" type="text/css" href="my_file.css" media="(max-width: 800px)" /> <link rel="stylesheet" type="text/css" href="small_device.css" media="only screen and (max-width: 480px)" />
Jak widać intensywnie używane są tutaj parametry min-width lub max-width określające minimalną lub maksymalną szerokość ekranu, spełniającą warunki do zastosowania danych reguł CSS.
Operatory logiczne
Możliwe jest łączenie poszczególnych warunków używając operatorów logicznych, takich jak not, and, only.
Przykłady – operatory logiczne w CSS media queries:
/* 1. Reguły CSS dla szerokości 760px lub mniej */ @media screen and (max-width: 760px) { body { font-weight: none; } div#leftcolumn { display: none; } ... } /* 2. Reguły CSS dla szerokości pomiędzy 600 a 1200px */ @media (min-width: 600px) and (max-width: 1200px) { /* Reguły CSS ... */ }
Możemy określać orientację ekranu:
@media (min-width: 720px) and (orientation: landscape) { ... }
a także definiować różne rodzaje mediów, które oddzielamy przecinkami, na przykład:
@media screen and (min-width: 1280px), print and (min-resolution: 300dpi) { /* Reguły CSS ... */ }
Zachowanie przecinka w tym przypadku jest podobne do operatora OR. Tym sposobem możemy dowolnie kształtować to, co pokaże się na małym smartfonie, ekranie iPada czy telewizora.
Więcej przykładów zapytań
/* wszystkie urządzenia */ @media all { ... } /* tylko do druku */ @media print { ... } /* powierzchnia wyświetlania HD 1080 lub większa */ @media (min-width: 1920px) { ... } /* powierzchnia wyświetlania w formacie HDTV */ @media (aspect-ratio: 16/9) { ... } /* ekran w pozycji pionowej */ @media all and (orientation: portrait) { ... } /* ekran w pozycji poziomej */ @media all and (orientation: landscape) { ... } /* ekrany o wysokości dokładnie 1080px */ @media (device-height: 1080px) { ... }
Zatem w CSS3 mamy duże pole manewru jeśli chodzi o określanie typów i rozmiarów ekranów urządzeń. A jak to zrobić w JavaScript? Tak samo – użyć media queries.
Matchmedia i użycie media queries w JavaScript
Powiązanym API jest window.matchMedia, które pozwala testować zadane warunki.
Przykład:
var mq = window.matchMedia( "(min-width: 600px)" );
Zdefiniowaliśmy warunek, który w dalszej kolejności możemy sprawdzić i wykonać pożądane akcje w kodzie JavaScript:
if (mq.matches) { alert('Okno ma przynajmniej 600px'); } else { alert('Ekran jest za mały ...'); }
Polecam rzucić okiem także na stronę 'Testing media queries' na MDN:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries
Alternatywnym sposobem jest użycie biblioteki Modernizr, omawianej już przy okazji Szybkiego kursu HTML5.
Biblioteka ta posiada także funkcje testowania media queries, na przykład:
Modernizr.mq('only all and (max-width: 600px)')
Szczegóły znajdziemy w dokumentacji biblioteki:
Zasoby
Jak zwykle garść zasobów dla dociekliwych:
– CSS media queries na stronach Mozilla:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
– użycie media queries w praktyce:
http://css-tricks.com/css-media-queries/
– strona o CSS media queries, w tym narzędzia do testowania, przykłady, a nawet takie zagadnienia jak Responsive Adsense:
Podsumowanie
CSS media queries nabierają na znaczeniu. Ich opanowanie nie zajmie dużo czasu, a z pewnością warto być z obeznanym z ich użyciem.
Życzę miłej pracy / zabawy z media queries.