[CSS] Przyszłość @media queries. Co wprowadza poziom 4?

Pod koniec zeszłego roku, organizacja W3C przygotowała specyfikację dla najnowszej implementacji @media query w przeglądarkach internetowych. Wprowadza ona kilka dość ciekawych zmian dotyczących wykrywania funkcjonalności używanej przeglądarki.

@media script - wykrywanie obsługi JS za pomocą CSS

Jest to bardzo interesujący zapis, a jednocześnie można zastanawiać się nad jego sensownością ponieważ następuje tutaj mieszanie dwóch "warstw": CSS i JS. Na szczęście, ten zapis nie staje się początkiem tworzenia języka zdarzeń w przeglądarce. Zapis ten pozwoli na wyświetlenie elementów strony dla użytkowników mających wyłączoną obsługę JS. Będzie to zamiennik dla tagu noscript lub dodatkowych klas, które są tworzone podczas działania różnych bibliotek JS wykrywających funkcjonalności przeglądarek (takie biblioteki mogą usuwać wybraną klasę z dokumentu, która wskazuje na to że JS wyłączony).

@media pointer - wykrywanie typu urządzenia wskazującego

Ta opcja pozwala na zdecydowanie jak ma wyglądać strona w zależnosci od tego jakiego typu wskaźnikiem dysponujemy podczas przeglądania strony. Takimi wskaźnikami mogą być:

• kursor myszki,
• rysik,
• palec.

Potencjalnie, takie wykrywanie funkcjonalności ma bardzo wiele zalet. Nie trzeba bazować na szerokościach ekranu urządzenia lub przeglądarki, aby odpowiednio dopasować interfejs strony do istniejących możliwości.

@media pointer może przyjąć kilka wartości:

none

brak dostępnego urządzenia wskazującego

coarse

dostępne urządzenie wskazujące o ograniczonej celności, np.: palec

fine

dostępne precyzyjne urządzenie wskazujące, np.: rysik, kursor myszki

Należy dodać, że zmiana powiększenia strony nie zmieni wartości tego zapisu, np. z coarse na fine.
Podczas projektowania strony najlepiej przyjąć założenie, że użytkownik nie dysponuje precyzyjnym urządzeniem wskazującym, to pozwoli na o wiele elastyczniejsze podejscie w przypadku projektowania interfejsów stron czy aplikacji webowych.

1
2
3
4
5
6
7
8

@media (pointer:coarse) {
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 30px;
    min-height: 40px;
    background: transparent;
  }
}

@media hover - wykrywanie czy dostępny jest stan najazu/hover w przeglądarce

Bardzo często projektując strony responsywne spotykamy się z problemem uzyskania efektu najazdu na wybrany element, tak aby był uznany jako zaznaczony przez urządzenia mobilne, które zazwyczaj nie obsługują stanu :hover.
Należy tutaj pamiętać o możliwości posiadania wielu trybów działania urządzenia wskazującego, tak jak np. w przypadku monitora dotykowego. W takiej sytuacji, powinniśmy zdefiniować, jaki tryb pracy urządzenia powinien być tym domyślnym (za pomocą @media pointer).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@media (hover) {
  .menu > li {
    position: relative;
  }
  .menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
  }
  .menu li:hover ul {
    display: block;
  }
}

Powyższy przykład pokazuje zasadę działania nowego trybu wykrywania funkcjonalności. Jeśli jest wykryta obsługa :hover, to pozwól na wyświetlenie podmenu po najechaniu wskaźnikiem na odpowiedni element menu głównego.

@media luminosity - wykrywanie natężenia światła/jasności ekranu urządzenia

Jest to bardzo zaskakująca propozycja wykrywania funkcjonalności urządzenia. Dzięki tej opcji możemy sprawić, aby kontrast strony był lepszy lub gorszy w zależności od oświetlenia.
@media luminosity może przyjąć 3 wartości:

dim

słabe światło, tzn. urządzenie jest używane np. w ciemnym pomieszczeniu lub w nocy

normal

normalne światło, tzn. urządzenie jest używane w normalnych warunkach oświetleniowych

washed

mocne światło, tzn. urządzenie jest używane np. na plaży

Ta funkcjonalność bardzo zależy od czujników światła oświetlenia i zadziała tylko na urządzeniach wyposażonych w ten czujnik.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

@media (luminosity: normal) {
  p {
    background: url("texture.jpg");
    color: #333;
  }
}
@media (luminosity: dim) {
  p {
    background: #222;
    color: #ccc;
  }
}
@media (luminosity: washed) {
  p {
    background: #fff;
    color: #000;
    font-size: 2em;
  }
}

Podsumowanie

Powyższa specyfikacja jest na etapie uzgadniania. Jeszcze nie została nigdzie zaimplementowana.
Dlatego można się zastanawiać, czemu poruszyłem ten temat?
Chodzi o to, aby pokazać w jakim kierunku idzie rozwój technologii tworzenia stron WWW i aplikacji webowych. Dzięki temu, możemy poczynić pewne założenia na przyszłość oraz odpowiednio się przygotować na moment wprowadzenia tych zmian w życie.

Zmiany te, powinny zostać wdrożone w przeciągu tego roku (2013) przynajmniej w jednej z przeglądarek (zapewne będzie to Google Chrome).

źródło