10 sierpnia 2009
Krótkie wprowadzenie do zapytań o media w Firefoksie 3.5
Poniższy tekst jest tłumaczeniem artykułu "A short introduction to media queries in Firefox 3.5", zamieszczonego na stronie hacks.mozilla.org na licencji Creative Commons Attribution 3.0 United States License. Autorem tekstu jest Eric Shepherd. Spis wszystkich tłumaczeń artykułów z hacks.mozilla.org dostępny jest na stronach wiki.aviary.pl.
Autorem tego postu jest Eric Shepherd, który kieruje projektem dokumentacji Mozilli na Mozilla Developer Center.
W dzisiejszych czasach ważne jest, by renderowanie zawartości stron wspierane było na zwiększającym się asortymencie urządzeń. Użytkownicy oczekują, że treść będą odbierać nie tylko na swoich domowych komputerach lub czytać wydrukowaną na papierze, ale chcą także mieć do niej dostęp na urządzeniach przenośnych, telefonach komórkowych i innych gadżetach, które mają zróżnicowane możliwości, zarówno pod względem wydajności, jak i dokładności wyświetlania.
CSS 2 wprowadziło pojęcie typów mediów, które pozwala zdefiniować odmienne reguły stylów w zależności od tego, na jakim typie urządzenia treść jest renderowana. Na przykład, w poniższy sposób można włączyć specyficzny arkusz stylów, kiedy treść jest renderowana do druku:
<link rel="stylesheet" media="print" href="print.css">Był to dobry pierwszy krok, jednak nie dostarcza to możliwości dopracowania renderowania treści w oparciu o cechy, takie jak rozdzielczość urządzenia, proporcje czy orientacja pionowa lub pozioma.
Firefox 3.5 wspiera zapytania o media (media queries) — nową cechę CSS 3, która sprawia, że możliwe jest bardziej precyzyjne definiowanie, które style zastosować w konkretnych przypadku.
Funkcjonuje to dzięki ustaleniu zapytań, które sprawdzają wartości różnych cech mediów. Jest ich wiele, włączając w to głębię kolorów, szerokość i wysokość obszaru renderowania, rozdzielczość w pikselach, wyświetlanie w kolorze lub nie, i tak dalej. Pełną listę można znaleźć w artykule o zapytaniach o media na Mozilla Developer Center.
Zapytania o media są potężne, ale bardzo łatwe w użyciu. Można przyjrzeć się im na przykładowej stronie stworzonej dla tego artykułu.
Przykładowa strona używa dwóch arkuszy stylów, które są zdefiniowane przy użyciu poniższych reguł:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
Powyższy kod wykorzystuje zapytania o media all i (orientation:portrait), by wskazać, że użyty ma być arkusz stylów portrait.css, jeśli treść jest renderowana w obszarze wyświetlania (takim jak okno w Firefoksie) o większej wysokości niż szerokości.
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Powyższy kod określa, że dołączony powinien być arkusz stylów landscape.css, gdy treść jest renderowana na obszarze o większej szerokości niż wysokości.
Ogromną zaletą zapytań o media jest to, że sprawdzają one parametry za każdym razem, gdy zmienia się tryb wyświetlania, np. jeśli otworzysz przykładową stronę i rozpoczniesz skalowanie okna, to zobaczysz, że kiedy okno jest szersze niż wyższe (przy orientacji poziomej), pasek narzędziowy umieszczony jest po lewej stronie.
Gdy zmieniasz rozmiar okna i przybiera ono orientację pionową, pasek narzędziowy przenoszony jest na górę okna. Dzieje się to na bieżąco podczas skalowania okna.
Jeśli zajrzysz do pliku landscape.css, zobaczysz, że jest w nim użytych kilka zapytań o media, a także, że zmieniany jest styl elementu <body> w oparciu o szerokość okna. Domyślnie tekst w tym elemencie ma rozmiar 14 pikseli.
@media all and (min-width: 600px) { body { font-size: 16px; } }
Jednak to zapytanie o media wskazuje, że, jeśli okno ma szerokość większą niż 600 pikseli, rozmiar czcionki całego dokumentu powinien zwiększyć się do 16 pikseli.
@media all and (min-width: 700px) { body { font-size: 20px; } }
Podobnie powyższe zapytanie o media ustawia podstawowy rozmiar czcionki na 20 pikseli, gdy szerokość okna wynosi ponad 700 pikseli. I dalej - analogiczne zapytanie o media ustawia jeszcze większy rozmiar czcionki, gdy okno ma ponad 800 pikseli szerokości.
Zatem podczas skalowania okna można zobaczyć, że Firefox nie tylko automatycznie przełącza się między arkuszami stylów portrait.css i landscape.css, gdy zmienia się szerokość okna, ale podczas renderowania przy użyciu arkusza stylów landscape.css, style zmieniają się precyzyjnie także w oparciu o to, jak szerokie jest okno.
Jeszcze jednym przydatnym zastosowaniem tej cechy jest ustawianie liczby kolumn wyświetlanej treści w oparciu o szerokość obszaru wyświetlania.
Zapytania o media są obecnie wspieranie przez przeglądarki Firefox 3.5, Safari 3 oraz Opera 7 lub nowsza, przy czym kolejne wersje często wprowadzają wsparcie dodatkowych opcji związanych z mediami.
Szczegółowe informacje na temat zapytań o media wspieranych w Firefoksie można przeczytać na witrynie MDC w artykule o zapytaniach o media. Zapytania o media obsługiwane przez Operę 9.5 są wymienione na końcu tego artykułu. Nie byłem w stanie znaleźć informacji o wsparciu zapytań o media w WebKit.
Zapytania o media oferują doskonałą metodę na udoskonalenie wyglądu zawartości na różnych urządzeniach. Używając odpowiednich zapytań, można wyświetlać w odmienny sposób w oparciu o rozmiar ekranu, rozdzielczość i wiele innych cech. Przy tej metodzie optymalizacji treści nie ma znaczenia, w jaki sposób użytkownik ma do niej dostęp.
1 komentarz
Ciekawe dość.