HTML <link> media Atrybut

❮ Znacznik HTML <link>

Przykład

Dwa różne arkusze stylów dla dwóch różnych typów nośników (sitodruk i druk):

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

Definicja i użycie

Atrybut określa, dla mediajakich nośników/urządzeń zoptymalizowany jest zasób docelowy.

Ten atrybut jest używany głównie w arkuszach stylów CSS do określania różnych stylów dla różnych typów mediów.

mediaAtrybut może przyjmować kilka wartości .


Obsługa przeglądarki

Attribute
media Yes Yes Yes Yes Yes

Składnia

<link media="value">

Możliwi operatorzy

Value Description
and Specifies an AND operator
not Specifies a NOT operator
, Specifies an OR operator

Urządzenia

Value Description
all Default. Used for all media type devices
print Used for Print preview mode/printed pages
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page out loud
aural Deprecated. Speech synthesizers
braille Deprecated. Braille feedback devices
handheld Deprecated. Handheld devices (small screen, limited bandwidth)
projection Deprecated. Projectors
tty Deprecated. Teletypes and similar media using a fixed-pitch character grid
tv Deprecated. Television type devices (low resolution, limited scroll ability)

Wartości

Value Description
aspect-ratio Specifies the width/height ratio of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (max-aspect-ratio:16/9)"
color Specifies the bits per color of target display.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-color:3)"
color-index Specifies the number of colors the target display can handle.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-color-index:256)"
device-aspect-ratio Deprecated. Specifies the device-width/device-height ratio of the target display/paper.
device-width Deprecated. Specifies the width of the target display/paper.
device-height Deprecated. Specifies the height of the target display/paper.
grid Specifies if the output device is grid or bitmap.
Possible values are "1" for grid, and "0" otherwise.
Example: media="handheld and (grid:1)"
height Specifies the height of the  targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (max-height:700px)"
monochrome Specifies the bits per pixel in a monochrome frame buffer.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-monochrome:2)"
orientation Specifies the orientation of the target display/paper.
Possible values: "portrait" or "landscape"
Example: media="all and (orientation: landscape)"
resolution Specifies the pixel density (dpi or dpcm) of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="print and (min-resolution:300dpi)"
scan Specifies scanning method of a tv display.
Possible values are "progressive" and "interlace".
Example: media="tv and (scan:interlace)"
width Specifies the width of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-width:500px)"

❮ Znacznik HTML <link>