[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fjuA71sDn1XCjax3sYohbeke22M2U0R-PGlc4q3kW9q0":3},{"item":4},{"id":5,"idKnowledge":6,"slug":7,"title":8,"description":9,"bodyMarkdown":10,"bodyHtml":11,"author":12,"date":13,"createdAt":14,"topics":15,"image":17,"hasDownload":18,"fileName":19},"73","C841AAFD-5991-1C44-AC0C-ACE33F29DB65","the-new-css-media-query-range-syntax","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.","We vertrouwen op [CSS Media Queries](https:\u002F\u002Fcss-tricks.com\u002Fa-complete-guide-to-css-media-queries\u002F) 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.\n\nStel dat we bepaalde CSS-stijlen willen toepassen op een afgedrukt document:\n\n```\n\n    @media print { \n        .element { \n             \u002F* Style away! *\u002F \n        } \n    }\n    \n```\n\nHet 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](https:\u002F\u002Falistapart.com\u002Farticle\u002Fresponsive-web-design\u002F). 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.\n\n```\n\n    \u002F* When the viewport width is at least 30em... *\u002F \n    @media screen and (min-width: 30em) { \n        .element { \n            \u002F* Style away! *\u002F\n        } \n    }\n    \n```\n\nZie 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:\n\n```\n\n    \u002F* When the viewport width is between 30em - 80em *\u002F\n    @media screen and (min-width: 30em) and (max-width: 80em) {\n        .element {\n            \u002F* Style away! *\u002F\n        } \n    }\n    \n```\n\nNu worden die stijlen toegepast op een expliciet bereik van viewportbreedtes in plaats van op één enkele breedte!\n\nMaar 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 `\u003C`, `>` en `=` — die syntactisch logischer zijn en waarmee je minder code hoeft te schrijven.\n\nLaten we eens bekijken hoe dat werkt.\n\n#### Nieuwe vergelijkingsoperatoren\n\nDat 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:\n\n-   `\u003C` evalueert of een waarde **kleiner is dan** een andere waarde\n-   `>` evalueert of een waarde **groter is dan** een andere waarde\n-   `=` evalueert of een waarde **gelijk is aan** een andere waarde\n-   `\u003C=` evalueert of een waarde **kleiner dan of gelijk is aan** een andere waarde\n-   `>=` evalueert of een waarde **groter dan of gelijk is aan** een andere waarde\n\nZo schreven we vroeger een media query die stijlen toepast als de browser `600px` breed of breder is:\n\n```\n\n    @media (min-width: 600px) {\n        .element {\n            \u002F* Style away! *\u002F\n        } \n    }\n    \n```\n\nZo ziet het er uit om hetzelfde te schrijven met een vergelijkingsoperator:\n\n```\n\n    @media (width >= 600px) {\n        .element {\n            \u002F* Style away! *\u002F\n        } \n    }\n    \n```\n\n#### Een bereik van viewportbreedtes targeten\n\nWanneer 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.\n\nZo deden we dat met de `and`-operator om de twee breakpointwaarden te combineren:\n\n```\n\n    \u002F* When the browser is between 400px - 1000px *\u002F\n    @media (min-width: 400px) and (max-width: 1000px) {\n        \u002F* etc. *\u002F\n    }\n    \n```\n\nJe 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:\n\n```\n\n    @media (400px \u003C= width \u003C= 1000px) {\n        \u002F* etc. *\u002F\n    }\n    \n```\n\nVeel eenvoudiger, toch? En het is precies duidelijk wat deze media query doet.\n\n#### Browserondersteuning\n\nDeze 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](https:\u002F\u002Fbugs.webkit.org\u002Fshow_bug.cgi?id=180234) dat je kunt volgen.\n\n![](https:\u002F\u002Floggix.com\u002Fwp-content\u002Fuploads\u002F2024\u002F09\u002FScreenshot_2-1.png)","\u003Cp>We vertrouwen op \u003Ca href=\"https:\u002F\u002Fcss-tricks.com\u002Fa-complete-guide-to-css-media-queries\u002F\">CSS Media Queries\u003C\u002Fa> 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.\u003C\u002Fp>\n\u003Cp>Stel dat we bepaalde CSS-stijlen willen toepassen op een afgedrukt document:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\n    @media print { \n        .element { \n             \u002F* Style away! *\u002F \n        } \n    }\n    \n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>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 \u003Ca href=\"https:\u002F\u002Falistapart.com\u002Farticle\u002Fresponsive-web-design\u002F\">de term introduceerde\u003C\u002Fa>. 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.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\n    \u002F* When the viewport width is at least 30em... *\u002F \n    @media screen and (min-width: 30em) { \n        .element { \n            \u002F* Style away! *\u002F\n        } \n    }\n    \n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Zie je de \u003Ccode>and\u003C\u002Fcode> daar staan? Dat is een operator waarmee we statements kunnen combineren. In dat voorbeeld combineerden we een conditie dat het mediatype een \u003Ccode>screen\u003C\u002Fcode> is en dat de \u003Ccode>min-width\u003C\u002Fcode>-eigenschap is ingesteld op \u003Ccode>30em\u003C\u002Fcode> (of meer). We kunnen hetzelfde doen om een bereik van viewportbreedtes te targeten:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\n    \u002F* When the viewport width is between 30em - 80em *\u002F\n    @media screen and (min-width: 30em) and (max-width: 80em) {\n        .element {\n            \u002F* Style away! *\u002F\n        } \n    }\n    \n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Nu worden die stijlen toegepast op een expliciet bereik van viewportbreedtes in plaats van op één enkele breedte!\u003C\u002Fp>\n\u003Cp>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 \u003Ccode><\u003C\u002Fcode>, \u003Ccode>>\u003C\u002Fcode> en \u003Ccode>=\u003C\u002Fcode> — die syntactisch logischer zijn en waarmee je minder code hoeft te schrijven.\u003C\u002Fp>\n\u003Cp>Laten we eens bekijken hoe dat werkt.\u003C\u002Fp>\n\u003Ch4>Nieuwe vergelijkingsoperatoren\u003C\u002Fh4>\n\u003Cp>Dat laatste voorbeeld illustreert goed hoe we bereiken min of meer hebben "nagebootst" door condities te combineren met de \u003Ccode>and\u003C\u002Fcode>-operator. De grote verandering in de Media Queries Level 4-specificatie is dat we nieuwe operators hebben die waarden vergelijken in plaats van combineren:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode><\u003C\u002Fcode> evalueert of een waarde \u003Cstrong>kleiner is dan\u003C\u002Fstrong> een andere waarde\u003C\u002Fli>\n\u003Cli>\u003Ccode>>\u003C\u002Fcode> evalueert of een waarde \u003Cstrong>groter is dan\u003C\u002Fstrong> een andere waarde\u003C\u002Fli>\n\u003Cli>\u003Ccode>=\u003C\u002Fcode> evalueert of een waarde \u003Cstrong>gelijk is aan\u003C\u002Fstrong> een andere waarde\u003C\u002Fli>\n\u003Cli>\u003Ccode><=\u003C\u002Fcode> evalueert of een waarde \u003Cstrong>kleiner dan of gelijk is aan\u003C\u002Fstrong> een andere waarde\u003C\u002Fli>\n\u003Cli>\u003Ccode>>=\u003C\u002Fcode> evalueert of een waarde \u003Cstrong>groter dan of gelijk is aan\u003C\u002Fstrong> een andere waarde\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Zo schreven we vroeger een media query die stijlen toepast als de browser \u003Ccode>600px\u003C\u002Fcode> breed of breder is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\n    @media (min-width: 600px) {\n        .element {\n            \u002F* Style away! *\u002F\n        } \n    }\n    \n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Zo ziet het er uit om hetzelfde te schrijven met een vergelijkingsoperator:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\n    @media (width >= 600px) {\n        .element {\n            \u002F* Style away! *\u002F\n        } \n    }\n    \n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch4>Een bereik van viewportbreedtes targeten\u003C\u002Fh4>\n\u003Cp>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.\u003C\u002Fp>\n\u003Cp>Zo deden we dat met de \u003Ccode>and\u003C\u002Fcode>-operator om de twee breakpointwaarden te combineren:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\n    \u002F* When the browser is between 400px - 1000px *\u002F\n    @media (min-width: 400px) and (max-width: 1000px) {\n        \u002F* etc. *\u002F\n    }\n    \n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Je krijgt al snel een goed beeld van hoeveel korter en eenvoudiger het is om een media query te schrijven wanneer we de Booleaanse \u003Ccode>and\u003C\u002Fcode>-operator inruilen voor de nieuwe range-vergelijkingssyntax:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\n    @media (400px <= width <= 1000px) {\n        \u002F* etc. *\u002F\n    }\n    \n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Veel eenvoudiger, toch? En het is precies duidelijk wat deze media query doet.\u003C\u002Fp>\n\u003Ch4>Browserondersteuning\u003C\u002Fh4>\n\u003Cp>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 \u003Ccode>min-width\u003C\u002Fcode> en \u003Ccode>max-width\u003C\u002Fcode> combineert. We komen er echter dichtbij! Safari is op dit moment de enige grote achterblijver, maar \u003Ca href=\"https:\u002F\u002Fbugs.webkit.org\u002Fshow_bug.cgi?id=180234\">er is een open ticket voor\u003C\u002Fa> dat je kunt volgen.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Floggix.com\u002Fwp-content\u002Fuploads\u002F2024\u002F09\u002FScreenshot_2-1.png\" alt=\"\">\u003C\u002Fp>\n","Ashish","2024-09-24",1781520665000,[16],"Vue.js","\u002Fapi\u002Fknowledge\u002Fimage\u002F73\u002F?v=2884e7bee3ab",false,""]