CSS media stylesheet
In CSS is het vrij eenvoudig de weergave van de inhoud van je website aan te passen aan de media waarop het vertoond wordt. Zo zijn er media types voor screen, projection, handheld, print, tty, tv, all, braille, embossed en aural!
- all = voor alle media types
- aural = computergestuurde synthetische spraak uitgave (Opera browser)*
- braille = voor uitgave apparatuur die braille regels kunnen genereren
- embossed = voor braille printers
- handheld = voor weergave op diverse PDA's
- print = voor print op papier
- projection = voor beamers en projectie
- screen = voor computer beeldschermen
- tty = voor niet grafische tekst uitgave en tekst geörienteerde browsers (Lynx)
- tv = voor grootbeeld tv's met beperkte tekst scrolling
* dit zal in CSS 3 wijzigen in 'speech'
De meest gebruikte media styles zijn screen, projection en print. Je kunt dit op verschillende manieren inbinden, in de <head> van de HTML pagina via een <link>;
<link rel="stylesheet" media="screen, projection" href="website.css">
<link rel="stylesheet" media="print, embossed" href="print.css">
<link rel="stylesheet" media="aural" href="speaker.css">
of via een @import ;
<style type="text/css">
@import "master.css";
@import url("navigatie.css");
@import url("druk.css") print, embossed;
</style>
IE 5.x, ondersteunt alleen screen en all!
Specifieke print styles.
Net als voor het scherm kun je ook voor 'print' speciale CSS schrijven! Stel je hebt een wat langere webpagina met aardig wat tekst. Als je die print zal alles achter elkaar gezet worden en kan het gebeuren dat een titel kopje ergens onder aan een pagina komt te staat en de tekst op de volgende blz. verder gaat! Om er nu voor te zorgen dat, iedere gedrukte pagina, start met een titel kopje, kun je gebruik maken van een speciale CSS class.
Stel je titel kopjes hebben allemaal een <h3> dan kun je deze de volgende CSS class geven:
.break {page-break-before: always;}
in HTML
<h3 class="break">Titel</h3>
Deze class zorgt er nu voor dat er altijd een pagebreak'' zal plaatsvinden voor elke <h3> binnen je tekst.
Absolute inline links.
Veel webpagina hebben een absolute inline tekst link. Als je dit print zie je; 'print'. Op een website is dit zinvol, maar gedrukt op papier heeft dit geen enkel functie. Om er nu voor te zorgen dat deze URL, ook voor de lezers van je geprinte pagina's zichtbaar word, kun je gebruik maken van een speciale CSS opdracht. Met als geprint resultaat;'bezoek de website http://www.print.com' ipv print.
Hoe ga je dit nu aanpakken? Als eerste verwijder je de link opmaak door de volgende regel in je print stylesheet te zetten!
a:link, a:visited { text-decoration: none; color: black ; }
Nu de opmaak van deze inline link gelijk is aan die van de overige tekst op de pagina, voeg je de volgende attribuut selector toe!
a[href^=”http://”]:after {content: “bezoek de website: “ attr(href);}
Wat deze regel doet is; 'zet voor iedere absolute link (http://) op deze pagina de content 'bezoek de website' met daarachter de inhoud van de attribuut href. Je kunt de link verder opmaken zoals je wilt! Schrijf van a tot after alles aan elkaar, anders werkt het niet!
Zoals zo vaak geldt dit niet voor IE 6 en lager, maar ja, wie wil er überhaupt IE!
