HTML <style> media ominaisuus

HTML <style> -elementti

Määrittely ja käyttö

media Ominaisuus määrittää, mihin mediaan tai laitteeseen (optimoidaan) CSS-tyylit kohdistetaan.

Tämä ominaisuus käytetään määrittämään, mihin laitteisiin (esim. iPhone), ääniin tai tulostusmediaan tyylit sovelletaan.

Vinkki:Tämä ominaisuus voi hyväksyä useita arvoja.

Esimerkki

Esimerkki 1

Määritellään tulostusvarten käytettävät tyylit:

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

Kokeile itse.

Esimerkki 2

Käytetään media ominaisuuden width ominaisuutta erottamaan kaksi tyylipakettia:

<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>

Kokeile itse.

Huomautus:Käytetään ensimmäistä tyylipakettia silloin, kun selaimen ikkunan leveys on alle 500 pikseliä, ja toista tyylipakettia, kun ikkunan leveys on yli 500 pikseliä.

Syntaksi

<style media="arvo">

Mahdolliset operaattorit

Operaattorit kuvaus
and Määrittely AND operaattori.
not Määrittely NOT operaattori.
, Määrittely OR operaattori.

Tyylin käyttöehdot voidaan suunnitella erittäin yksityiskohtaisiksi. Ensimmäinen asia, joka on selkeästi määritettävä, on kohdennettu laite tyyppi. Seuraavassa taulukossa on lueteltu kaikki säännellyt arvot:

Laitteet

Laitteet kuvaus
all Oletus. Sopii kaikkiin laitteisiin.
aural Äänisyntä laitteet.
braille Kuiskauspalautte laitteet.
handheld Käsinäyttö laitteet (pieni näyttö, rajallinen kaistaleveys).
projection Projektori.
print Tulostusennuste-tila/tulostus sivu.
screen Tietokoneen näyttö.
tty Käyttää kiinteästi etäisyydellä olevia merkkiyhdyskäyrämerkkejä olevia telegraafityyppejä ja vastaavia medioita.
tv Televisiolaitteet (alhainen tarkkuus, rajallinen pyörittävyyskyky).

Selain vastaa laitteiden luokitteluun. Joillakin laitteilla (esim. screen ja print) tulkinta on melko yhtenäistä kaikissa selaimissa, mutta toisten laitteiden (esim. handheld) tulkinta voi olla paljon satunnaisempaa. Siksi on erittäin tärkeää varmistaa, että kohdennettu selain tulkitsii tiettyjä laitteita samalla tavalla kuin itse.

ominaisuudet

ominaisuudet kuvaus
width

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

Voit käyttää "min-" ja "max-" префиксов.

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

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

Voit käyttää "min-" ja "max-" префиксов.

Esimerkiksi: media="screen and (max-height:700px)"
device-width

Määrittää kohde näyttöä/paperin leveyden.

Voit käyttää "min-" ja "max-" префиксов.

Esimerkiksi: media="screen and (device-width:500px)"
device-height

Määrittää kohde näyttöä/paperin korkeuden.

Voit käyttää "min-" ja "max-" префиксов.

Esimerkiksi: media="screen and (device-height:500px)"
orientation

Määrittää kohde näyttöä/paperin suunnan.

Tuetut arvot: portrait tai landscape.

Tämä ominaisuus ei ole rajoitettu.

Esimerkiksi: media="all and (orientation: landscape)"
aspect-ratio

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

Voit käyttää "min-" ja "max-" префиксов.

Esimerkiksi: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Määrittää kohde näyttöä/paperin laitteiston leveys/korkeus suhde.

Voit käyttää "min-" ja "max-" префиксов.

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

Määrittää kohde näyttöä jokaisen väriä bittien määrän.

Voit käyttää "min-" ja "max-" префиксов.

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

Määrittää kohde näyttöä voi käsitellä värimäärän.

Voit käyttää "min-" ja "max-" префиксов.

Esimerkiksi: media="screen and (min-color-index:256)"
monochrome

Määrittää yksivärinen ruudunväri tallennusalueessa jokaisen kuvapisteen bittien määrän.

Voit käyttää "min-" ja "max-" префиксов.

Esimerkiksi: media="screen and (monochrome:2)"
resolution

Määrittää kohde näyttöä/paperin kuvapiste tiheyden (dpi tai dpcm).

Voit käyttää "min-" ja "max-" префиксов.

Esimerkiksi: media="print and (resolution:300dpi)"
scan

Määrittää television skannausmuodon.

Tuetut arvot ovat progressive ja interlace.

Tämä ominaisuus ei ole rajoitettu.

Esimerkiksi: media="tv and (scan:interlace)"
ruudukko

Määritellään, onko ulostulolaite ruudukko vai bittikartta.

Ruudukkomallin laitteet käyttävät kiinteää ruudukkoa näyttääksensä sisältöä, esimerkiksi merkkipohjaiset pääteet ja yhden rivin näyttävät hälytyslaitteet.

Tuetut arvot ovat 0 ja 1 (1 tarkoittaa ruudukkomallista laitteistoa).

Tämä ominaisuus ei ole rajoitettu.

Esimerkiksi: media="handheld and (grid:1)"

Width-ominaisuudet yleensä yhdistetään min ja max-sanonnaisiin. Ilman näitä sanonnaisia, stailin käyttö voi riippua erittäin tarkasta ikkunakoon, mutta lisäämällä sanonnaiset tehdään ehdot kiihkeämmiksi.

Yllä oleva taulukko lukee ja esittelee käytettävissä olevat ominaisuudet. Ellei muuta mainita, nämä ominaisuudet voidaan käyttää min- ja max-avainsanojen kanssa, muodostaen kynnysarvon eikä tarkan arvon.

Kuten säädetyn laitteiston tapauksessa, nämä ominaisuudet ovat selaimen vastuulla tulkita. Selaimen tietämys siitä, mitä ominaisuuksia se tuntee ja milloin nämä ominaisuudet ovat olemassa ja käytettävissä, on monimutkainen. Jos näitä ominaisuuksia sovelletaan stailiin, on ehdottomasti suoritettava kattava testaus ja varmistettava, että on valmiina vaihtoehtoisia stailielementtejä, jos ominaisuudet eivät ole käytettävissä.

Selaimen tuki

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

HTML <style> -elementti