• Strona główna
  • Curriculum Vitae
  • O mnie
  • Przykład: Gramatyka w PHP
  • Przykład: Kompresja CSS
  • Przykład: Kompresja JavaScript
  • Przykład: Skracanie linków
  • Przykład: Wykrywanie serwera HTTP
  • Przykład: Własna bramka SMS
  • Mapa strony
  • Kontakt
Niebieski Pomarańczowy Zielony Różowy Fioletowy

CSS4 i Media Queries

Opublikowane 18 marca 2013. Autor: Kamil Brenk. Wizyt: 1 229.

Kategorie: Front-end Development
Tematyka: CSS, CSS Media Queries, CSS4, dostępność stron internetowych, użyteczność stron internetowych

mar 18

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.

Komentarze (3)

  1. eRIZ 25 marca 2013

    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ą.

    Niemniej jednak warto mieć standaryzowane rozwiązania dla popularnych problemów.

    Żadna przeglądarka nie zaimplementowała jeszcze CSS4 Media Queries

    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.

  2. Kamil Brenk 25 marca 2013

    @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 :-)

  3. Sławomir Domagała 26 września 2013

    Dzięki za bloga. Dzisiaj go znalazłem. Ciężko znaleźć dobre blogi o programowaniu w necie.



Kamil Brenk Blog

PHP, JavaScript, SQL, HTML

  • Informacje o blogu

    Kamil Brenk

    Blog o tworzeniu aplikacji na potrzeby sieci Web.

    Praktyczne przykłady, porady i sztuczki. PHP, SQL, AJAX, JavaScript, HTML i pochodne.

    Kanał RSS

    • Najnowsze
    • Komentarze
    • Popularne
    • Liczniki w CSS
    • Wyprzedaż książek o programowaniu!
    • Niestandardowy placeholder
    • JavaScript w modułach
    • Co dalej z blogiem?
    • Interaktywna mapa w HTML i CSS
    • Olsztyn: Jak wyseparować zawartość zassaną przez file_get_content?
    • ERMLAB: Od czegoś trzeba zacząć :) Wiele osób właśnie stawia na...
    • david: co nalezy wkleić na stronę aby plik ze stylami był ladowany...
    • krynicz: Nie jestem pewien czy dobrze to rozumiem: wpisujemy OG w...
    • yaro: Jak zmienić re_write znak "_" na "-"?
    • Piotr: stworzyłem prostą stronkę w PHP, czy jest możliwość aby...
    • MichalR: Super sprawa... bardzo przydatne.. dzieki i pozdrawiam..
    • Niestandardowe czcionki na stronie
    • Sposoby wczytywania JavaScript
    • Gramatyka w PHP, część 1
    • Umowa i zaliczka dla freelancera
    • Wysyłanie wiadomości SMS w PHP
    • Projekt aplikacji po stronie klienta
    • Własny mechanizm Feed
  • Szukajka
    Wpisz co chcesz wyszukać na stronie…
  • Kategorie
    • Apache
    • Freelancer
    • Front-end Development
    • HTML5 & CSS3
    • Inne
    • JavaScript
    • Książki
    • PHP
    • Po godzinach
    • Pozycjonowanie
    • Protokół HTTP
    • SQL
    • Wyrażenia regularne
  • Moje serwisy
    • Testy zawodowe
    • Miłość, uczucia i seks
  • Czytane blogi
    • Wojciech Sznapka
    • Wojciech Soczyński
    • Michał Wachowski
    • Tomasz Kowalczyk
    • Filip Górczyński
  • Strona główna
  • Curriculum Vitae
  • O mnie
  • Przykład: Gramatyka w PHP
  • Przykład: Kompresja CSS
  • Przykład: Kompresja JavaScript
  • Przykład: Skracanie linków
  • Przykład: Wykrywanie serwera HTTP
  • Przykład: Własna bramka SMS
  • Mapa strony
  • Kontakt

Kamil Brenk © 2010. All rights reserved.

Designed by FTL Wordpress Themes brought to you by Smashing Magazine.

Do góry ∧