Funkcje multimedialne

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.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.

Source

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, pointerany-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-contrastprefers-reduced-motion. Więcej informacji znajdziesz w modułach dotyczących motywówuł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-colorsinverted-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)?

Prawda
Określonej szerokości można użyć tylko wtedy, gdy jednocześnie sprawdzana jest szerokość powyżej 1023px i poniżej 1025px.
Fałsz
Dostępne są opcje min-widthmax-width.

Zapytanie o multimedia może sprawdzać urządzenie na określonym aspect-ratio, np. @media (aspect-ratio: 4/3)?

Prawda
Unikalny format obrazu, który można dopasować do jednego formatu.
Fałsz
Ta opcja jest dostępna w przypadku aspect-ratio.

Jakie zapytania o multimedia kolorowe są prawidłowe?

@media (color)
Pasuje do dowolnego koloru urządzenia.
@media (monochrome)
Odpowiada dowolnemu urządzeniu bez obsługi kolorów.
@media (color-gamut: srgb)
Dopasowuje się do urządzeń z obsługą kolorów sRGB.
@media (min-color-index: 15000)
Dopasowuje urządzenia z co najmniej 15 tys. dostępnych kolorów.
@media (dynamic-range: high)
Dopasowuje się do urządzeń obsługujących zakresy kolorów HD.

Które z tych zapytań o multimedia dotyczące preferencji użytkownika są prawidłowe?

@media (prefers-color-scheme: dark)
Dopasowuje się, gdy użytkownik ma system operacyjny ustawiony na tryb ciemny.
@media (prefers-colors: high-definition)
Nieprawdziwe.
@media (prefers-reduced-motion: reduce)
Dopasowuje się, gdy użytkownik ma system operacyjny ustawiony na redukcję ruchu.
@media (prefers-contrast: more)
Dopasowuje się, gdy użytkownik ma system operacyjny ustawiony na wyższy kontrast.
@media (prefers-site-speed: fast)
Nieprawdziwe.