Zapytania o media to temat dość obszerny, przynajmniej jak na CSS. Michał Kortas pod koniec ubiegłego roku napisał artykuł o wykorzystaniu ich w responsive web design. Tym razem artykuł zawierający większość zapytań o media z jakimi możesz się spotkać, od szerokości ekranu poprzez sprawdzenie typu urządzenia i ilości używanych przez ekran bitów po wyświetlacze o dużym zagęszczeniu pikseli typu „Retina”.
Media Queries są jednym, ze sposobów na „ugryzienie” RWD, przekładam tego typu rozwiązania nad te w JavaScript. Taki stan rzeczy jest spowodowany przede wszystkim wydajnością, ale okupiony ilością wspierających urządzeń. Wsparcie Media Queries jest względnie wysokie i wynosi 86,69% wg. caniuse.com. Problemy zaczynają się wraz z IE8.
Poniżej znajduje się spis 27 przykładów zapytań. Jeżeli nie znajdziesz tam odpowiedzi na swoje pytanie dotyczące zapytań o media to warto zajrzeć na stronę dokumentacji W3C.
Wszystkie urządzenia
1 | @media all |
Tylko do druku
1 | @media print |
Tylko czytniki ekranu
1 | @media speech |
Inne możliwe typy mediów: all, braille, handheld, print, projection, screen, tty, tv, embossed, speech, 3d-glasses
Powierzchnia wyświetlania QSXGA i większa
1 | @media (min-width:2560px) |
Powierzchnia wyświetlania HD 1080 i większa
1 | @media (min-width:1920px) |
Powierzchnia wyświetlania SVGA i większa
1 | @media (min-width:800px) |
Ekrany w pozycji pionowej
1 | @media all and (orientation:portrait) |
Ekrany w pozycji poziomej
1 | @media all and (orientation:landscape) |
Ekrany o wysokości dokładnie 600px
1 | @media (device-height: 600px) |
Ekrany o wysokości dokładnie 1080px
1 | @media (device-height: 1080px) |
Powierzchnia wyświetlania formacie PAL
1 | @media (aspect-ratio: 4/3) |
Powierzchnia wyświetlania w formacie HDTV
1 | @media (aspect-ratio: 16/9) |
Ekran w formacie PAL
1 | @media (device-aspect-ratio: 4/3) |
Ekran w formacie HDTV
1 | @media (device-aspect-ratio: 16/9) |
Tylko ekrany kolorowe
1 | @media screen and (color) |
TrueColor (32 bity)
1 | @media screen and (color: 8) |
Tu sprawa jest trochę skomplikowana. Zapytanie dokładnie brzmi „Czy to ekran i niebieski kolor zapisany jest na 8 bitach”. W uproszczeniu jest tak dlatego, że 8 bitowy monitor wyświetla kolor czerwony na 3 bitach, zielony na 3 bitach i niebieski na 2 bitach. Sprawdzenie czy ekran ma 8 bitów będzie wyglądać tak: @media all and (color: 2) – zależy od bitów na kolor niebieski. Następnie 16 bitów – czerwony na 6 bitach, zielony na 6 bitach i niebieski na 4. Odpowiednio 32 bitowy ekran – czerwony na 12 bitach, zielony na 12 bitach, niebieski na 8. Oczywiście wliczając kanał Alfa. Z jego pominięciem 32 bitowy monitor wyświetla kolor na 24 bitach.
Co najmniej High Color (16 bitów)
1 | @media all and (min-color: 4) |
Urządzenie nie używa CLUT
1 | @media all and (color-index: 0) |
Minimalnie 256 kolorów (wymaga CLUT)
1 | @media all and (min-color-index: 256) |
Urządzenie monochromatyczne
1 | @media all and (monochrome) |
Urządzenie monochromatyczne i minimalnie 2 bity na piksel
1 | @media all and (min-monochrome: 2) |
Telewizor ze skanowaniem międzyliniowym
1 | @media tv and (scan: interlace) |
Telewizor ze skanowaniem progresywnym
1 | @media tv and (scan: progressive) |
Urządzenie w których na wyjściu jest siatka lub bitmapa (starsze telefony komórkowe)
1 | @media handheld and (grid) |
Retina (Urządzenia o wysokim zagęszczeniu pikseli)
1 | @media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 2dppx) |
Podsumowanie
Media Queries to zagadnienie, któremu zdecydowanie warto poświęcić jedno lub dwa popołudnia, gdyż ciągle rosnący udział urządzeń mobilnych zmusza do tworzenia bardziej elastycznych witryn. Wszystkie powyższe zapytania zostały użyte w demie. Standardowo przygotowane pliki pobierzecie z mojego konta na GitHub.
„Retina (Urządzenia o wyskokim zagęszczeniu pikseli)” – macie tutaj literówkę.
Dziękuję, Pawle, za spostrzegawczość. Poprawione :-)
W demie poprawiłem, tu mi umknęło. +1 za spostrzegawczość :P
Jak dla mnie zabrakło „max-width”, które jest bardzo przydatne.
Osobiście staram się najpierw zrobić CSS-y w „czystym” RWD (używając max-width zamiast width, odpowiednio konstruując szkielet strony itp.), aby elementy same z siebie skalowały się.
Potem tylko dodaję kilka media queries, które porządkują to co powinno wyglądać w inny sposób lub się „krzaczy”.
To nie jest inna właściwość tylko wg. przytoczonej w tekście dokumentacji po prostu jej inny prefix. Każda z przytoczonych właściwość posiadająca prefix min ma również prefix max. Niemniej wartym odnotowania jest, że to czy stosujemy max-width czy min-width definiuje po części czy nasze strony są „mobile first” czy nie.
No właśnie, różnica podejścia. Można zrobić skalowalną stronę bez użycia media queries lub z ich niewielką pomocą, a można też tak się do nich przywiązać, że w IE7 czy innej archaicznej przeglądarce będziemy mieli „wersję mobilną”…ewentualnie gimnastykować się ze skryptami.
Moje podejście można samozwańczo nazwać „all first” :)