Definition af media for css

Hop længere ned på siden, til:

Siden er opdateret 25. 12. 2011

Media bruges som attribut til elementet link (brugt til kald af css), for at definere, hvilket media css er skrevet til.

Bemærk, at media ikke er en css-egenskab! Men da den knytter sig til et html-element (om end med html-syntax) for at definere egenskaber til dette og da det er en ret vigtig egenskab, har jeg valgt at medtage media i listen over css-egenskaber.

Media er heller ikke et selvstændigt html-element og brugen af media ligner mere brugen af egenskaber til html-elementer som vi kender det fra gameldags html (versioner op til 3.2).

Til attributten media kan knyttes disse parametre:

all
css-definitionen er gældende for alle medier. Denne parameter er ikke valid, men den er alligevel default-værdi i de fleste browsere. Parameteren bør ikke bruges, undlad i stedet at definere media.

Det er ganske vist i strid med W3C's anbefalinger, men browserne vælger ganske fornuftigt at lade typen all være default-værdi, når andet ikke er angivet.
aural
css-definitionen er gældende for talesyntese-applikationer, der 'læser' siden op for blinde og svagtseende.
braille
css-definitionen er gældende for enheder, der udskriver sidens indhold med 'blindeskrift'.
handheld
css-definitionen er gældende for enheder med meget små skærme - f.eks. PDA'er og mobiltelefoner.
print
css-definitionen er gældende for udprintning. Bør kun bruges sammen med en css uden media-definition eller en css rettet mod screen.
Kaldet til print-css skal sættes efter kaldet til skærm-css, hvis dette ikke har nogen media-definition.
projection
css-definitionen er gældende for projektorer (der kaster browserbilledet op i stor størrelse på en væg). Normalt vil man i dag bruge samme css som til screen.
screen
css-definitionen er gældende for visning på computerskærm. Parameteren bør ikke bruges, hvis der ikke også defineres komplet css beregnet på udprint - ellers vil der slet ikke være styr på, hvordan en side vil se ud på print.
tty
css-definitionen er gældende for enheder, der kun kan udskrive med monospace-font.
tv
css-definitionen er gældende for enheder med lav billedopløsning - f.eks. TV-apparater.

^ Tilbage til sidens top


Eksempler på brug af forskellige typer css

Bemærk, at der i alle eksemplerne er anvendt de samme to css-filer:

  1. En css-fil, der indeholder alle de definitioner, der er nødvendige til visning på skærm.
  2. En css-fil, der indeholder de ændringer, der skal gælde ved udprintning - mindre venstre margen på indhold, slukket menu osv.

Eksempel, hvor der kun er defineret brug af en css-fil og hvor der ikke er defineret media-type:

<link href="style.css" rel="stylesheet" type="text/css" />

Demo af css uden nogen definition


Eksempel, hvor der er defineret brug af to css-filer og hvor der til den anden er defineret media-type print:

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

Bemærk rækkefølgen i kodeeksemplet herover. Det er vigtigt, at du ikke bytter om på dem - ellers vil du se, at nogle af dine definitioner for udprint bliver annulleret af den efterfølgende adresseløse css.

Demo af css udefineret og rettet mod print


Eksempel, hvor der er defineret brug af to css-filer, hvor der til den første er defineret media-type screen og til den anden er der defineret media-type print:

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" />

Bemærk, at her er rækkefølgen ligegyldig, men du tvinger dig selv til at udvikle et fuldstændigt css til brug for print. Du kan ikke nøjes med at definere ændringerne.

Demo af css rettet mod både screen og print


Mediatyperne aural, braile, handheld, projection, tty og tv kan jeg på nuværende tidspunkt ikke give eksempler på - det har jeg ikke de nødvendige ressourcer til.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen oktober 2004
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - Definition af media for css
sidens top
Brugere lige nu: 1
Home Mail