Funkcje multimedialne

Elastyczne projektowanie stron nie byłoby możliwe bez zapytań o media. Przed wprowadzeniem zapytań o media nie było możliwości sprawdzenia, jakiego urządzenia używają użytkownicy do odwiedzania Twojej witryny. Projektanci musieli przyjąć pewne założenia. Założenia te zostały zakodowane w projektach o stałej szerokości lub w układach elastycznych.

Zmieniło się to wraz z wprowadzeniem zapytań o multimedia. Po raz pierwszy projektanci mogli wyjść naprzeciw oczekiwaniom klientów. Projektanci mogą dostosowywać układy do urządzeń użytkowników.

Pamiętaj, że zapytanie o media składa się z opcjonalnego typu mediów i obowiązkowej funkcji mediów. Na przestrzeni lat typy mediów nie uległy większym zmianom. Dostępne są tylko 4 wartości:

@media all
@media screen
@media print
@media speech

Funkcje multimedialne natomiast znacznie się rozwinęły. Projektanci mogą teraz wyjść użytkownikom naprzeciw i dostosowywać projekty nie tylko do rozmiaru ekranu.

Wymiary widocznego obszaru

Najpopularniejsze zapytania o media w internecie to te, które dotyczą szerokości widocznego obszaru. Ale nawet tutaj masz wybór. Możesz użyć funkcji multimediów max-width, aby zastosować style poniżej określonej szerokości, lub 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;
  }
}

Osobiście wolę używać min-width. Style układu stosuję w sposób addytywny. W każdym punkcie przerwania wprowadzam nowe reguły układu zamiast cofać poprzednie.

Takie podejście działa też w przypadku wysokości. Za pomocą min-height możesz wprowadzać więcej reguł, gdy dostępna jest większa wysokość obszaru wyświetlania. Możesz na przykład mieć element nagłówka, który chcesz przytwierdzić do górnej krawędzi okna przeglądarki, jeśli jest wystarczająco dużo miejsca w pionie.

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

Jeśli jednak wolisz, możesz użyć funkcji multimedialnej max-height. W tym przypadku nagłówek jest domyślnie zakotwiczony, ale jego przyczepność jest usuwana, jeśli nie ma wystarczająco dużo miejsca w pionie.

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

Wybór między prefiksami min- i max- nie dotyczy tylko width i height. Ta sama opcja jest dostępna w przypadku funkcji multimedialnej aspect-ratio. Oferuje też wersję bez prefiksu, jeśli chcesz zastosować style przy dokładnym stosunku 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.
}

Dostarczanie różnych stylów dla różnych proporcji obrazu 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. 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.
}

Chociaż terminy „pionowy” i „poziomy” są najczęściej używane w odniesieniu do orientacji urządzeń mobilnych, funkcja multimedialna orientation nie jest specyficzna dla urządzeń. Okno przeglądarki na pełnym ekranie typowego laptopa będzie miało wartość orientation równą landscape.

ekrany,

Różne wyświetlacze mają różną gęstość pikseli, mierzoną w dpi, czyli punktach na cal. Możesz dostosować style do różnych gęstości pikseli za pomocą funkcji multimediów resolution. Podobnie jak aspect-ratio, warunek resolution występuje w 3 wariantach: minimalnym, maksymalnym i dokładnym.

@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że się okazać, ż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 radzenie sobie z gęstością pikseli bezpośrednio w HTML.

Z drugiej strony w CSS definiujesz animacje i przejścia. Możesz dostosować te animacje i przejścia do różnych częstotliwości odświeżania za pomocą funkcji multimedialnej update. Ta funkcja multimedialna zwraca jedną z 3 wartości: none, slow i fast.

Wartość update równa none oznacza, że nie ma częstotliwości odświeżania. Na przykład wydrukowanej strony nie można zaktualizować.

Wartość update wynosząca slow oznacza, że wyświetlacz nie może się szybko odświeżać. Przykładem ekranu o niskiej częstotliwości odświeżania jest wyświetlacz e-ink.

Wartość updatefast 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świetlania są związane z możliwościami sprzętowymi. W module o motywach zobaczysz, jak definiować właściwości w pliku manifestu aplikacji internetowej. Jedna z tych właściwości to display, a możesz jej przypisać 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 manifeście aplikacji internetowej podano wartość display równą standalone. Jeśli ktoś doda Twoją witrynę do ekranu głównego, uruchomi się ona bez interfejsu przeglądarki. Możesz zdecydować się na wyświetlanie przycisku Wstecz tym użytkownikom.

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

Kolor

Istnieje wiele funkcji multimedialnych, które umożliwiają wysyłanie zapytań o możliwości kolorystyczne urządzenia. Jeśli chcesz dostosować style do wyświetlacza, który wyświetla tylko odcienie szarości, możesz użyć funkcji multimedialnej monochrome bez żadnej wartości.

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

Istnieje odpowiednia funkcja multimedialna color.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

W przypadku ekranów kolorowych możesz pisać zapytania z użyciem funkcji multimedialnych color-gamut, color-index lub dynamic-range. Wszystkie te wartości zawierają szczegółowe informacje o możliwościach kolorystycznych ekranu.

