CSS 3.0 Media Queries

CSS 3.0 media queries wordt gerbuikt om html pagina's responsive te maken. Responsive houdt in dat de pagina reageert op de breedte van het scherm waarmee de pagina bekeken wordt. Tegenwoordig zijn er veel verschillende resoluties en ook nog verschillende apparaten en je wilt zoveel mogelijk van deze bezoekers bedienen met een goed functionerende website.

Hoe werkt het?

Je kunt door middel van media queries bepaalde css regels wel door de browser uit laten voeren of juist niet.

De latere regels CSS overschrijven de eerdere regels

Goed om te weten is dat CSS regels die later in de stylesheet staan de eerdere overschrijven. Een simpel voorbeeld:

h1
{
  color:red
}

h1
{
  color:blue;
}

In dit geval worden de h1 koppen blauw. Doordat latere regels de eerdere overschrijven is het goed om de media queries onder de standaard op te nemen of in een apparte stylesheet die later in de HTML pagina geïncludeerd wordt.

Werkt dit ook in Internet Explorer?

Helaas niet in Internet Explorer 8 en lager. Het is daarom goed om in je standaard style sheet te zorgen dat de website werkt op in ieder geval de meeste resoluties. Ik ga nog steeds uit van 1024x768 aangezien dat ongeveer de kleinste resolutie is die nog steeds aanzienelijk veel gebruikt wordt.

Nadelen

Mobiele apparaten hebben een veel kleiner scherm en doormiddel van media queries is het wel mogelijk om dingen weg te laten(display:none), maar deze elementen moeten nog wel door het apparaat geladen worden. Denk hier bijvoorbeeld aan grote plaatjes. Deze grote plaatsjes kosten het meeste tijd om te downloaden en als je ze dan niet laat zien is het zonde van de downloadtijd. Op wifi maakt dat niet heel veel uit, maar op mobiele netwerken wel. Deze hebben meestal een lagere snelheid en denk bijvoorbeeld aan een datalimiet op mobiel internet wat steeds gebruikelijker wordt. Er zijn wel technieken om daar weer handiger mee om te gaan, maar dat zal hier niet ter sprake komen.

Conclusie

Media queries zijn een relatief eenvoudige manier om je website er op alle apparaten goed uit te laten zien, je hoefd niet een extra mobiele site te ontwikkelen. Ondanks dat de techniek eenvoudig is, is het af en toe wel puzzelen en ervaring opbouwen om dit op een handige manier te gebruiken, zonder dat de CSS een zooitje wordt.