CSS3 Media Queries

30 stycznia 2012

CSS Media Types w CSS2 pozwala na proste zdefiniowanie który plik stylów CSS ma zostać zastosowany na konkretnym urządzeniu. Można mieć osobne style dla przeglądarki, osobne do druku a jeszcze inne na przykład dla urządzeń do czytania braillem. Przydatne, ale można lepiej.

W CSS3 rozbudowano ten mechanizm, powstało CSS3 Media Queries. Możemy definiować osobne style na podstawie takich czynników jak wymiary ekranu czy jego orientacja.

Tak wygląda to na przykładzie:

zobacz jako zwykły tekst (nowe okno)
HTML:
  1. <link rel="stylesheet" media="screen and (min-width: 1024px) and (min-height: 500px)" href="style.css">

Powyższy kod oznacza, że style z pliku style.css zostaną zastosowane tylko dla urządzenia z ekranem o minimalnych rozmiarach 1024x500px.

Istnieją alternatywne zapisy. Wewnątrz dokumentu CSS:

zobacz jako zwykły tekst (nowe okno)
CSS:
  1. @media screen and (min-width: 1024px) and (min-height: 500px) {
  2. /* tutaj wstawiamy style */
  3. }

Jako @import:

zobacz jako zwykły tekst (nowe okno)
CSS:
  1. @import url(style.css) screen and (min-width: 1024px) and (min-height: 500px);

Możliwości jest wiele, zachęcam do przejrzenia tego dokumentu.

Wsparcie przeglądarek

Oczywiście, jak zawsze, pojawia się pytanie jak jest z obsługą tej technologii w różnych przeglądarkach. I oczywiście, jak zawsze, odpowiedź brzmi, że wszędzie jest dobrze oprócz Internet Explorer :) Dopiero w IE 9 wprowadzono obsługę Media Queries.

Z tego powodu powstała biblioteka js Respond. Niewielki pliczek, który magicznie powoduje, że nasze reguły (tylko min-width i max-width dla wszystkich typów mediów) zaczynają działać w starszych wersjach IE. Jak sam autor twierdzi, "biblioteka jest napisana w taki sposób, że prawdopodobnie powinna łatać inne przeglądarki, które nie obsługują Media Queries".

Wcześniej, aby wszystko działało jak należy, trzeba było dodawać komentarz przy naszych regułach. Teraz biblioteka stosuje wyrażenia regularne dzięki czemu automatycznie rozpoznaje nasze reguły. Musimy tylko dołączyć respond.js do naszego dokumentu, nic więcej.

Alternatywą jest css3-mediaqueries-js. Bardziej rozbudowany skrypt (na tą chwilę 15,6KB), który podobno działa ze wszystkimi regułami Media Queries. Co oczywiste, działa wolniej od respond.js, zwłaszcza przy rozbudowanych regułach. Nie działa z importowanymi arkuszami (@import), nie parsuje również atrybutów media dla tagów <link> i <style>.

Czy używać CSS3 Media Queries? Zdecydowanie tak! Reguły te dają wspaniałe możliwości i są obsługiwane przez większość przeglądarek, zarówno na desktopach jak i na urządzeniach mobilnych. Dla IE też są rozwiązania a użytkownicy z wyłączoną obsługą JS są sami sobie winni :P

Dodaj komentarz

4 odpowiedzi dla tego wpisu

  1. Anonim napisał: 30.01.12 o godzinie 21:27

    Respond.js działa zawsze, czy tylko na przeglądarkach nie obsługujących Media Queries? Inne pytanie, jak to obsługa tego po stronie urządzeń mobilnych? Bo w końcu te specjalne css mają być dostosowane np do wymiarów tabletów czy smartfonów.

  2. MariuszT napisał: 30.01.12 o godzinie 21:31

    Nie wiem jaki jest dokładny mechanizm działania respond.js ale można się domyślać, że na przeglądarkach obsługujących Media Queries ta biblioteka nie uruchamia się. To byłoby tylko niepotrzebne obciążanie sprzętu. Bo rozumiem, że o obciążenie Ci chodzi ;) Jeżeli przeglądarka obsługuje Media Queries to one działają bez względu na to czy dołączymy respond.js czy nie.

    Z tego co wyczytałem, nie ma najmniejszych problemów z działaniem biblioteki na urządzeniach mobilnych. W końcu, jak sam trafnie zauważyłeś, nowe reguły są dedykowane szczególnie tym urządzeniom.

  3. cypherq napisał: 05.02.12 o godzinie 20:31

    Nigdy nie zrozumiem dlaczego ludziom nie chce się chociażby pobieżnie przejrzeć biblioteki z której będą korzystac, tudzież zachęcają do korzystania z niej. Potrzebowalem 5 sekund, żeby znaleźć to:

    //if media queries are supported, exit here
    if( respond.mediaQueriesSupported ){ return; }

    Umówmy się, jest logicznym, że włączanie tej biblioteki nawet jeśli przeglądarka implementuje jej funkcjonalność natywnie – byłaby idiotyzmem, ale bloger to taki trochę dziennikarz. A dziennikarskim obowiązkiem powinno być dogłębne sprawdzenie tego, o czym się zaraz będzie pisało ;)

    Mimo wszystko nie traktuj tego jako atak, fajnie, że napisałeś o tym, chociaż notka nie powala rozbudowaniem :) Na drugi raz mógłbyś napisać krótko jak się korzysta z bibliotek o ktorych mówisz, to na przykład.

  4. MariuszT napisał: 05.02.12 o godzinie 23:35

    Nie bardzo rozumiem.

    Nie jestem dziennikarzem i nie czuję obowiązku pisania rozbudowanych recenzji. Nikt mi za to nie płaci, na mojej stronie nie ma nawet reklam. Napisałem tyle na ile starczyło mi czasu.

    Komentarz wcześniej zaznaczyłem jasno, że nie mam pewności jak działa respond.js. Jeżeli jest ktoś zainteresowany to może sobie sam sprawdzić. Ja daję tylko wskazówki, dziele się tym co sam wiem.

    Nie myl chęci anonsowania kolegom po fachu o ciekawych rozwiązaniach z pracą dziennikarską. Chętnie pisałbym rozbudowane artykuły gdyby nie ciągła konieczność realizowania nieskończonej ilości zleceń. Na przyjemności nie zostaje już wiele czasu…

Odpowiedz



Podobne wpisy: