Podsumowanie wszystkich sposobów, w jakie funkcje multimedialne umożliwiają reagowanie na urządzenia i preferencje.
Bez zapytań o media nie byłoby możliwe projektowanie elastyczne. Przed zapytaniami o multimedia nie było sposobu na dowiedzenie się, jakiego urządzenia używają użytkownicy, aby odwiedzić Twoją witrynę. Projektanci musieli opierać się na przypuszczeniach. Te założenia zostały zakodowane w projektach o stałej szerokości lub elastycznych układach.
Wszystko zmieniło się wraz z wprowadzeniem zapytań o multimedia. Po raz pierwszy projektanci mogli dostosować się do potrzeb użytkowników. Projektanci mogą dostosowywać układy do urządzeń użytkowników.
Pamiętaj, że zapytanie o multimedia składa się z opcjonalnego typu multimediów i obowiązkowej funkcji multimediów. Przez lata rodzaje multimediów nie zmieniły się zbytnio. Nadal istnieją tylko 4 możliwe wartości:
@media all
@media screen
@media print
@media speech
Z drugiej strony funkcje multimedialne znacznie się rozwinęły. Projektanci mogą teraz lepiej dopasowywać projekty do potrzeb użytkowników, biorąc pod uwagę nie tylko rozmiar ekranu.
Wymiary widocznego obszaru
Najpopularniejsze zapytania dotyczące multimediów w internecie dotyczą szerokości widocznego obszaru. Ale nawet tutaj masz wybór. Aby zastosować style do elementów o szerokości mniejszej niż określona wartość, możesz użyć funkcji max-width
, a aby zastosować style do elementów o szerokości większej niż określona wartość, możesz użyć funkcji min-width
.
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;
}
}
Osobiście wolę używać min-width
. Stosuję style układu w sposób addytywny. Zamiast cofać poprzednie reguły, wprowadzam nowe reguły układu na każdym punkcie kontrolnym.
To podejście sumujące działa też w przypadku wysokości. Za pomocą min-height
możesz wprowadzać więcej reguł, gdy staje się dostępna większa wysokość widoku. Możesz na przykład mieć element nagłówka, który chcesz przypiąć do górnej części 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 max-height
. Tutaj nagłówek jest domyślnie przytwierdzony, ale ta funkcja zostaje wyłączona, gdy nie ma wystarczającej ilości miejsca w pionie.
header {
position: fixed;
}
@media (max-height: 30em) {
header {
position: static;
}
}
Wybór prefiksów min-
i max-
nie dotyczy tylko opcji width
i height
. Funkcja mediów aspect-ratio
oferuje te same opcje. Jeśli chcesz zastosować style przy dokładnym stosunku szerokości do wysokości, możesz też użyć wersji bez prefiksu.
@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.
}
Umieszczanie różnych stylów w różnych formatach może szybko wymknąć się spod kontroli. Jeśli nie potrzebujesz tak szczegółowej kontroli, funkcja multimediów orientation
może lepiej odpowiadać Twoim potrzebom. Ma 2 możliwe 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.
}
Chociaż terminy „portret” i „panoramiczny” są najczęściej używane w odniesieniu do orientacji urządzeń mobilnych, funkcja mediów orientation
nie jest powiązana z konkretnym urządzeniem. W przypadku pełnoekranowego okna przeglądarki na typowym laptopie wartość orientation
wynosi landscape
.
ekrany,
Różne wyświetlacze mają różną gęstość pikseli, mierzona w dpi
, czyli w punktach na cal. Możesz dostosować style do różnych gęstości pikseli za pomocą funkcji multimediów resolution
. Podobnie jak aspect-ratio
, resolution
występuje w 3 wersjach: minimalnej, maksymalnej i dokładnej.
@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.
}
Być może nigdy nie będziesz musiał(-a) używać zapytań o multimedia resolution
. Gęstość pikseli jest zwykle problemem tylko w przypadku obrazów, a elastyczne obrazy to sposób na bezpośrednie zarządzanie gęstością pikseli w HTML.
Z drugiej strony, w CSS definiujesz animacje i przejścia. Za pomocą funkcji multimediów update
możesz dostosować te animacje i przejścia, aby odpowiadały różnym częstotliwościom odświeżania. Ta funkcja dotycząca multimediów podaje jedną z 3 wartości: none
, slow
lub fast
.
Wartość update
none
oznacza brak częstotliwości odświeżania. Na przykład wydrukowanej strony nie można zaktualizować.
Wartość update
slow
oznacza, że wyświetlacz nie może szybko się odświeżać. Ekran e-ink to przykład ekranu o wolnej częstotliwości odświeżania.
Wartość update
fast
oznacza, że wyświetlacz odświeża się wystarczająco szybko, aby obsługiwać 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ętu. W module poświęconym motywom pokazaliśmy, jak definiować właściwości w pliku manifestu aplikacji internetowej. Jedna z tych właściwości nosi nazwę display
i może mieć wartość fullscreen
, standalone
, minimum-ui
lub browser
. Odpowiednia funkcja multimediów display-mode
umożliwia dostosowanie stylów do tych różnych opcji.
Załóżmy, że w pliku manifestu aplikacji internetowej podana jest wartość display
standalone
. Jeśli ktoś doda Twoją witrynę do ekranu głównego, uruchomi się ona bez żadnego interfejsu przeglądarki. Możesz wyświetlić dla tych użytkowników przycisk Wstecz.
button.back {
display: none;
}
@media (display-mode: standalone) {
button.back {
display: inline;
}
}
Kolor
Do zapytań o możliwości kolorystyczne urządzenia służy wiele funkcji multimedialnych. Jeśli chcesz dostosować style do wyświetlacza, który wyświetla tylko odcienie szarości, możesz użyć funkcji mediów monochrome
bez żadnej wartości.
@media (monochrome) {
body {
color: black;
background-color: white;
}
}
Dostępna jest odpowiednia funkcja color
.
@media (color) {
body {
color: maroon;
background-color: linen;
}
}
W przypadku ekranów kolorowych możesz tworzyć zapytania z funkcjami multimediów color-gamut
, color-index
lub dynamic-range
. Wszystkie te informacje zawierają szczegółowe dane o możliwościach wyświetlania kolorów przez ekran.
W tym przykładzie wartości kolorów są aktualizowane w odpowiedzi na funkcję multimediów dynamic-range
, która podaje 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 ma wartość dynamic-range
high
, otrzymuje inny gamut 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 mechanizmu wprowadzania danych używanego do interakcji z witryną: hover
, any-hover
, pointer
i any-pointer
. Więcej informacji znajdziesz w module poświęconym interakcji.
Ustawienia
Dostępnych jest wiele zapytań dotyczących mediów, które umożliwiają dostosowanie się do preferencji użytkowników: prefers-color-scheme
, prefers-contrast
i prefers-reduced-motion
. Więcej informacji znajdziesz w modułach dotyczących motywów i ułatwień dostępu.
W jednym zapytaniu o multimedia możesz łączyć funkcje multimedialne. Możesz ograniczyć zakres działania stylów animacji tak, aby były one stosowane tylko wtedy, gdy urządzenie ma wysoką częstotliwość odświeżania, a użytkownik nie wyraził preferencji dotyczących zmniejszonego 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
Wkrótce udostępnimy więcej funkcji związanych z multimediami.
Funkcje multimediów forced-colors
i inverted-colors
będą informować, czy urządzenie używa palety ograniczonej czy odwróconej.
Funkcja mediów scripting
pozwoli Ci dostosować kod CSS na podstawie dostępności kodu JavaScript.
Funkcja multimediów o nazwie prefers-reduced-data
pozwoli użytkownikom określić, że korzystają z ograniczonego transferu danych, dzięki czemu możesz wysyłać mniejsze zasoby lub mniejszą ich liczbę.
Pozostałe propozycje są nadal opracowywane. W następnym, ostatnim module poznasz propozycję funkcji multimediów, która obsługuje różne konfiguracje ekranu.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o funkcjach multimediów
Zapytanie o multimedia może sprawdzać, czy urządzenie ma określoną szerokość, np. @media (width: 1024px)
?
1023px
i poniżej 1025px
.min-width
i max-width
.Zapytanie o multimedia może sprawdzać urządzenie na określonym aspect-ratio
, np. @media (aspect-ratio: 4/3)
?
aspect-ratio
.Jakie zapytania o multimedia kolorowe są prawidłowe?
@media (color)
@media (monochrome)
@media (color-gamut: srgb)
@media (min-color-index: 15000)
@media (dynamic-range: high)
Które z tych zapytań o multimedia dotyczące preferencji 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)