De nieuwe CSS Media Query Range-syntax

We vertrouwen op CSS Media Queries om elementen te selecteren en op te maken op basis van een bepaalde conditie. Die conditie kan van alles zijn, maar valt doorgaans in twee categorieën: (1) het type medium dat wordt gebruikt, en (2) een specifieke eigenschap van de browser, het apparaat of zelfs de omgeving van de gebruiker.

Stel dat we bepaalde CSS-stijlen willen toepassen op een afgedrukt document:

    @media print { 
        .element { 
             /* Style away! */ 
        } 
    }
    

Het feit dat we stijlen kunnen toepassen bij een bepaalde viewportbreedte heeft CSS Media Queries tot een kerningredient van responsief webdesign gemaakt sinds Ethan Marcotte de term introduceerde. Als de viewportbreedte van de browser een bepaalde grootte heeft, wordt een set stijlregels toegepast, waardoor we elementen kunnen ontwerpen die reageren op de grootte van de browser.

    /* When the viewport width is at least 30em... */ 
    @media screen and (min-width: 30em) { 
        .element { 
            /* Style away! */
        } 
    }
    

Zie je de and daar staan? Dat is een operator waarmee we statements kunnen combineren. In dat voorbeeld combineerden we een conditie dat het mediatype een screen is en dat de min-width-eigenschap is ingesteld op 30em (of meer). We kunnen hetzelfde doen om een bereik van viewportbreedtes te targeten:

    /* When the viewport width is between 30em - 80em */
    @media screen and (min-width: 30em) and (max-width: 80em) {
        .element {
            /* Style away! */
        } 
    }
    

Nu worden die stijlen toegepast op een expliciet bereik van viewportbreedtes in plaats van op één enkele breedte!

Maar de Media Queries Level 4-specificatie heeft een nieuwe syntax geïntroduceerd voor het targeten van een bereik van viewportbreedtes met behulp van gangbare wiskundige vergelijkingsoperatoren — zoals <, > en = — die syntactisch logischer zijn en waarmee je minder code hoeft te schrijven.

Laten we eens bekijken hoe dat werkt.

Nieuwe vergelijkingsoperatoren

Dat laatste voorbeeld illustreert goed hoe we bereiken min of meer hebben "nagebootst" door condities te combineren met de and-operator. De grote verandering in de Media Queries Level 4-specificatie is dat we nieuwe operators hebben die waarden vergelijken in plaats van combineren:

• < evalueert of een waarde kleiner is dan een andere waarde
• > evalueert of een waarde groter is dan een andere waarde
• = evalueert of een waarde gelijk is aan een andere waarde
• <= evalueert of een waarde kleiner dan of gelijk is aan een andere waarde
• >= evalueert of een waarde groter dan of gelijk is aan een andere waarde

Zo schreven we vroeger een media query die stijlen toepast als de browser 600px breed of breder is:

    @media (min-width: 600px) {
        .element {
            /* Style away! */
        } 
    }
    

Zo ziet het er uit om hetzelfde te schrijven met een vergelijkingsoperator:

    @media (width >= 600px) {
        .element {
            /* Style away! */
        } 
    }
    

Een bereik van viewportbreedtes targeten

Wanneer we CSS Media Queries schrijven, maken we doorgaans wat een breakpoint wordt genoemd — een conditie waarbij het ontwerp "breekt" en een set stijlen wordt toegepast om dit te herstellen. Een ontwerp kan meerdere breakpoints hebben! En ze zijn doorgaans gebaseerd op de viewport die zich tussen twee breedtes bevindt: waar het breakpoint begint en waar het eindigt.

Zo deden we dat met de and-operator om de twee breakpointwaarden te combineren:

    /* When the browser is between 400px - 1000px */
    @media (min-width: 400px) and (max-width: 1000px) {
        /* etc. */
    }
    

Je krijgt al snel een goed beeld van hoeveel korter en eenvoudiger het is om een media query te schrijven wanneer we de Booleaanse and-operator inruilen voor de nieuwe range-vergelijkingssyntax:

    @media (400px <= width <= 1000px) {
        /* etc. */
    }
    

Veel eenvoudiger, toch? En het is precies duidelijk wat deze media query doet.

Browserondersteuning

Deze verbeterde media query-syntax staat op het moment van schrijven nog in de kinderschoenen en wordt momenteel niet zo breed ondersteund als de aanpak die min-width en max-width combineert. We komen er echter dichtbij! Safari is op dit moment de enige grote achterblijver, maar er is een open ticket voor dat je kunt volgen.