Alle moderne webpagina's maken gebruik van stylesheets (CSS) om de opmaak van de pagina te bepalen. Kleuren, lettertypes, afmetingen en marges worden in de stylesheets beschreven. Met de komst van HTML5 is er ook een nieuwe versie voor stylesheets: CSS3. Een nieuw onderdeel in deze specificatie zijn de Media Queries.

Alle moderne webpagina's maken gebruik van stylesheets (CSS) om de opmaak van de pagina te bepalen. Kleuren, lettertypes, afmetingen en marges worden in de stylesheets beschreven. Met de komst van HTML5 is er ook een nieuwe versie voor stylesheets: CSS3. Een nieuw onderdeel in deze specificatie zijn de Media Queries.
Nieuwe versie van CSS
Met CSS3 worden er een hoop nieuwe dingen mogelijk (of gestandaardiseerd). Zoals afgeronde hoekjes, semi-transparantie, drop-shadows en embedded lettertypes. In deze blog wil ik het onderdeel Media Queries behandelen. Deze Queries zorgen ervoor dat we kunnen bepalen welke styles er van toepassing zijn, naar aanleiding van de eigenschappen van het medium waarop de pagina getoond wordt.
In CSS2 hadden we bijvoorbeeld al de mogelijkheid om verschil te maken tussen een stylesheet voor het scherm en een stylesheet voor een afdruk op papier.
<head>
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
</head>
Met de komst van CSS3 krijgen we niet alleen de mogelijk om te bepalen welke stylesheet op welk medium van toepassing is, maar ook informatie over dat medium. Zoals:
  • Afmetingen: de afmetingen van het scherm en van het venster waarin de pagina getoond wordt.
  • Aantal kleuren: de mogelijkheid van het scherm om een aantal verschillende kleuren weer te geven.
  • Resolutie: het aantal pixels per Inch (dpi) of per centimeter (dpcm)
  • Richting (landscape of portret).; computerschermen zijn over het algemeen ‘Landscape’ terwijl telefoons vaak in ‘Portret’ richting gebruikt worden.
  • Aspect Ratio: de verhouding van het scherm (bv. wel of niet breedbeeld)
Query
Hieronder zie je een voorbeeld van zo’n query. De elementen met de class “content” worden beinvloed door de grootte van het venster en de richting waarin het scherm gedraaid is. Mocht de browser geen CSS3 ondersteunen, dan zullen de styles met query genegeerd worden en het element dus 500 bij 400 pixels groot worden.
.content
{
width: 500px;
height: 400px;
}
@media (min-width: 800px) and (max-width: 1023px)
{
   .content
   {
       width: 775px;
       height: 500px;
   }
}
@media (min-width: 1024px)
{
   .content
   {
       width: 1000px;
       height: 600px;
   }
 }
@media (orientation:portrait)
{
   .content
   {
       display : block;
   }
}
Giorgio Sardo van Microsoft gebruikte tijdens de TechEd ook een leuk voorbeeld. Hieronder zie je een foto van zijn hand. Af hankelijk van het formaat van je browser, zul je meer of minder vingers te zien krijgen. Vergroot en verklein je scherm maar eens, dan zie je het resultaat!
Media Queries en het Video element
In mijn blog over het video element staat uitgelegd hoe je verschillende bestandsformaten kun specificeren zodat de browser het juiste bestandsformaat kiest dat afgespeeld kan worden. Het is hier ook mogelijk om met de CSS3 Media Queries te werken. In onderstaand voorbeeld zie je 4 videobestanden gespecificeerd staan, waarvan er 2 low-res die bedoeld zijn om op smart-phones af te spelen en 2 hi-res voor op de computer.
<video autoplay autobuffer="true" width="400px" height="300px">
<source src="vid-hi.mp4"
       type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
       media="(min-device-width: 800px)">
<source src="vid-lo.mp4"
       type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="vid-hi.ogg"
       type='video/ogg; codecs="theora, vorbis"
media="(min-device-width: 800px)"'>
<source src="vid-lo.ogg"
       type='video/ogg; codecs="theora, vorbis"'>
fall-back content voor browsers die geen video-element ondersteunen
</video>
Meer info
Meer info over de CSS3 Media Queries kun je terug vinden op de website van het W3C waar deze specificatie ontwikkeld wordt; http://www.w3.org/TR/css3-mediaqueries