Zapytania o multimedia

Projektanci mogą dostosowywać swoje projekty, aby dostosować je do użytkowników. Najwyraźniej jest to format urządzenia użytkownika – jego szerokość, proporcje obrazu itd. Za pomocą zapytań o media projektanci mogą odpowiadać na te różne formaty.

Zapytania o media są inicjowane za pomocą słowa kluczowego @media (w regule CSS) i można ich używać w różnych przypadkach.

Kierowanie na różne typy danych wyjściowych

Strony internetowe często wyświetlają się na ekranach, ale CSS można też wykorzystać do stylizacji stron na inne dane wyjściowe. Możesz zdecydować, że Twoje strony internetowe wyglądają inaczej na ekranie, a po wydrukowaniu wyglądają inaczej. Jest to możliwe dzięki wysyłaniu zapytań o typy mediów.

W tym przykładzie kolor tła jest szary. Jeśli jednak strona jest wydrukowana, tło powinno być przezroczyste. W ten sposób zaoszczędzisz tusz do drukarki.

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

Możesz w ten sposób użyć w arkuszu stylów reguły @media lub utworzyć oddzielny arkusz stylów i użyć atrybutu media w elemencie link:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

Jeśli nie określisz typu mediów w swojej usłudze porównywania cen, automatycznie otrzyma on wartość all. Te 2 bloki kodu CSS są równoważne:

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

Te 2 wiersze kodu HTML są równoważne:

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

Warunki zapytania

Do typów multimediów możesz dodawać warunki. Są to tak zwane zapytania o multimedia. CSS jest stosowany tylko wtedy, gdy pasuje typ mediów, a warunek jest spełniony. Takie warunki są nazywane funkcjami multimedialnymi.

Oto składnia zapytań o media:

@media type and (feature)

Możesz ich używać w elemencie link, jeśli Twoje style znajdują się w osobnym arkuszu stylów:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

Załóżmy, że chcesz zastosować różne style w zależności od tego, czy okno przeglądarki jest w orientacji poziomej, (szerokość widocznego obszaru jest większa niż jego wysokość) czy w trybie pionowym (wysokość widocznego obszaru jest większa niż szerokość). Dostępna jest funkcja multimediów o nazwie orientation, której możesz użyć, aby sprawdzić, czy:

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

Jeśli wolisz używać osobnych arkuszy stylów:

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

W tym przypadku typ nośnika to all. Jest to wartość domyślna, więc możesz ją pominąć, jeśli chcesz:

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

Albo używając oddzielnych arkuszy stylów:

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

Chociaż używanie osobnych arkuszy stylów dla różnych typów mediów, np. print, może się okazać dobrym rozwiązaniem, to raczej nie jest używanie oddzielnego arkusza stylów do każdego zapytania multimediów. Zamiast nich używaj reguł @media.

Dostosowywanie stylów na podstawie rozmiaru widocznego obszaru

Jedną z najbardziej przydatnych funkcji multimedialnych w przypadku projektowania responsywnego są wymiary widocznego obszaru przeglądarki. Aby zastosować style, gdy okno przeglądarki jest szerszye niż określona szerokość, użyj min-width.

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

Użyj funkcji multimediów max-width, aby zastosować style poniżej określonej szerokości:

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

W zapytaniach o media możesz używać dowolnych jednostek długości CSS. Jeśli Twoje treści zawierają głównie obrazy, najlepszym rozwiązaniem są piksele. Jeśli treść zawiera głównie tekst, lepiej użyć jednostki względnej opartej na rozmiarze tekstu, takiej jak em czy ch:

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

Możesz też łączyć zapytania o media, by zastosować więcej niż jeden warunek. Aby połączyć zapytania o media, użyj słowa and:

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

Wybieranie punktów przerwania na podstawie treści

Punkt, w którym warunek cech multimedialnych staje się spełniony, jest nazywany punktem przerwania. Najlepiej wybrać punkty przerwania na podstawie treści, a nie rozmiarów popularnych urządzeń, ponieważ zmieniają się one w kolejnych cyklach publikowania nowych technologii.

W tym przykładzie 50em to punkt, w którym wiersze tekstu stają się zbyt długie. Tworzony jest więc punkt przerwania, aby interfejs był bardziej czytelny. Korzystając z właściwości column-count, tekst jest od tego momentu podzielony na 2 kolumny.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

Kombinacje

Możesz używać zapytań o multimedia na podstawie wysokości widocznego obszaru, a nie tylko szerokości. Może to być przydatne przy optymalizacji zawartości interfejsu w części strony widocznej na ekranie. Jeśli w poprzednim przykładzie czytelnicy korzystają z szerokiego, ale krótkiego okna przeglądarki, muszą przewinąć o jedną kolumnę w dół, a potem z powrotem w górę, by dostać się na górę drugiej kolumny. Bezpieczniej jest stosować kolumny tylko wtedy, gdy widoczny obszar jest dostatecznie szeroki i wysoki.

Możesz łączyć zapytania o multimedia, aby style były stosowane tylko wtedy, gdy są spełnione wszystkie warunki. Aby można było zastosować style kolumn, w tym przykładzie widoczny obszar musi mieć co najmniej 50em szerokości i 60em wysokości. Te punkty przerwania zostały wybrane na podstawie ilości treści.

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

Te przykłady pokazują, jak zapytania o multimedia można wykorzystać do dostosowania projektów do formatu urządzenia użytkownika. To tylko fascynujące możliwości. Zapytania o multimedia mogą wykraczać poza szerokość i wysokość oraz umożliwiać dostęp do preferencji użytkownika dotyczących ułatwień dostępu i kolorów motywu. Dostosowanie układu zapytań o multimedia to świetny początek projektowania responsywnego, które bazuje na tych i innych funkcjach.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat elastycznych zapytań o media.