W dzisiejszym wpisie przyjrzę się ponownie tematowi Media Queries, poruszanemu już na tym blogu. Wtedy jednak zająłem się omówieniem Media Queries dla CSS3, a tym razem poruszę bardziej futurystyczny temat, jakim jest CSS4.
Co z tego wynika? Dzisiejszy wpis będzie luźniejszy i raczej mało przydatny w najbliższym czasie, doskonale jednak pokazuje w jakim kierunku zmierza nasz webowy świat!
Nowe typy mediów
scripts
Sprawdzamy czy medium, na którym wyświetlamy stronę obsługuje ECMAScript. W końcu! Zamiast więc dodawać na każdej podstronie:
1 2 3 | <script> document.documentElement.className += " js"; </script> |
by później w CSS definiować następujące style:
1 2 | .js .menu:hover {display: block} .js p:target {background: #fff} |
Będziemy mogli użyć następującego kodu:
1 2 3 4 | @media screen and not (script) { .menu:hover {display: block} p:target {background: #fff} } |
Niby pierdółka, ale mnie bardzo cieszy :-)
pointer
Służy do wykrywania typu wskaźnika, którym obsługujemy urządzenie. Do dyspozycji mamy dwa rodzaje wskaźników:
- coarse, czyli o ograniczonej celności. Typem takiego wskaźnika może być palec przy urządzeniach dotykowych,
- fine, czyli o dobrej celności. Do takich wskaźników możemy oczywiście zaliczyć mysz komputerową czy też rysik dla urządzeń dotykowych.
Dzięki istnieniu takiego warunku w Media Queries możemy np. dla linków czy pół formularzy dodać paddingi, zwiększając obszar klikalności przez co polepszamy dostępność strony.
Dla powyższego zadania dotychczas robiłem coś w stylu:
1 2 3 4 | <script> if ('ontouchstart' in document.documentElement) document.documentElement.className += " touch-device"; </script> |
By później w CSS móc ustawić, np.:
1 | .touch-device .menu a {padding: 0 20px; line-height: 2} |
Dzięki CSS4 będę mógł zastosować poniższy kod:
1 2 3 | @media (pointer:coarse) { .menu a {padding: 0 20px; line-height: 2} } |
Prościej i przyjemniej.
hover
Medium to służy do stylowania z osobna urządzeń obsługujących zdarzenie :hover, jak i nieobsługujących, np. urządzeń dotykowych.
Funkcjonalność ta jest jak najbardziej przydatna i często wykorzystywana, zwłaszcza przy responsywnych stronach WWW. Często bowiem musimy obsłużyć zarówno posiadaczy myszy komputerowych, jak i urządzeń dotykowych.
Oczywiście możemy i w tym przypadku posłużyć się wcześniej zaprezentowanym kodem JavaScript do wykrywania urządzeń dotykowych, by nadać odpowiednią klasę dla elementu BODY. Niemniej jednak słuszniej będzie wykrywać obsługę dotyku z poziomu CSS, bez niepotrzebnego angażowania JavaScriptu, który nie zawsze musi być włączony.
1 2 3 4 5 | .menu li>span:hover + ul {display: block} @media not (hover) { .menu li>span:target + ul {display: block} } |
luminosity
Służy do wykrywania natężenia światła działającego na urządzenie. Oczywiście urządzenie musi posiadać taki czujnik.
Do dyspozycji mamy trzy możliwe warianty:
- dim, czyli słabe oświetlenie. Jest aktywowane w momencie przebywania w zaciemnionym miejscu, np. podczas nocy.
- normal, czyli zwykły, szary dzień :-)
- washed, czyli mocne oświetlenie, np. w słoneczny dzień.
Warunek taki może być również całkiem przydatny, np. do poprawienia kontrastu strony w miejscach mocno oświetlonych (często wtedy ciężko dostrzec cokolwiek na wyświetlaczu).
1 2 3 4 5 | body {background: #fff; color: #000} @media (luminosity:washed) { body {background: #000; color: #fff} } |
Przy okazji: warunek ten powinien być obsługiwany nawet dla urządzeń nieposiadających czujnika oświetlenia. Fajnie więc gdyby przeglądarka wskazywała obecność arkuszy CSS dla innych warunków oświetleniowych i umożliwiała zmianę kontrastu – to zdecydowanie ułatwiłoby przeglądanie sieci w nocy (bijące po oczach białe literki na czarnym ekranie to nic przyjemnego!) czy w miejscach prześwietlonych.
grid
Wykrywa, czy urządzenie, z którego przeglądamy stronę umożliwia przeglądanie sieci wyłącznie w trybie siatkowym (ang. grid) lub obsługuje wyświetlanie grafiki rastrowej. W dokumentacji W3C jako przykład takiego urządzenia wymieniony jest dalekopis, telegraficzny aparat drukujący :-)
Podsumowanie
Żadna przeglądarka nie zaimplementowała jeszcze CSS4 Media Queries, niemniej jednak warto wiedzieć w jakim kierunku zmierzamy i co nas czeka w najbliższych latach. Oczywiście specyfikacja może jeszcze uleć wielu zmianom, zarówno przez dodanie nowych typów mediów, jak i zmianę istniejących.
Moim zdaniem, omówione rozszerzenie specyfikacji Media Queries dla CSS4 jest całkiem przydatne, choć już teraz potrafimy sobie z większością tych problemów radzić. Niemniej jednak warto mieć standaryzowane rozwiązania dla popularnych problemów.
Tylko że jeśli chodzi o ontouchstart, to na niektórych komputerach w przypadku Google Chrome detekcja nawala. Co jest wkurzające, bo skrypty poprawnie napisane, a przeglądarka robi w balona twierdząc, że urządzenie pozwala na „macanie”.
Tickety wiszą.
Nie działające rozwiązania, to nie rozwiązania, a teoretyzowanie warto zostawić uczelniom. Śmiem twierdzić, że takie rzeczy bez Modernizra będziemy mogli z czystym sumieniem wykorzystywać dopiero za 2-3 lata, o ile nie więcej.
@eRIZ: obecnie przeglądarki wprowadzają na tyle szybko takie funkcjonalności, więc ciężko stwierdzić, czy zadziała to za 2 tygodnie czy za 2 lata. Oczywiście przy założeniu, że mówimy o nowoczesnych przeglądarkach i takie też mamy zlecenie, bez wspierania urządzeń z lat ’90 i innych dinozaurów.
Na szczęście też coraz więcej takich projektów :-)
Dzięki za bloga. Dzisiaj go znalazłem. Ciężko znaleźć dobre blogi o programowaniu w necie.