Atrybut media HTML <link>
Definicja i użycie
media Atrybut określa, dla jakiego medium/urządzenia został zoptymalizowany celowy zasób.
media Atrybut określa, na jakim urządzeniu zostanie wyświetlony powiązany dokument.
Ta atrybut jest głównie używany z arkuszami CSS, aby指定 różne style dla różnych typów mediów.
media Atrybut może przyjąć wiele wartości.
Przykład
Dwa różne style arkuszy dla dwóch różnych typów mediów (ekran i druk):
<head> <link rel="stylesheet" type="text/css" href="theme.css"> <link rel="stylesheet" type="text/css" href="print.css" media="print"> </head>
Gramatyka
<link media="value>
Możliwe operatory
| Operatory | Opis |
|---|---|
| and | Definiuje operator AND. |
| not | Definiuje operator NOT. |
| , | Definiuje operator OR. |
Urządzenie
| Urządzenie | Opis |
|---|---|
| all | Domyślne. Używane dla wszystkich typów urządzeń mediów. |
| Do podglądu drukowania i stron do drukowania. | |
| screen | Do komputerów, tabletów, smartfonów i innych. |
| speech | Ekran czytnika ekranowego do czytania stron. |
| aural | Przestarzałe.Syntezator mowy. |
| braille | Przestarzałe.Urządzenia do odbioru braille'a. |
| handheld | Przestarzałe.Urządzenia przenośne (mały ekran, ograniczona przepustowość). |
| projection | Przestarzałe.Projektor. |
| tty | Przestarzałe.Urządzenia z klawiaturą o stałej odległości między znakami i podobne media. |
| tv | Przestarzałe.Urządzenia typu telewizor (niska rozdzielczość, ograniczona zdolność do przewijania). |
Wartość
| Wartość | Opis |
|---|---|
| aspect-ratio |
Definiuje proporcję szerokości do wysokości docelowego obszaru wyświetlania. Można używać przedrostków "min-" i "max-". Przykład: media="screen and (aspect-ratio:16/9)" |
| color |
Definiuje liczbę bitów na każdy kolor docelowego monitora. Można używać przedrostków "min-" i "max-". Przykład: media="screen and (color:3)" |
| color-index |
Definiuje liczbę kolorów, które może przetwarzać docelowy monitor. Można używać przedrostków "min-" i "max-". Przykład: media="screen and (min-color-index:256)" |
| device-aspect-ratio | Przestarzałe.Definiuje proporcję device-width/device-height docelowego monitora/papieru. |
| device-width | Przestarzałe.Definiuje szerokość docelowego monitora/papieru. |
| device-height | Przestarzałe.Definiuje wysokość docelowego monitora/papieru. |
| grid |
Definiuje, czy urządzenie wyjściowe jest siatką czy bitmapą. Możliwe wartości: "1" oznacza siatkę, "0" oznacza inne. Przykład: media="handheld and (grid:1)" |
| height |
Definiuje wysokość docelowego obszaru wyświetlania. Można używać przedrostków "min-" i "max-". Przykład: media="screen and (max-height:700px)" |
| monochrome |
Definiuje bity na każdy piksel w buforze jednobojowym. Można używać przedrostków "min-" i "max-". Przykład: media="screen and (monochrome:2)" |
| kierunek |
Określa kierunek wyświetlacza/papieru celu. Możliwe wartości to: "portrait" lub "landscape". Przykład: media="all and (orientation: landscape)" |
| rozdzielczość |
Określa gęstość punktów ekranu/papieru (dpi lub dpcm) celu. Można używać przedrostków "min-" i "max-". Przykład: media="print and (resolution:300dpi)" |
| skan |
Określa metodę skanowania wyświetlacza TV. Możliwe wartości to: "progressive" i "interlace". Przykład: media="tv and (scan:interlace)" |
| szerokość |
Określa szerokość obszaru wyświetlania celu. Można używać przedrostków "min-" i "max-". Przykład: media="screen and (min-width:500px)" |
Obsługa przeglądarek
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Wsparcie | Wsparcie | Wsparcie | Wsparcie | Wsparcie |
