HTML <link> media attribuutti

HTML <link> -elementti

Määritelmä ja käyttö

media Atribuutti määrittää, mitä mediaa tai laitetta kohderesurssi on optimoitu.

media Atribuutti määrittää, millä laitteella linkitetty dokumentti näytetään.

Tämä attribuutti käytetään pääasiassa CSS-tyylisivujen kanssa, jotta eri median lajille voidaan määrittää eri tyylit.

media Atribuutti voi hyväksyä useita arvoja.

Esimerkki

Kaksi erilaista tyylisivua kahdelle erilaiselle median lajille (näyttö ja tulostus):

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

Kokeile itse

Syntaksi

<link media="arvo>

Mahdolliset operaattorit

Operaattorit Kuvaus
and Määrittää AND operaattorin.
not Määrittää NOT operaattorin.
, Määrittää OR operaattorin.

Laite

Laite Kuvaus
all Oletus. Käytetään kaikissa mediatyypeissä.
print Käytetään tulostusennakkotarkastusmodeissa/tulostus sivuilla.
screen Käytetään tietokoneen näytöllä, tableteilla, älypuhelimilla jne.
speech Käytetään sivujen lukemiseen.
aural Ei enää käytössä.Äänisyntä.
braille Ei enää käytössä.Näkövammaisten palautteessa käytettävät laitteet.
handheld Ei enää käytössä.Käsinäyttöinen laite (pieni näyttö, rajallinen bändi).
projection Ei enää käytössä.Projektori.
tty Ei enää käytössä.Käyttää kiinteää välitaulua merkkijärjestelmien ja vastaavien median.
tv Ei enää käytössä.Televisiokalustot (alhainen resoluutio, rajallinen pyöristävyys).

Arvo

Arvo Kuvaus
aspect-ratio

Määrittää kohde näyttöalueen leveys/korkeus suhteen.

Voi käyttää "min-" ja "max-"-prefiksejä.

Esimerkki: media="screen and (aspect-ratio:16/9)"
color

Määrittää kohde näyttimen jokaisen väriä edustavan bittien määrän.

Voi käyttää "min-" ja "max-"-prefiksejä.

Esimerkki: media="screen and (color:3)"
color-index

Määrittää kohde näyttimen käsittelemän värimäärän.

Voi käyttää "min-" ja "max-"-prefiksejä.

Esimerkki: media="screen and (min-color-index:256)"
device-aspect-ratio Ei enää käytössä.Määrittää kohde näyttimen/paperin device-width/device-height suhteen.
device-width Ei enää käytössä.Määrittää kohde näyttimen/paperin leveyden.
device-height Ei enää käytössä.Määrittää kohde näyttimen/paperin korkeuden.
grid

Määrittää, onko tuloväline ruutu vai bittikartta.

Mahdolliset arvot: "1" tarkoittaa ruutua, "0" on muu.

Esimerkki: media="handheld and (grid:1)"
height

Määrittää kohde näyttöalueen korkeuden.

Voi käyttää "min-" ja "max-"-prefiksejä.

Esimerkki: media="screen and (max-height:700px)"
monochrome

Määrittää yhdenvärisen ruudukon kuvapisteen bittiä.

Voi käyttää "min-" ja "max-"-prefiksejä.

Esimerkki: media="screen and (monochrome:2)"
Suunta

Määritetään kohde näyttimen/paperin suunta.

Mahdolliset arvot ovat: "portrait" tai "landscape".

Esimerkki: media="all and (orientation: landscape)"
Resoluutio

Määritetään kohde näyttimen/paperin kuvapistepaksuus (dpi tai dpcm).

Voi käyttää "min-" ja "max-"-prefiksejä.

Esimerkki: media="print and (resolution:300dpi)"
Skannaus

Määritetään tv-näyttimen skannausmenetelmä.

Mahdolliset arvot ovat: "progressive" ja "interlace".

Esimerkki: media="tv and (scan:interlace)"
Leveys

Määritetään kohde näyttöalueen leveys.

Voi käyttää "min-" ja "max-"-prefiksejä.

Esimerkki: media="screen and (min-width:500px)"

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki

HTML <link> -elementti