W tym przykładzie wartości kolorów są aktualizowane w odpowiedzi na funkcję multimedialną 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 zgłasza wartość dynamic-range równą 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ż zgłaszać rodzaj mechanizmu wejściowego używanego do interakcji z witryną: hover, any-hover, pointer i any-pointer. Więcej informacji znajdziesz w module dotyczącym interakcji.

Zapytania dotyczące ustawień użytkownika

Korzystając z CSS, możesz współpracować z użytkownikami, aby mieć pewność, że mają dostęp do Twoich treści w sposób, który im odpowiada. Z tej lekcji dowiesz się, jak stosować różne style CSS w zależności od wymiarów i funkcji urządzenia użytkownika. Możesz też zastosować różne arkusze CSS w zależności od ustawień użytkownika.

Tryb ciemny i jasny

Możesz reagować na preferencje użytkownika dotyczące jasnego lub ciemnego motywu. Wielu użytkowników ustawia to jako preferencję systemową.

Ustawianie schematu kolorów elementów interfejsu

Przeglądarka udostępnia domyślne kolory elementów takich jak paski przewijania i elementy formularza. Możesz określić, czy używać jasnego motywu w przypadku osób z color-scheme: light, czy ciemnego motywu w przypadku osób z color-scheme: dark. Możesz też określić, że strona obsługuje oba formaty, używając tagu color-scheme: light dark. Możesz ustawić ten atrybut w elemencie :root lub html, aby określić schemat dla całej strony, lub zastąpić go w przypadku konkretnych elementów.

Możesz też ustawić tag meta dla elementu color-scheme, aby określić schemat strony przed załadowaniem stylów. Jeśli w elemencie na stronie ustawisz wartość color-scheme: normal, będzie on używać wartości color-scheme ustawionej w tym metatagu.

<meta name="color-scheme" content="dark light">

prefers-color-scheme funkcja multimedialna

Możesz też zdefiniować style niestandardowe w odpowiedzi na preferowany motyw kolorystyczny użytkownika za pomocą zapytania o media dla prefers-color-scheme.

light-dark

Jeśli dajesz użytkownikom wybór między jasnym a ciemnym motywem, ustawianie każdego koloru w zapytaniu o media może być zbyt szczegółowe. light-dark() umożliwia określenie obu tych rodzajów danych w ramach jednej usługi.

Aby to włączyć, musisz ustawić color-scheme: light dark w elemencie lub jednym z jego elementów nadrzędnych. Najpierw ustaw kolor, który ma być używany w trybie jasnym, a potem kolor, który ma być używany w trybie ciemnym.

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

Jeśli użytkownik ma ustawioną preferencję systemową, aby prosić o tryb jasny, nagłówek będzie czarny. Jeśli preferują tryb ciemny, nagłówek będzie biały.

Ustawienia kontrastu

Użytkownikom może być łatwiej czytać treści o wysokim lub niskim kontraście. Mogą oni skonfigurować system tak, aby zastępował Twój motyw tym, który najlepiej im odpowiada. Twoim zadaniem jest zadbanie o to, aby Twoja witryna nadal dobrze współpracowała z ich ustawieniami.

Pamiętasz, że w module kaskadowym !important lokalne style użytkownika mogą zastępować style autorskie udostępniane przez stronę internetową. Umożliwia to użytkownikom korzystanie ze stylów, które lepiej im odpowiadają.

Wymuszone kolory

System Windows udostępnia „Motywy kontrastowe”, które użytkownicy mogą wybrać, aby zastąpić motywy w witrynie. Są to często motywy o wysokim kontraście, które mogą być w trybie jasnym lub ciemnym. W CSS nazywa się to wymuszonymi kolorami i w większości przypadków witryna będzie działać w tym trybie zgodnie z oczekiwaniami. Przyciski, linki, pola wejściowe i inne elementy będą korzystać z kolorów motywu.

Czasami może być konieczne dostosowanie stylów, np. jeśli używasz elementów w niestandardowy sposób. Możesz użyć @media (forced-colors: active)zapytania o media, aby zastosować style, gdy użytkownik włączył wymuszone kolory.

W niektórych przypadkach style witryny są niezbędne do zrozumienia treści, np. w przypadku selektora kolorów lub wykresu z legendą kolorów. Możesz ustawić forced-color-adjust: none; na elemencie, aby zrezygnować z trybu wymuszonych kolorów. Pamiętaj, aby rezygnować tylko z określonych elementów i sprawdzać, czy treści są nadal dostępne w trybie wymuszonych kolorów.

Wysoki kontrast

Niektórzy użytkownicy mogą też ustawić w systemie prośbę o zwiększenie kontrastu. Możesz dostosować style w odpowiedzi za pomocą zapytania o media prefers-contrast: more.

Mniej animacji

Na preferencje użytkownika dotyczące ograniczenia ruchu możesz odpowiedzieć za pomocą zapytania o multimedia prefers-reduced-motion. Jest to często używane do wyświetlania alternatywnych animacji, które nie zawierają dużych ruchów mogących wywołać atak u osób z epilepsją, zaburzeniami ruchu błędnikowego lub migreną. Więcej informacji znajdziesz w artykule Kwestie do rozważenia podczas pracy z animacją.

Tworzenie scenariusza

Użytkownicy mogą odwiedzać Twoją witrynę z wyłączonym JavaScriptem. Możesz dostosować CSS, aby nadal mieli dostęp do treści za pomocą zapytania o media scripting.

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o funkcjach multimedialnych