Podsumowanie wszystkich sposobów, w jakie funkcje multimediów umożliwiają reagowanie na urządzenia i preferencje.
Elastyczne projektowanie nie byłoby możliwe bez zapytań o multimedia. Przed zapytaniami o media nie można było sprawdzić, z jakiego urządzenia użytkownicy korzystają do odwiedzania Twojej witryny. Projektanci musieli wyciągać wnioski. Założenia te zostały zakodowane w projektach o stałej szerokości lub w układach płynnych.
Wszystko się zmieniło po wprowadzeniu zapytań o multimedia. Po raz pierwszy projektanci mogli spotkać się z ludźmi w połowie drogi. Projektanci mogą dostosowywać swoje układy do urządzeń użytkowników.
Pamiętaj, że zapytanie o multimedia składa się z opcjonalnego typu mediów i wymaganej funkcji multimediów. W ostatnich latach te typy mediów nie zmieniły się zbytnio. Nadal są dostępne tylko 4 wartości:
@media all
@media screen
@media print
@media speech
Znacznie rozwinięto też funkcje multimedialne. Teraz projektanci mogą docierać do użytkowników, gdy są w połowie drogi i dostosowują projekt do znacznie większej liczby rozmiarów niż tylko na ekranie.
Wymiary widocznego obszaru
Najpopularniejsze w internecie zapytania o multimedia to te dotyczące szerokości widocznego obszaru. Jednak nawet tutaj mamy do wyboru. Możesz użyć funkcji multimediów max-width
, aby zastosować style poniżej określonej szerokości, lub użyć funkcji multimediów min-width
, aby zastosować style powyżej określonej szerokości.
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
main {
display: block;
}
}
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Lubię używać usługi min-width
. Stosuję style układu w sposób addytywny. Zamiast cofać poprzednie reguły, wprowadzam nowe reguły układu w każdym punkcie przerwania.
Ta metoda sumowania sprawdza się również w przypadku wysokości. Dzięki min-height
możesz wprowadzać więcej reguł w miarę zwiększania wysokości widocznego obszaru. Możesz na przykład mieć element nagłówka, który chcesz zakotwiczyć u góry okna przeglądarki, jeśli jest wystarczająco dużo miejsca w pionie.
@media (min-height: 30em) {
header {
position: fixed;
}
}
Jeśli wolisz, możesz użyć funkcji multimediów max-height
. W tym przypadku nagłówek jest domyślnie zakotwiczony, ale jeśli nie ma wystarczającej ilości miejsca w pionie, nagłówek jest usuwany.
header {
position: fixed;
}
@media (max-height: 30em) {
header {
position: static;
}
}
Wybór prefiksów od min-
do max-
dotyczy nie tylko width
i height
. Tego samego wyboru możesz dokonać za pomocą funkcji multimediów aspect-ratio
. Jest też dostępna wersja bez przedrostka, jeśli chcesz stosować style dokładnie dla proporcji szerokości do wysokości.
@media (min-aspect-ratio: 16/9) {
// The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
// The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
// The ratio of width to height is exactly 16 by 9.
}
Możliwość wyboru stylów dla różnych formatów obrazu może szybko umknąć Twojej uwadze. Jeśli nie potrzebujesz takiego poziomu kontroli, funkcja multimediów orientation
może lepiej odpowiadać Twoim potrzebom. Może przyjmować 2 wartości: portrait
lub landscape
.
@media (orientation: portrait) {
// The width is less than the height.
}
@media (orientation: landscape) {
// The width is greater than the height.
}
Mimo że określenia „orientacja pionowa” i „pozioma” są najczęściej używane w odniesieniu do orientacji urządzeń mobilnych, funkcja multimediów orientation
nie jest związana z ich konkretnymi urządzeniami. Okno przeglądarki na pełnym ekranie na typowym laptopie ma w orientation
wartość landscape
.
ekrany,
Gęstość pikseli na poszczególnych wyświetlaczach jest różna (mierzona w dpi
kropkach na cal). Za pomocą funkcji multimediów resolution
możesz dostosować style do różnej gęstości pikseli. Podobnie jak aspect-ratio
, resolution
jest dostępny w 3 odmianach: minimalnej, maksymalnej i ścisłej.
@media (min-resolution: 300dpi) {
// The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
// The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
// The display has a pixel density of exactly 300 dots per inch.
}
Możliwe, że w ogóle nie trzeba będzie używać zapytań o multimedia w usłudze resolution
. Gęstość pikseli stanowi zazwyczaj problem tylko w przypadku obrazów, a obrazy elastyczne to sposób radzenia sobie z gęstością pikseli bezpośrednio w kodzie HTML.
Z kolei CSS to miejsce, w którym definiujesz animacje i przejścia. Za pomocą funkcji multimediów update
możesz dostosować te animacje i przejścia, aby dostosować je do różnych częstotliwości odświeżania. Ta funkcja multimediów zgłasza jedną z 3 wartości: none
, slow
i fast
.
Wartość none
w polu update
oznacza, że częstotliwość odświeżania jest wyłączona. Na przykład wydrukowanej strony nie można zaktualizować.
Wartość slow
parametru update
oznacza, że ekran nie może się szybko odświeżać. Przykładem ekranu z powolną częstotliwością odświeżania jest wyświetlacz e-ink.
Wartość update
wynosząca fast
oznacza, że wyświetlacz odświeża się wystarczająco szybko, by obsłużyć animacje i przejścia.
@media (update: fast) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
Nie wszystkie aspekty wyświetlacza są związane z możliwościami sprzętowymi. W module dotyczącym motywów omówiliśmy, jak określać właściwości w pliku manifestu aplikacji internetowej. Jedna z tych właściwości nosi nazwę display
i możesz nadać jej wartość fullscreen
, standalone
, minimum-ui
lub browser
. Odpowiednia funkcja multimediów display-mode
pozwala dostosować style do tych różnych opcji.
Załóżmy, że w pliku manifestu aplikacji internetowej podasz standalone
o wartości display
. Jeśli ktoś doda Twoją witrynę do ekranu głównego, zostanie ona otwarta bez interfejsu przeglądarki. Możesz zdecydować się na wyświetlanie im przycisku Wstecz.
button.back {
display: none;
}
@media (display-mode: standalone) {
button.back {
display: inline;
}
}
Kolor
Istnieje wiele funkcji multimedialnych służących do sprawdzania możliwości kolorów urządzenia. Jeśli chcesz dostosować style do wyświetlacza, który wyświetla tylko odcienie szarości, możesz użyć funkcji multimediów monochrome
bez podawania wartości.
@media (monochrome) {
body {
color: black;
background-color: white;
}
}
Istnieje odpowiadająca jej funkcja multimediów color
.
@media (color) {
body {
color: maroon;
background-color: linen;
}
}
W przypadku kolorowych ekranów możesz używać funkcji multimediów color-gamut
, color-index
lub dynamic-range
. Każda z nich przekazuje szczegółowe informacje o możliwościach kolorystycznych ekranu.
W tym przykładzie wartości kolorów są aktualizowane w odpowiedzi na funkcję multimediów dynamic-range
, która zgłasza kombinację maksymalnej jasności, głębi kolorów i współczynnika kontrastu wyświetlacza. Możliwe wartości to standard
lub high
. Ekran o wysokiej rozdzielczości, który zgłasza wartość parametru dynamic-range
o wartości high
, otrzymuje inną przestrzeń kolorów za pomocą nowej funkcji CSS color()
.
.neon-red {
color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
.neon-red {
color: color(display-p3 1 0 0);
}
}
Interakcja
Funkcje multimedialne mogą też raportować rodzaj mechanizmów wejściowych używanych do interakcji z Twoją witryną: hover
, any-hover
, pointer
i any-pointer
. Więcej informacji znajdziesz w module dotyczącym interakcji.
Ustawienia
Istnieje wiele zapytań o multimedia, które umożliwiają odpowiadanie na preferencje użytkownika: prefers-color-scheme
, prefers-contrast
i prefers-reduced-motion
. Więcej informacji znajdziesz w modułach na temat tematu i ułatwień dostępu.
Możesz połączyć funkcje multimediów w jednym zapytaniu o multimedia. Zakres stylów animacji możesz określić tak, aby były one stosowane tylko wtedy, gdy urządzenie ma szybką częstotliwość odświeżania, a użytkownik nie wyraził zgody na zmniejszenie ruchu.
@media (update: fast) and (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
Więcej funkcji multimedialnych
Planujemy dodać więcej funkcji multimedialnych.
Funkcje multimedialne forced-colors
i inverted-colors
informują, czy urządzenie korzysta z palety kolorów ograniczonych czy odwróconej.
Funkcja multimediów scripting
umożliwia dostosowywanie CSS na podstawie dostępności JavaScriptu.
Funkcja multimediów o nazwie prefers-reduced-data
pozwoli użytkownikom określić, że korzystają z połączenia z pomiarem użycia danych, co pozwoli Ci wysyłać mniejsze lub mniej zasobów.
Nadal przygotowujemy inne propozycje. W następnym i ostatnim module zapoznasz się z propozycją funkcji multimediów, która obsługuje różne konfiguracje ekranu.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o funkcjach multimedialnych
Zapytanie o multimedia może wyszukać urządzenie o określonej szerokości, np. @media (width: 1024px)
?
1023px
i poniżej 1025px
.min-width
i max-width
.Zapytanie o multimedia może sprawdzić urządzenie o konkretnej wartości aspect-ratio
, np. @media (aspect-ratio: 4/3)
?
aspect-ratio
.Które z tych zapytań są prawidłowymi zapytaniami o media związane z kolorami?
@media (color)
@media (monochrome)
@media (color-gamut: srgb)
@media (min-color-index: 15000)
@media (dynamic-range: high)
Które z tych zapytań o media dotyczące ustawień użytkownika są prawidłowe?
@media (prefers-color-scheme: dark)
@media (prefers-colors: high-definition)
@media (prefers-reduced-motion: reduce)
@media (prefers-contrast: more)
@media (prefers-site-speed: fast)