Media types

Info 
Door: Zorzie Moeilijkheidsgraad: 2/3
Views:13.023Reacties: 10(Bekijken)
  Log in om zelf te reageren
 Waardering:9.7/10 (3 stemmen)



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

Nu de theorie. Een media type wordt gestart door een '@'. Een atje zoals we zeggen. Dan volgt 'media', en da het media type zelf. Een voorbeeld :

#Code
1
2
3
4
5
@media all
body
{
background-color : #FFFFFF ;
}

Met dit stukje code heb je de achtergrondkleur voor alle mediatypes wit gezet. Niets nieuws dus, buiten de '@media all'

Nu, er bestaan meer media types die het leven gemakkelijk maken : hier volgt een klein lijstje
all : voor alle media typesaural : voor geluidstoepassingenbraille : voor de leesbaarheid voor braille transformatorsembossed : voor braille printershandheld : voor kleine pc's, bv palmprint : voor de printerprojection : voor projecteerdersscreen : voor pcmonitorstty : voor mediatypes die een fixed patch karakternet gebruiken : zoals teletypes en terminals.tv : wordt gebruikt voor televiesie-schermen

Even een voorbeeldje om het wat duidelijker te maken:
bv. Je wil een achetrgrond op je scherm van je pc, maar als hij door de printer gaat wil je een witte achtergrond. Bij tv en andere projectatie wil je dan weer dan het herleid wordt naar een 256-kleureneenheid.
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@media screen
body
{
background-color : #C3C7BA ;
}

@media print
body
{
background-color : #FFFFFF ;
}

@media projection
body
{
background-color : #CCCCCC ;
}

@media tv
body
{
background-color : #CCCCCC ;
}


Dit is alles wat er te weten valt over media types in css.
Geniet van je opgedane kennis en tot de volgende

Zorzie

10 reacties
hneel Geplaatst op 03-02-2007 om 18:40
 

Regular
Als je een site gemaakt hebt met headers en menubars en dergelijke door middel van div's, dan is het handig als je die voor de print versie uitschakelt zodat alleen de 'main content' zichtbaar blijft.

Als je dan een 2e stylesheet gebruikt zoals in het voorbeeld van Mirax dan kan dat simpelweg met de volgende code:

#Code
1
2
3
4
div#header
{
  display: none;
}

Jaspertje Geplaatst op 29-08-2006 om 12:24
 

Regular
Met verf en een kwast
HotMan Geplaatst op 02-03-2005 om 16:47
Avatar van HotMan

Regular
als ik nou mijn toetsenbord ook een achtergrondkleur wil geven, hoe doe ik dat?
Mirax Geplaatst op 11-11-2004 om 18:00
 

Moderator
Dat kan toch nog steeds? Dan krijg je meerdere links, namelijk een algemene, een voor screen, en een voor print (etc)
Zorzie Geplaatst op 11-11-2004 om 00:02
Avatar van Zorzie

Moderator
Mirax, op je eerste post :
Dit kan natuurlijk ook, maar als je het in 1 css file zet kan je het eerst voor alle media types (all) en dan de verschillende designs adhv media types bepalen.

Pagina 1 2 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder