Media Types
1. Voorwoord
2. De theorie
3. Lijst met media types
4. Tabs
5. Je codes terug vinden
6. Afsluiting
1. Voorwoord
In css bestaat er iets handigs, genaamd: Media types. Deze laten je toe
om verschillende css styles te maken voor verschillende media, een
handige toepassing : Voor het printen van pagina's op je site, is het
best dat je niet te veel images en/of kleuren hebt. Het kan wel, maar
het is de bezoeker alleen maar een last dat je de kleuren van zijn
printer opgebruikt, terwijl je alleen maar de tekst nodig hebt. En bij
je site wil je liefst geen klachten horen van de bezoeker.
top
2. De theorie
Nu de theorie. Een media type wordt gestart door een @.
Ook wel benoemd als een: atje. Dan volgt 'media', en da het media type zelf. Een voorbeeld:
@media all body
{
background-color
: #FFFFFF
;
}
Met dit stukje code heb je de achtergrond kleur voor alle mediatypes wit gezet. Niets nieuws dus, buiten de '@media all'.
top
3. Lijst met media types
all |
voor alle media types |
aural |
voor geluidstoepassingen |
braille |
voor de leesbaarheid voor braille transformators |
embossed |
voor braille printers |
handheld |
voor kleine pc's |
print |
voor de printer |
projection |
voor projecteerders |
screen |
voor pcmonitors |
tty |
voor mediatypes die een fixed patch karakternet gebruiken : zoals teletypes en terminals. |
tv |
wordt gebruikt voor televiesie-schermen |
top
4. Voorbeeld
Even een voorbeeldje om het wat duidelijker te maken:
Je wilt bijvoorbeeld een achtergrond op je scherm van je pc, maar als hij door de printer gaat wil je een witte achtergrond.
Bij tv en andere projectmatige wil je dan weer dan het herleid wordt naar een 256-kleureneenheid.
@media screen
body
{
background-color : #C3C7BA ;
}
@media print
body
{
background-color : #FFFFFF ;
}
@media projection
body
{
background-color : #CCCCCC ;
}
@media tv
body
{
background-color : #CCCCCC ;
}
top
6. Afsluiting
Dit is alles wat er te weten valt over media types in css.
Voor vragen kun je mij een
privé bericht
sturen of je vraag stellen op de forum.
top
|