Media Queries w CSS2 to nic innego jak wybór medium, dla którego ma być serwowany bieżący plik CSS. Czyli możemy zdecydować, które pliki wyświetlać w wersji do druku, a które dla np. odbiorników telewizyjnych.
Tak było dotychczas. Wraz z nadejściem CSS3 rozszerzono możliwości Media Queries. Teraz możemy dodatkowo decydować o dołączaniu odpowiedniego pliku/kodu CSS na podstawie rozdzielczości ekranu, orientacji wyświetlacza, kolorów, etc.
A wszystko w celu ułatwienia życia webdeveloperom, o czym dalej.
Jak było wcześniej z Media Queries?
Media Queries nie są żadną nowością, bowiem już wcześniej dysponowaliśmy atrybutem media dla stylów CSS. Jednak wcześniej spektrum możliwości nie zachwycał, gdyż jedynym warunkiem, który mogliśmy tam umieścić, był wybór typu medium przy wyświetlaniu strony.
Do wyboru były więc następujące typy medium:
- screen – ekrany komputerowe,
- tty – media używające siatki o stałej szerokości znaków jak dalekopisy, terminale lub przenośne urządzenia z ograniczonymi możliwościami wyświetlania,
- tv – odbiorniki telewizyjne (niska rozdzielczość, ograniczone przewijanie, dostępny dźwięk),
- projection – prezentacje projektorowe,
- handheld – urządzenia ręczne/przenośne (mały ekran, czarno-biały),
- print – urządzenia drukujące,
- braille – urządzenia do czytania braillem, przeznaczone dla osób niewidomych,
- aural – syntezatory mowy, czytniki,
- all – dostępne dla wszystkich powyższych urządzeń.
Już wtedy mogliśmy też wybrać parę typów mediów na raz:
1 2 | <link rel="stylesheet" media="screen, projection" href="normal.css"> <link rel="stylesheet" media="print" href="print.css"> |
Co nowego w Media Queries?
Wraz z wprowadzeniem CSS3 w nowoczesnych przeglądarek pojawiły się także rozszerzone możliwości Media Queries. Nowe możliwości nadal możemy wykorzystać zarówno w kodzie HTML (dla elementu STYLE), jak i bezpośrednio w pliku CSS.
Po stronie HTML tak wygląda przykładowy kod z wyborem medium:
1 | <link rel="stylesheet" media="screen and (min-width: 800px) and (min-height: 1024px)" href="normal.css"> |
Nowością w powyższym kodzie jest rozszerzona zawartość atrybutu media. Ustawiliśmy tutaj warunek, by załadować plik normal.css tylko pod warunkiem, gdy:
- stronę otworzono z urządzenia posiadającego ekran
- minimalna szerokość ekranu wynosi 800 pikseli
- minimalna wysokość ekranu wynosi 600 pikseli
Jeśli urządzenie, na którym strona została otworzona nie spełnia powyższych kryteriów, wtedy plik normal.css nie zostanie załadowany. Oczywiście takich warunków może być więcej, o czym za chwilę.
Alternatywna wersja dla powyższego kodu HTML, tym razem w CSS:
1 2 3 | @media screen and (min-width: 800px) and (min-height: 1024px) { /* zawartość pliku normal.css */ } |
Jak wszyscy wiem, również bezpośrednio z kodu CSS możemy importować zewnętrzne pliki. Także i tutaj możemy więc ustawić odpowiednie media:
1 | @import url(normal.css) screen and (min-width: 800px) and (min-height: 1024px); |
Przy pisaniu swoich warunków możemy używać także słów kluczowych not oraz only, np. :
1 2 3 | <link rel="stylesheet" media="not screen and (color)" href="example.css" /> <link rel="stylesheet" media="only screen and (color)" href="example.css" /> |
Możemy także po przecinku wypisywać kolejne warunki, które muszą być spełnione, np. :
1 | <link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" /> |
Media features
Czas na omówienie konkretnych możliwości Media Queries.
Typ media
Jak już na wstępie zostało omówione, pierwszym z możliwych warunków (dostępnym zresztą od dawna) do zastosowania jest wybór typu medium, na którym odpalamy stronę (aural, braille, handheld, print, projection, screen, tty, tv).
Wymiary ekranu
Możemy zadecydować, na ekranach o jakiej rozdzielczości wczytywać nasz kod CSS. Do wyboru jest oczywiście długość i szerokość ekranu (mowa o rozdzielczości).
Możemy określać zarówno minimalne, jak i maksymalne wielkości, a regułki za to odpowiedzialne to: min-width, max-width, min-height, max-height.
Na szczęście nie musimy kierować się wyłącznie rozdzielczością ekranu. Często bywa tak, że użytkownik ma dużo mniejszy obszar „widoczności” strony WWW, aniżeli rozdzielczość ekranu. Wynika to z faktu, iż różne programy lubią pojawiać się jako toolbar po prawej lub lewej stronie ekranu. Także pasek zadań (Windows) bywa przenoszony przez niektórych na boki ekranu.
W tym celu powstały kolejne regułki dla Media Queries pozwalające rozpoznać „prawdziwą” szerokość/wysokość wyświetlanej strony, tj. device-width, device-height, min-device-width, max-device-width, min-device-height oraz max-device-height.
Orientacja ekranu / Aspect Ratio
Regułki te są do siebie podobne, dlatego stanowią jeden podpunkt. Mianowicie orientacja ekranu wskazuje, czy ekran jest szerszy niż wyższy czy też na odwrót :-) Czyli inaczej mówiąc, czy mamy do czynienia z płaskim i szerokim ekranem (komputery, telewizory) czy wąskim, lecz wysokim (urządzenia mobilne, telefony)?
Jak łatwo się więc domyślić, dla orientacji mamy do wyboru dwie regułki:
- orientation: portrait – orientacja pionowa
- orientation: landscape – orientacja pozioma
Aspect Ration jest to natomiast stosunek wysokości do szerokości ekranu (lub obszaru aktualnie wyświetlonej strony).
Przykład, w którym szerokość ekranu jest dokładnie jeszcze raz tak wielka jak wysokość „widocznego” obszaru roboczego strony:
1 | @media all and (device-aspect-ratio: 32/18) { … } |
Przy wyborze Aspect Ration mamy do dyspozycji następujące regułki: aspect-ratio oraz device-aspect-ratio.
Kolory
Regułka odpowiedzialna za warunkowe serwowanie plików CSS w zależności od kolorów, jakie obsługuje urządzenie użytkownika. Masz tutaj następujące regułki (już bez objaśnień – nazwa sama mówi za siebie): color, min-color, max-color, color-index, min-color-index, max-color-index, monochrome, min-monochrome, max-monochrome.
Kilka praktycznych przykładów użycia:
1 2 3 4 5 | @media (color) { /* urządzenie obsługuje kolory */ } @media (min-color-index: 256) { /* głębia kolorów - minimum 256 kolorów */ } @media (monochrome) { /* urządzenie jest monochromatyczne - składa się jedynie z barw prostych */ } |
DPI wyświetlacza
Możemy także rozpoznać liczbę DPI wyświetlacza w urządzeniu renderującym naszą stronę WWW i na podstawie wyniku zaserwować odpowiednie style CSS (jest to szczególnie przydatna opcja przy druku / urządzeniach drukujących).
Regułki, którymi możemy dysponować: resolution, min-resolution, max-resolution:
1 2 | @media print and (min-resolution: 300dpi) { … } @media print and (min-resolution: 118dpcm) { … } |
Sposób skanowania
Wartość ta nie jest dla mnie do końca jasna, ponieważ nie tworzyłem JESZCZE stron pod telewizory :-) Przykład ze specyfikacji W3C:
1 | @media tv and (scan: progressive) { … } |
Wsparcie przeglądarek dla CSS Media Types
Nowoczesne przeglądarki, tj. Chrome, Opera, Mozilla czy Safari (od 4.0) radzą sobie bezproblemowo z wszystkimi powyższymi warunkami.
Jak zwykle problem stanowi Internet Explorer, co nie jest żadną nowością. Obsługa Media Queries jest zaimplementowana dopiero od wersji 9.0.
Jeśli natomiast chodzi o przeglądarki mobilne to nie ma żadnego problemu – jest zapewnione wsparcie dla Media Queries, przynajmniej dla iOS Safari, Opera Mini, Opera Mobile czy Android Browser.
Co z Internet Explorer?
Niestety jak zwykle kulą u nogi jest zacofany Internet Explorer, który wciąż stanowi spory procent rynku przeglądarek i o którego trzeba od czasu do czasu zadbać.
Na szczęście znalazło się kilku dobrych ludzi chcących pomóc innym webdeveloperem i napisali wtyczki dodające obsługę Media Queries tym ułomnym i przestarzałym przeglądarkom ;-)
css3-mediaqueries.js
Jak zapewnia autor tej biblioteki, css3-mediaqueries.js dodaje wsparcie CSS3 Media Queries dla takich przeglądarek jak: IE 5+, Firefox 1+ oraz Safari 2.
Uwaga od autora – z wykorzystaniem tej biblioteki Media Queries nie zadziała dla @import (którego i tak nie warto używać ze względów wydajnościowych).
Największą wadą biblioteki jest jej rozmiar, bowiem zajmuje całe 15 KB!
Respond
Kolejna ciekawa biblioteka łatająca ułomności przestarzałych przeglądarek, Respond, zapewni wsparcie dla: IE 6, IE 7 oraz IE 8.
Aby biblioteka rozpoznała Media Queries należy każdą klauzulę zamknąć komentarzem, na wzór poniższego kodu:
1 2 3 | @media screen and (min-width: 480px){ /* some css */ }/*/mediaquery*/ |
Największą zaletą biblioteki Respond jest jej mały rozmiar, gdyż zajmuje niecały 1 KB! Wadą natomiast jest, że dodaje wsparcie jedynie dla regułek typu medium oraz wymiarów ekranu (min-width, max-width). Nie jest to wiele, ale w większości projektów wystarczy.
Kilka słów podsumowania
Jak już zapewne zauważyłeś, nowe możliwości Media Queries zachwycają i pewnie nie raz będę z nich korzystał w przyszłości.
Największą zaletą Media Queries jest to, że możemy napisać jedną stronę i dla niej serwować style CSS dla wielu urządzeń bez powielania czy przepisywania kodu HTML – dla komputerów, tabletów, drukarek, urządzeń mobilnych, tv, czytników i reszty (z czasem pewnie pojawi się tego więcej).
Czy już dzisiaj możemy korzystać z Media Queries? Jak najbardziej, bowiem wszystkie nowoczesne przeglądarki (nawet mobilne) w pełni obsługują tą technologię. Dla Internet Explorer sugeruję natomiast wykorzystywać jedną z powyższych bibliotek.
Ps. przy wczytywaniu dodatkowej biblioteki dla IE może przydać się mój wcześniejszy wpis: Sposoby wczytywania JavaScript. Można także skorzystać z komentarzy warunkowych dla Internet Explorer.
Wyraz „media” odmienia się jako – typ medium, typy mediów, itd.
@css3.pl: dzięki, właśnie nie byłem pewien jak odmieniać słówko „media” czy jak tłumaczyć „Media Queries” (dlatego zostawiłem angielską nazwę). Poprawki naniesione ;)
Dobry wpis! Właśnie tego potrzebowałem.
[…] Parę pozycji wymaga wyjaśnienia. Właściwość color-index określa tak naprawdę ilość kolorów, które ekran może wyświetlić (np. 256 czy 16 mln). Właściwość monochrome ma sens tylko w kontekście urządzeń nie-kolorowych (jak np. e-ink), w innym przypadku przyjmuje wartość 0. Poza tym wszystkie powyższe właściwości poza orientation, scan i grid mogą być używane z przedrostkami min- i max-. Media queries używa się tak samo jak niegdyś określało się arkusze dla druku, a więc w formie @media selektor Ciekawostką jest, że poszczególne selektory można łączyć za pomocą podstawowych operatorów logicznych jak and czy not. Ciekawe artykuły na ten temat popełnili Sławomir Kokłowski na swoim Kursie HTML czy Kamil Brenk na swoim blogu. […]
Dzięki za informacje. Może warto pokusić się o jakąś bibliotekę media queries gdzie w tabelaryczny sposób możesz opisać każdą z funkcji.
Bardzo dobry wpis ;) dzięki, bardzo mi pomogłeś ogarnąć media queries. pozdrowienia
nieprawdą jest iż IE jest zacofany – ma wiele zalet, które nie mają inne przeglądarki. niestety prawdą jest iż IE nie wprowadza niektórych rozwiązań upierając się przy swoim – ale to jest wojna o kasę.
odwoływanie się do wersji wcześniejszych niż 9 nie ma już sensu.
google chrom nie należy uznawać za nowoczesną przegladarkę chyba że się wierzy reklamom googla. jak to piszę to właśnie wypuszczono chrom wersja 26 ;). biedni userzy sami testują tego gniota nawet nie wiedząc, że odwalają robotę za lab.googla. oczywiście sam silnik nie jest niczym nowym ale jest marketing.
można wejść też na oficjalną stronę w3org i łatwo zauważyć iż właśnie dla wymienionych tu przeglądarek jest mnóstwo różnic dla css3. właściwie to większość elementów trzeba wpisywać dla każdej przeglądarki osobno, ie nie jest wyjątkiem.
@mikolo: cześć, krytykowałem IE8 za brak wsparcia dla RWD. Krytykowałem Internet Explorer/Microsoft za rzadkie aktualizacje czy brak automatycznych aktualizacji.
Webkit, Blink, Gecko czy nawet Presto wprowadzają szybko nowe funkcjonalności wg specyfikacji, dodając swoje prefiksy – w końcu ich użycie jest eksperymentalne. Trident nie wprowadza wcale, więc jest zacofany.
Użytkownicy testują nowoczesne przeglądarki, ale użytkownicy wersji alpha/beta (np. Chrome Canary, Firefox Nightly Builds). Pozostali jadą na sprawdzonej wersji stable.
Extra artykuł :) Bardzo fajnie i jasno opisujesz wszystko.
Chcemy więcej! :)
@none: dzięki :) Blog ma niestety przerwę w rozwoju, za duży natłok prac nad własnymi projektami.
Dzięki za wpis! Zawiera dosyć wartościowe uwagi.
[…] arkusza CSS dla urządzeń mobilnych, za pomocą media queries. Tutaj krótkie wyjaśnienie: Media Queries CSS3. Niestety jest to wyjście jedynie dla tych, którzy maja podstawową wiedzę o pisaniu stron, ale […]
co nalezy wkleić na stronę aby plik ze stylami był ladowany tylko w komórkach skoro współczesne komórki mają także rozdzielczosci fullHD