Nieuwe CSS Media Queries waar we binnenkort gebruik van kunnen maken

Media Queries in CSS gebruiken de meeste Front-End developers voornamelijk om websites responsive te maken. Het was de eerste Media Query die goed ondersteund werd, en tevens eigenlijk ook de handigste.

Door middel van een klein stukje CSS kun je bepaalde elementen aanpassen aan de hand van de breedte (of hoogte) van een scherm. Dit doe je bijvoorbeeld als volgt:

@media (min-width: 500px) {
  body {
    padding: 2em;
  }
}

Naast de min-width en max-width waardes zag je af en toe nog de orientation (portrait of landscape) voorbij komen, maar heel veel meer werden de media queries eigenlijk niet gebruikt.

Tegenwoordig zijn er al een aantal andere handige media queries te gebruiken, bijvoorbeeld om een dark modus toe te voegen, of om te controleren of het apparaat hovers of pointers (zoals een muis) ondersteund.

Maar deze media types worden met Media Queries Level 5 uitgebreid met een aantal hele toffe nieuwe mogelijkheden! Ik neem hier de meest interessante met je door. Let op dat deze op het moment van schrijven nog niet ondersteund worden, dus nog niet bruikbaar zijn. Het is enkel een kijkje in de toekomst, wat handige features die zeer waarschijnlijk toegevoegd gaat worden in de verschillende browsers.

scripting

De media feature scripting kan gebruikt worden om te testen of de browser JavaScript ondersteund.

Tegenwoordig wordt er vaak al een script ingeladen die automatisch een class toevoegt aan je <body> tags. Vervolgens kun je met CSS bepaalde elementen verbergen als er geen Javascript geladen wordt. Het is een beetje hacky, dus in de toekomst kan dit met een native media query. Dit werkt dan als volgt:

@media (scripting: none) {
  .no-script {
     display: block;
  }
}

prefers-reduced-motion

Veel websites tegenwoordig zijn ontzettend flashy en animerend. Het kan leuk zijn, maar gebruikers kunnen het ook als irritant ervaren. Wanneer een gebruiker heeft ingesteld op zijn/haar apparaat dat er minder bewegingen getoond kunnen worden, kun je dit met behulp van deze handige media query uitschakelen of verminderen. De ondersteuning hiervoor is al vrij goed, dus het kan geen kwaad om dit al toe te voegen aan je CSS!

Dit kan bijvoorbeeld als volgt:

@media (prefers-reduced-motion: reduce) {
  * { 
     animation: none; 
  }
}

light-level

Wellicht één van de handigste nieuwe queries: Het controleren van de helderheid van een scherm. Hiermee kun je je CSS aanpassen aan de helderheid van het scherm van je gebruiker. Deze CSS query ondersteund drie verschillende waardes, namelijk dim, normal (standaard) en washed.

Je kunt er in dit geval bijvoorbeeld voor kiezen om het contrast iets te verhogen als de helderheid erg hoog staat, waardoor alles iets beter te lezen is. Het werkt als volgt:

@media (light-level: washed) {
  body { 
     background: #FFF;
     color: #000; 
  }
}

prefers-reduced-data

Tenslotte mijn absolute favoriet. prefers-reduced-data zal controleren of je bezoeker wellicht wat minder data in wilt laden! Handig als je onderweg bent en geen onbeperkt internet hebt, bijvoorbeeld in het buitenland.

Door deze CSS query kun je wellicht instellen dat die ontzettend grote video header niet getoond hoeft te worden, of dat er kleinere afbeeldingen ingeladen worden. De opties hier zijn eindeloos, maar kunnen een hoop verschil maken voor je gebruikers. Je gebruikt deze als volgt:

@media (prefers-reduced-data) {
  .hero .image { 
     background-image: none;
     background-color: #64f38c;
  }
}

Vond je dit interessant, en wil je meer weten? Neem dan gerust contact met mij op!

✉️ Neem contact op