Funkcje multimedialne

Podsumowanie wszystkich sposobów reagowania na urządzenia dzięki funkcjom multimedialnym ustawieniach.

Projektowanie elastyczne nie byłoby możliwe bez zapytań o multimedia. Przed rozpoczęciem korzystania z zapytań o multimedia nie było wiadomo, z jakiego urządzenia użytkownicy korzystali 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 płynnych układach.

Wszystko to zmieniło się wraz z wprowadzeniem zapytań o media. Po raz pierwszy projektanci mogli spotykać ludzi z drugiej strony. Projektanci mogą dostosowywać układ do urządzeń użytkowników.

Pamiętaj, że zapytanie o multimedia obejmuje opcjonalny typ mediów i obowiązkową funkcję multimediów. W ostatnich latach niewiele się zmieniło w rodzajach multimediów. Nadal możliwe są tylko 4 wartości:

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

Z kolei funkcje multimedialne zostały znacznie rozszerzone. Projektanci mogą teraz docierać do użytkowników nawet w połowie drogi, dostosowując swoje projekty tak, aby pasowały nie tylko do rozmiaru ekranu.

Obsługa przeglądarek

  • Chrome: 1.
  • Krawędź: 12.
  • Firefox: 1.
  • Safari: 3.

Źródło

Wymiary widocznego obszaru

Zdecydowanie najpopularniejsze w internecie zapytania o multimedia to zapytania dotyczące szerokości widocznego obszaru. Jednak nawet tutaj masz do wyboru. Możesz skorzystać z funkcji multimediów max-width, aby zastosować style poniżej określonej szerokości, lub z 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ę korzystać z usługi min-width. Stosuję style układu w sposób addytywny. Wprowadzam nowe reguły układu w każdym punkcie przerwania zamiast wycofywać poprzednie.

Ta metoda dodawania działa również w przypadku wysokości. Korzystając z elementu 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 jednak skorzystać z funkcji multimediów max-height. W tym przypadku nagłówek jest domyślnie zakotwiczony, ale jeśli nie będzie wystarczającej ilości miejsca w pionie, przyklejenie zostanie usunięte.

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

Wybór prefiksów (min-–max-) nie dotyczy tylko width i height. Taki sam wybór ma funkcja multimediów aspect-ratio. Jeśli chcesz stosować style z zachowaniem dokładnego stosunku szerokości do wysokości, ta opcja udostępnia też wersję 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.
}

Zapewnienie różnych stylów dla różnych formatów obrazu może szybko przestać działać. Jeśli nie potrzebujesz tak szczegółowej kontroli, funkcja multimediów orientation może lepiej spełnić Twoje potrzeby. Może on mieć 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 terminy „orientacja pionowa” i „poziomy” są najczęściej używane do określania orientacji urządzeń mobilnych, a funkcja multimediów orientation nie jest ograniczona do konkretnych urządzeń. Pełnoekranowe okno przeglądarki na typowym laptopie ma orientation o wartości landscape.

ekrany,

Różne wyświetlacze mają różną gęstość pikseli mierzoną w dpi, czyli liczbę kropek na cal. Możesz dostosować style do różnej gęstości pikseli za pomocą funkcji multimediów resolution. Podobnie jak aspect-ratio, słowo resolution ma 3 rodzaje: minimalną, maksymalną i ścisłą.

@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 nie musisz używać żadnych zapytań o media w usłudze resolution. Gęstość pikseli dotyczy zazwyczaj tylko obrazów, a obrazy elastyczne pozwalają radzić sobie z gęstością pikseli bezpośrednio w kodzie HTML.

Z kolei CSS określa animacje i przejścia. Możesz dostosować te animacje i przejścia, aby dostosować je do różnych częstotliwości odświeżania za pomocą funkcji multimediów update. Ta funkcja multimediów zgłasza jedną z 3 wartości: none, slow i fast.

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

Wartość slow parametru update oznacza, że wyświetlacz nie może się szybko odświeżyć. Wyświetlacz e-ink to przykład ekranu z wolną częstotliwością odświeżania.

Wartość fast parametru update oznacza, że ekran 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 definiować właściwości w pliku manifestu aplikacji internetowej. Jedna z nich nazywa się display i możesz nadać jej 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 podano wartość standalone (display). Jeśli ktoś doda Twoją witrynę do ekranu głównego, otworzy się ona bez interfejsu przeglądarki. Możesz dla tych użytkowników wyświetlać przycisk Wstecz.

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

Kolor

Istnieje wiele funkcji multimedialnych, dzięki którym można wysyłać zapytania o możliwości kolorystyczne urządzenia. Jeśli chcesz dostosować style do dowolnego wyświetlacza, który wyświetla tylko odcienie szarości, możesz użyć funkcji multimediów monochrome bez żadnej wartości.

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

Istnieje odpowiednia funkcja multimediów color.

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

W przypadku ekranów kolorowych możesz tworzyć zapytania za pomocą funkcji multimediów color-gamut, color-index lub dynamic-range. Wszystkie zawierają szczegółowe informacje na temat możliwości 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ść 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ż informować o rodzaju mechanizmu wprowadzania danych używanego do interakcji z 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ą dostosowywanie się do preferencji użytkownika: 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.

Możesz połączyć funkcje multimedialne w jednym zapytaniu o media. Możesz określić zakres stylów animacji, aby były one stosowane tylko wtedy, gdy urządzenie ma dużą częstotliwość odświeżania, a użytkownik nie wyraził zainteresowania zmniejszonym ruchem.

@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 używa palety kolorów ograniczonej 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 pozwala użytkownikom wskazać, że korzystają z połączenia z pomiarem użycia danych, co pozwala przesłać mniejsze lub mniejsze zasoby.

Pozostałe propozycje są nadal opracowywane. W następnym i ostatnim module poznasz ofertę pakietową 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)?

Prawda
Konkretną szerokość można uzyskać tylko przez jednoczesne sprawdzenie szerokości powyżej 1023px i poniżej 1025px.
Fałsz
Do wyboru masz min-width i max-width.

Zapytanie o multimedia może wyszukać urządzenie w określonym aspect-ratio, takim jak @media (aspect-ratio: 4/3)?

Prawda
Można dopasować jeden współczynnik proporcji w odniesieniu do formatu obrazu.
Fałsz
Ta opcja jest dostępna w przypadku usługi aspect-ratio.

Które zapytania o multimedia w kolorach są prawidłowe?

@media (color)
Pasuje do każdego urządzenia w kolorze.
@media (monochrome)
Pasuje do każdego urządzenia bez obsługi kolorów.
@media (color-gamut: srgb)
Dopasowuje urządzenia z obsługą kolorów sRGB.
@media (min-color-index: 15000)
Dopasowuje urządzenia, które mają co najmniej 15 tys. dostępnych kolorów.
@media (dynamic-range: high)
Dopasowuje urządzenia obsługujące zakresy kolorów HD.

Które z tych zapytań o multimedia związane z ustawieniami użytkownika są prawidłowe?

@media (prefers-color-scheme: dark)
Dopasowuje się do sytuacji, gdy system operacyjny użytkownika jest ustawiony na tryb ciemny.
@media (prefers-colors: high-definition)
To nieprawda.
@media (prefers-reduced-motion: reduce)
Dopasowuje się do sytuacji, gdy system operacyjny użytkownika jest ustawiony tak, by ograniczać ruch.
@media (prefers-contrast: more)
Wyświetlane, gdy użytkownik ma w systemie operacyjnym ustawiony wyższy kontrast.
@media (prefers-site-speed: fast)
To nieprawda.