Media Queries

Met Media Queries kan eenzelfde document verschillende stijlen bevatten voor:

verschillende media (scherm, papier…)
verschillende karakteristieken van die media

Media Queries zijn ontstaan uit het media-attribuut van HTML4 en de system-attributen van SMIL.

De verschillende media

medium	CSS-naam	zintuig	gepagineerd/continu
papier	`print`
computerscherm	`screen`
videoprojectie	`projection`
mobiel	`handheld`	/	/
spraakgeneratie	`speech`		-
…

Een medium als screen, dat van zichzelf niet gepagineerd is, kan in principe ook in pagina's worden opgedeeld. De CSS-eigenschappen daarvoor zijn in ontwikkeling. Het laatste voorstel zijn nieuwe waarden paged-x en paged-y voor de eigenschap overflow-style.

Zie verderop voor problemen met handheld.

Karakteristieken van media

Verschillende karakteristieken van media:

breedte van het venster of het scherm
width, device-width
hoogte van het venster of het scherm
height, device-height
resolutie in punten/cm
resolution
Breedte-hoogte-verhouding
aspect-ratio
enz.

Sommige karakteristieken zijn tegenwoordig niet zo erg interessant meer. Schermen met minder dan 24-bits kleuren zijn er bijvoorbeeld nauwelijks meer…

Een aparte W3C Recommendation, „The 'view-mode' Media Feature” definieert view-mode, voor de toestand van een venster op het bureaublad: gemaximaliseerd, geminimaliseerd, volledig-scherm, enz.

Dit is bedoeld voor applicaties, bijvoorbeeld om scrollbars wel of niet weer te geven, of om animaties te stoppen.

Vier methodes

Vier methodes:

In CSS:
@media ... { ... }
In HTML:
<style media="...">...</style>
Gelinkt in HTML:
<link media="..." href="...">
Gelinkt in CSS:
@import url(...) ...

Karakteristieken van media

Uit de demo:

@media all and (min-width: 60em)
{
  h2 {float: left; width: 20%}
  .menu {float: right; width: 20%}
  .main {float: right; width: 49%}
}

Meer, minder of exact

@media all and (min-width: 60em) {...}

Karakteristieken met numerieke waarden kunnen op drie manieren worden getest:

(width: 600px) – precies 600px breed
(min-width: 600px) – 600px of breder
(max-width: 600px) – 600px of smaller

Medium 'all'

Gebruik een komma om meerdere MQ's te combineren:

@media screen and (min-width: 60em),
  handheld and (min-width: 60em),
  projection and (min-width: 60em),
  print and (min-width: 60em) {...}

Om aan te geven dat het medium er niet toe doet:

@media all and (min-width: 60em) {...}

Eenheden

Alle eenheden van CSS kunnen worden gebruikt: cm, px, in, em…
De px is de CSS-pixel, dus niet noodzakelijkerwijs een fysieke pixel
Gebruik resolution voor de fysieke resolutie: (min-resolution: 200dpi)
em is de medium lettergrootte van de UA

Diashow

Uit de demo:

<STYLE TYPE="text/css"
       MEDIA=projection>
  h1 {page-break-before: always}
  h1:first-child {page-break-before: avoid}
  body {font: 40px/1.2 sans-serif}
</STYLE>

Projection is gepagineerd (net als print)

Deze presentatie is er een voorbeeld van

'print' – uitvoer naar papier (of PDF)

Uit de demo:

<STYLE TYPE="text/css" MEDIA=print>
@page {
  margin: 2cm 1cm;
  @bottom {content: "— "counter(page, lower-roman) " —"}
}
body {columns: 21em}
</STYLE>

Programma's: Prince, WebToPDF.NET, AH Formatter, PDFreactor en meer

(Zie het onderdeel over kolommen voor paginering, hoerenjongen en weeskinderen)

'handheld'

Waarschuwing 1: de meeste mobiele browsers die op Webkit zijn gebaseerd reageren niet op Media Queries tenzij deze regel voorkomt in de HTML:

<meta name=viewport
  content="width=device-width">

Waarschuwing 2: De iPhone beschouwt zichzelf als een screen-medium, niet als handheld

handheld is in de praktijk wat problematisch. We hebben tot nu toe nog niet gedefinieerd hoe je kunt weten of een apparaat gepagineerd is of niet (of hoe je eventueel ertussen kunt wisselen); en ook niet hoe je spraak en beeld synchroniseert. In de praktijk zijn er alleen implementaties zonder paginering en zonder spraak.

Een ander probleem met handheld is dat Apple vindt dat de iPhone „eigenlijk” een computerscherm heeft van 960 pixels breed, onafhankelijk van wat hij werkelijk heeft, en daarmee onder het medium screen valt i.p.v. handheld.

(Als je een pagina maakt zonder Apple's onofficiële extensie van HTML, de „meta-viewport,” zijn gebruikers dus veroordeelt tot voortdurend in- en uitzoomen. Met de huidige dominantie van browsers gebaseerd op Webkit is dat een groot probleem. De CSS werkgroep werkt aan een extensie van CSS om die ",meta-viewport” overbodig te maken.)

Media-selectie

(Media Queries)

Media Queries

De verschillende media

Karakteristieken van media

Vier methodes

Karakteristieken van media

Meer, minder of exact

Medium 'all'

Eenheden

Diashow

'print' – uitvoer naar papier (of PDF)

'handheld'

Oefening

Einde