search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

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

[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

  • Comandeer

    @media script podoba mi się z tego chyba najmniej natomiast natężenie podświetlenia ekranu… no cóż 😉 w połączeniu z Vibration API daje świetne możliwości wnerwiania usera stroboskopem xD
    W czasie konkursu u End3ra ktoś wpadł na pomysł @media hologram. Czekam na implementację tego, bo to na razie… no 😉

  • Adam

    Fajnie, że technologia się rozwija. Jestem dość sceptycznie nastawiony do pomysłu z czułością światła ale w sumie czemu nie? Moim zdaniem W3C powinno się zastanowić nad pomysłem stylowania formularzy np. list rozwijanych. Bardzo trafionym pomysłem jest za to ten nowy hover. W końcu będzie można ograniczyć jQuery do tego w celu. Lecz samą nazwę funkcji zmieniłbym na Touch zamiast hover.

  • Cześć mam do Ciebie pytanie:
    Czy dobrym pomysłem było by zastosowanie takich szerokości stron dla takich 4 progów?

    do 479px //szerokość strony 280px
    od 480px do 799px //szerokość strony 440px
    od 800px do 1023px //szerokość strony 760px
    od 1024px do 1279px //szerokość strony 980px
    od 1280px + //szerokość strony 1200px

    nigdzie nie mogę znaleźć konkretnej informacji a Ty widzę, że ogarniasz temat 🙂

    Pozdrawiam i z góry dzięki

  • Myślę, że to są dobre przedziały. Lecz pytanie, czy na pewno potrzebujesz aż tak dużego pokrycia różnych rozdzielczości? Można postawić na 3 przedziały do 768px, do 1024px i wyżej. W ten sposób masz wystarczające pokrycie różnych rozdzielczości i unikasz planowania tego jak treść na stronie będzie się prezentowała w danej rozdzielczości, co ogranicza pracochłonność. Najłatwiej przyjąć zasadę, że do 768px mamy użytkowników ze smartfonami; do 1024px użytkowników z tabletami, a wyżej to normalni użytkownicy komputerów.
    Musisz pamiętać, że najważniejsza jest treść i sposób jej prezentacji, a niekoniecznie efekty na stronie.

  • Dziękuję Ci kolego za te cenne rady. będę musiał w takim razie przemyśleć dobrze strategię choć chyba jednak będę chciał dopracować projekt nad którym właśnie zaczynam pracę, do tych 5 progów, ponieważ nie chciałbym aby użytkownik, który włączy na iphonie moją stronę musiał ją przewijać w bok 🙂