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.
Czy ten sposób na pewno działa dla IE 7 i 8 nawet po wrzuceniu skryptu respond? Bo z tego co zauważyłem to bez podanej szerokości dla jakiegos kontenera, a zamiast tego probie nadania mu szerokosci przez @media only screen and (min-width: 480px) { #element { width: ; } to IE7 i 8 nawet nie reagują. Dopiero po podaniu mu na sztywno szerokosci w pliku css dla elementu zaskakuje.
@kenio: Nie wiem czy dobrze rozumiem, ale Ty próbujesz za pomocą Media Queries „stylować” elementy na stronie? ;)
Media Queries służy do warunkowego wczytywania odpowiednich plików CSS ze stylami – jeśli sprzęt użytkownika spełnia pewne wymagania to wczytujemy xxx.css, jeśli spełnia inne wymagania to yyy.css.
hmm…..czyżby ?
mam stronę …. ustawiłem media queries (http://www.testyehe.yoyo.pl/index.html)
przeglądam w Chrome FF i wszystkich wymioenionych wyżej i wygląda że nie działą … rozdzialczość mam 1680 x 1050 …. co tu może nie grać ?
kiedy usunę wszystko z media= i zostawię tylko „screen” arkusz wczytuje się poprawnie.
@pingwinoos: ustawiłeś, że użytkownik musi mieć ekran o minimalnej rozdzielczości: 1680×1050 pikseli. Niestety nie mam tak dużego wyświetlacza/monitora i nie mogę nawet przetestować.
Z tego co widzę to niecałe 5% Polaków (http://ranking.pl/pl/rankings/screen-resolutions.html) będzie widziało u Ciebie style, bo tylko dla nich wczytujesz jakiś arkusz. Na pewno taki miałeś zamiar?
Btw. tak, media queries działają dla wymienionych przeglądarek i wiele stron już je stosuje w praktyce, w tym kilka moich ostatnich projektów.
Nie neguje że nie działają, chciałem dociec dlaczego to u mnie nie działa.
CHciałem użyć meda quiers aby wziąść pod uwagę wszystkie dostępne rozdzielczości (a przynajmniej większość)
Ja mam taki monitor, także arkusz powinien się chyba wgrywać a nie wgrywa się.
Ok zmieniam na 800×600 abyś mógł przetestować.
kurde ale jaja, faktycznie działa, przepraszam za zamieszanie ;D
sory….