CSS/Meediaspetsiifilised stiilid

Allikas: Vikiõpikud
< CSS
(Ümber suunatud leheküljelt CSS:Meediaspetsiifilised stiilid)

Erinevad meediad kasutvad erinevaid väljendusvorme. Presentatsioonis, mida näidatakse suurele seinale, kasutatakse suurt rasvast teksti ning tugevat kontrasti. Veebilehel püüeldakse mahedate värvide ning kasutatakse reeglina mõnda ekraanilt kergesti loetavat sans-serif fonti. Trükitud materjalides seevastu kirjutatakse paberi ja tindi kokkuhoiu pärast võimalikult tihedalt ning väikeselt, kasutades peamiselt musta värvi valgel taustal ning tüüpilisi serifitega trükifonte.

CSS pole mõeldud üksnes veebilehtede ning ekraanil kuvamise tarbeks, ehkki see on ta peamine sihtkoht. CSS-ga saab samavõrd hästi disainida ka trükiseid ja esitlusi ning isegi kõnesüntesaatori tonaalsust.

Näiteks ühe tüüpiline veebileht koos oma kujundusega pole reeglina just kõige sobivam materjal printimiseks: lillelised taustad, gradiendid, kahkjasrohekas tekst jms. See ei lähe kohe mitte. Õnneks pakub CSS meile võimaluse määrata, milliseid stiile millise meedia puhul kasutada ning me võime oma veebilehe koodis öelda, et sel juhul kui see dokument läheb printerisse, siis kasuta hoopis ühte teist stiililehte, mis on meil kohandatud täpselt printimise tarbeks.

Meediatüüpide määratlemine[muuda]

Meediatüübi määratlemiseks on mitmeid mooduseid:

  • Meedia määratlemine HTML-dokumendis stiililehe linkimisel. Selle meetodi eeliseks on, et vastavad stiililehed laetakse alla alles siis kui nende järgi on vajadus. Näiteks prinditava meedia stiilidega CSS-fail laetakse alla alles siis, kui dokumenti printima hakatakse.
<link rel="stylesheet" type="text/css" media="screen" href="foo.css" />
<link rel="stylesheet" type="text/css" media="print, handheld" href="bar.css" />
<link rel="stylesheet" type="text/css" media="projection" href="foobar.css" />
  • Meedia määratlemine importimisel @import-konstruktsiooniga.
@import url("foo.css") print;
  • Meedia määratlemine @media-konstruktsiooniga. Vastavale meediale spetsiifilised stiilid kirjutatakse vastava @media-bloki sisse.
@media print {
    body {font-family: "Times New Roman", sans-serif }
    a {color: black; font-style: italic }
}

Meediatüübid[muuda]

  • all - Kõik meediatüübid.
  • braille - Kombitavat pimedate kirja (braille) genereerivad seadmed.
  • embossed - Pimedate kirja lehekülgede kaupa trükkivad seadmed.
  • handheld - Kaasaskantavad, tüüpiliselt väikse ekraaniga ning aeglase ühendusega, seadmed (pihuarvutid, mobiiltelefonid).
  • print - Trükitav materjal, lehekülgede kaupa esitatav.
  • projection - Esitlused, presentatsioonid.
  • screen - Peamiselt värvilised arvutiekraanid.
  • speech - Kõnesüntesaatorid.
  • tty - Ettemääratud suurusega sümboliruudustikud nagu terminalide ning teletaibi ekraanid. Idee poolest peaks see meediatüüp kehtima selliste brauserite nagu lynx puhul.
  • tv - Teleritüüpi seadmed (madal resolutsioon, värvid, piiratud kerimisvõimalused, heli).