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)