Atrybut media w <style> HTML

Tag HTML <style>

Definicja i zastosowanie

media Atrybut używany do określenia, które media lub urządzenia mają być optymalizowane przez CSS style.

Atrybut używany do określenia, które urządzenia (np. iPhone), mowa lub media drukowane mają być objęte stylem.

Wskazówka:Atrybut może przyjąć wiele wartości.

Przykład

Przykład 1

Definicja stylów używanych do drukowania:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

Spróbuj sam.

Przykład 2

Różne style są rozróżniane za pomocą cechy width atrybutu media:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

Spróbuj sam.

Komentarz:Styl pierwszej grupy jest używany, gdy szerokość okna przeglądarki wynosi mniej niż 500 pikseli, a styl drugiej grupy jest używany, gdy szerokość okna wynosi więcej niż 500 pikseli.

Gramatyka

<style media="value>

Możliwe operatory

Operator Opis
and Definicja operatora AND.
not Definicja operatora NOT.
, Definicja operatora OR.

Warunki użycia stylu mogą być bardzo szczegółowe. Najpierw należy zdefiniować typ urządzenia, na które style są skierowane. Poniższa tabela podsumowuje wszystkie dopuszczone wartości:

Urządzenie

Urządzenie Opis
all Domyślny. Przystępny dla wszystkich urządzeń.
aural Syntezator mowy.
braille Urządzenia do feedbacku w alfabecie Braille'a.
handheld Urządzenia przenośne (mały ekran, ograniczona przepustowość).
projection Projektor.
print Tryb podglądu druku/strona drukowana.
screen Ekran komputerowy.
tty Telegrafy maszynowe z siatką znaków o stałej odległości oraz podobne media.
tv Urządzenia telewizyjne (niska rozdzielczość, ograniczona możliwość przewijania).

Przeglądarka odpowiedzialna jest za interpretację kategorii urządzeń. Niektóre typy urządzeń (np. screen i print) są interpretowane bardzo podobnie w różnych przeglądarkach, ale inne urządzenia (np. handheld) mogą być interpretowane znacznie bardziej różnie. Dlatego bardzo ważne jest, aby sprawdzić, czy interpretacja przeglądarki dotyczącej konkretnego urządzenia jest zgodna z naszą interpretacją.

Atrybuty

Atrybuty Opis
width

Określa szerokość obszaru wyświetlania docelowego.

Można używać przedrostków "min-" i "max-".

Na przykład: media="screen and (min-width:500px)"
height

Określa wysokość obszaru wyświetlania docelowego.

Można używać przedrostków "min-" i "max-".

Na przykład: media="screen and (max-height:700px)"
device-width

Określa szerokość ekranu/docelowego papieru.

Można używać przedrostków "min-" i "max-".

Na przykład: media="screen and (device-width:500px)"
device-height

Określa wysokość ekranu/docelowego papieru.

Można używać przedrostków "min-" i "max-".

Na przykład: media="screen and (device-height:500px)"
orientation

Określa kierunek ekranu/docelowego papieru.

Dostępne wartości: portrait lub landscape.

Ta cecha nie ma określeń.

Na przykład: media="all and (orientation: landscape)"
aspect-ratio

Określa współczynnik szerokości do wysokości obszaru wyświetlania docelowego.

Można używać przedrostków "min-" i "max-".

Na przykład: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Określa współczynnik szerokości do wysokości urządzenia ekranu/papieru.

Można używać przedrostków "min-" i "max-".

Na przykład: media="screen and (aspect-ratio:16/9)"
color

Określa liczbę bitów na każdy kolor ekranu docelowego.

Można używać przedrostków "min-" i "max-".

Na przykład: media="screen and (color:3)"
color-index

Określa liczbę kolorów, które może przetwarzać ekran docelowy.

Można używać przedrostków "min-" i "max-".

Na przykład: media="screen and (min-color-index:256)"
monochrome

Określa liczbę bitów na każdy piksel w buforze jednobarwnym.

Można używać przedrostków "min-" i "max-".

Na przykład: media="screen and (monochrome:2)"
resolution

Określa gęstość pikseli ekranu docelowego/papieru (dpi lub dpcm).

Można używać przedrostków "min-" i "max-".

Na przykład: media="print and (resolution:300dpi)"
scan

Określa tryb skanowania telewizji.

Dostępne wartości to progressive i interlace.

Ta cecha nie ma określeń.

Na przykład: media="tv and (scan:interlace)"
grid

Określa, czy urządzenie wyjściowe jest siatką czy bitmapą.

Urządzenia typu siatka używają stałej siatki do wyświetlania treści, na przykład terminali opartych na znakach lub jednorzędowych wyświetlaczy wiadomości.

Dopuszczalne wartości to 0 i 1 (1 oznacza urządzenie typu siatka).

Ta cecha nie ma określeń.

Na przykład: media="handheld and (grid:1)"

Cechy takie jak width są zwykle używane z określeniami min i max. Można również pozwolić, aby użycie stylów zależało od bardzo precyzyjnych wymiarów okna, ale dodanie określeń sprawia, że warunki są bardziej elastyczne.

W tabeli wymieniono i opisano dostępne funkcje. O ile nie jest to wyraźnie oznaczone, te funkcje można modyfikować za pomocą min- i max-, tworząc granice zamiast dokładnych wartości.

Podobnie jak w przypadku określonych urządzeń, te funkcje są interpretowane przez przeglądarkę. W przypadku tego, które funkcje przeglądarka rozpoznaje oraz kiedy i w jaki sposób mogą być używane, sytuacja jest złożona. Jeśli mają być zastosowane style dla tych funkcji, konieczne jest przeprowadzenie kompleksowych testów oraz przygotowanie alternatywnych stylów w przypadku, gdy funkcje te nie będą dostępne.

Wsparcie przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie

Tag HTML <style>