Zapytania o media
Zapytania o media to funkcja CSS 3 umożliwiająca dostosowanie renderowania treści do różnych warunków, takich jak rozdzielczość ekranu (np. rozmiar ekranu urządzenia mobilnego i komputera stacjonarnego). Stał się zalecanym przez W3C w czerwcu 2012 roku i jest podstawą technologii responsywnego projektowania stron internetowych (RWD).
Historia
Zapytania o media zostały po raz pierwszy naszkicowane we wstępnej propozycji CSS Håkon Wium Lie w 1994 roku, ale nie stały się one częścią CSS 1 . Zalecenie HTML4 z 1997 r. pokazuje przykład, w jaki sposób w przyszłości można dodać zapytania o media. W 2000 roku W3C rozpoczęło prace nad zapytaniami o media, a także nad innym schematem obsługi różnych urządzeń: CC/PP . Oba rozwiązują ten sam problem, ale CC/PP jest zorientowany na serwer, podczas gdy zapytania o media są zorientowane na przeglądarkę. Pierwsza publiczna robocza wersja robocza zapytań o media została opublikowana w 2001 r., a specyfikacja stała się rekomendacją W3C w 2012 r. po dodaniu obsługi przez przeglądarki.
Stosowanie
Zapytanie o media składa się z typu mediów i co najmniej jednego wyrażenia obejmującego funkcje mediów , które zwracają wartość prawda lub fałsz. Wynikiem zapytania jest prawda, jeśli typ nośnika określony w zapytaniu o media jest zgodny z typem urządzenia, na którym jest wyświetlany dokument, a wszystkie wyrażenia w zapytaniu o media są prawdziwe. Gdy zapytanie o media jest prawdziwe, stosowane są odpowiednie arkusze stylów lub reguły stylów, zgodnie z normalnymi regułami kaskadowymi. Zapytania o media używają @ media CSS „at-rule”.
Przykłady
Oto przykłady zapytań o media CSS:
@ media screen and ( display-mode : fullscreen ) { /* Kod tutaj dotyczy tylko ekranów w trybie pełnoekranowym */ }
@ media all and ( orientacja : pozioma ) { /* Kod w tym miejscu ma zastosowanie tylko w orientacji poziomej */ }
@ media screen and ( min-device-width : 500px ) { /* Kod tutaj dotyczy tylko ekranów o szerokości równej lub większej niż 500 pikseli */ }
Rodzaje mediów
Typ mediów można zadeklarować w nagłówku dokumentu HTML za pomocą atrybutu „media” wewnątrz elementu < link > . Wartość atrybutu „media” określa, na jakim urządzeniu zostanie wyświetlony połączony dokument. Typy nośników można również zadeklarować w instrukcjach przetwarzania XML , @ import at-rule i @ media at-rule. CSS 2 definiuje następujące typy mediów:
- wszystkie (odpowiednie dla wszystkich urządzeń)
- brajl
- tłoczone
- podręczny
- wydrukować
- występ
- ekran
- przemówienie
- tty
- telewizja
Typ nośnika „all” może również służyć do wskazania, że arkusz stylów ma zastosowanie do wszystkich typów nośników.
Funkcje multimedialne
Poniższa tabela zawiera funkcje multimedialne wymienione w najnowszej rekomendacji W3C dotyczącej zapytań o media z dnia 6 czerwca 2007 r.
| Funkcja | Wartość | Minimum maksimum | Opis |
|---|---|---|---|
kolor |
liczba całkowita | Tak | Liczba bitów na składową koloru |
indeks kolorów |
liczba całkowita | Tak | Liczba wpisów w tabeli wyszukiwania kolorów |
współczynnik proporcji urządzenia |
liczba całkowita/liczba całkowita | Tak | Współczynnik proporcji |
wysokość urządzenia |
długość | Tak | Wysokość urządzenia wyjściowego |
szerokość urządzenia |
długość | Tak | Szerokość urządzenia wyjściowego |
siatka |
liczba całkowita | NIE | Prawda dla urządzenia opartego na siatce |
wysokość |
długość | Tak | Wysokość powierzchni renderowania |
monochromia |
liczba całkowita | Tak | Liczba bitów na piksel w buforze ramki monochromatycznej |
orientacja |
„portret” lub „krajobraz” | NIE | Orientacja ekranu |
rezolucja |
rozdzielczość („dpi”, „dpcm” lub „dppx”) | Tak | Rezolucja |
skanowanie |
„progresywny” lub „z przeplotem” | NIE | Proces skanowania typów mediów „tv”. |
szerokość |
długość | Tak | Szerokość powierzchni renderowania |