[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f-xD580uG6qKwrUuFiWU6qLlo6D7oyclX98L0NjIwrvg":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","The New CSS Media Query Range Syntax","We rely on CSS Media Queries for selecting and styling elements based on a targeted condition. That condition can be all kinds of things but typically fall […]","We rely on [CSS Media Queries](https:\u002F\u002Fcss-tricks.com\u002Fa-complete-guide-to-css-media-queries\u002F) for selecting and styling elements based on a targeted condition. That condition can be all kinds of things but typically fall into two camps: (1) the type of media that’s being used, and (2) a specific feature of the browser, device, or even the user’s environment.\n\nSo, say we want to apply certain CSS styling to a printed document:\n\n```\n\n    @media print { \n        .element { \n             \u002F* Style away! *\u002F \n        } \n    }\n    \n```\n\nThe fact that we can apply styles at a certain viewport width has made CSS Media Queries a core ingredient of responsive web design since Ethan Marcotte [coined the term](https:\u002F\u002Falistapart.com\u002Farticle\u002Fresponsive-web-design\u002F). If the browser’s viewport width is a certain size, then apply a set of style rules, which allows us to design elements that respond to the size of the 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\nNotice the `and` in there? That’s an operator that allows us to combine statements. In that example, we combined a condition that the media type is a `screen` and that it’s `min-width` feature is set to `30em` (or above). We can do the same thing to target a range of viewport sizes:\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\nNow those styles apply to an explicit range of viewport widths rather than a single width!\n\nBut the Media Queries Level 4 specification has introduced a new syntax for targeting a range of viewport widths using common mathematical comparison operators — things like `\u003C`, `>`, and `=` — that make more sense syntactically while writing less code.\n\nLet’s dig into how that works.\n\n#### New comparison operators\n\nThat last example is a good illustration of how we’ve sort of “faked” ranges by combining conditions using the `and` operator. The big change in the Media Queries Level 4 specification is that we have new operators that compare values rather than combining them:\n\n-   `\u003C` evaluates if a value is **less than** another value\n-   `>` evaluates if a value is **greater than** another value\n-   `=` evaluates if a value is **equal** to another value\n-   `\u003C=` evaluates if a value is **less than or equal t**o another value\n-   `>=` evaluates if a value is **greater than or equal t**o another value\n\nHere’s how we might’ve written a media query that applies styles if the browser is `600px` wide or greater:\n\n```\n\n    @media (min-width: 600px) {\n        .element {\n            \u002F* Style away! *\u002F\n        } \n    }\n    \n```\n\nHere’s how it looks to write the same thing using a comparison operator:\n\n```\n\n    @media (width >= 600px) {\n        .element {\n            \u002F* Style away! *\u002F\n        } \n    }\n    \n```\n\n#### Targeting a range of viewport widths\n\nOften when we write CSS Media Queries, we’re creating what’s called a breakpoint — a condition where the design “breaks” and a set of styles are applied to fix it. A design can have a bunch of breakpoints! And they’re usually based on the viewport being between two widths: where the breakpoint starts and where the breakpoint ends.\n\nHere’s how we’ve done that using the `and` operator to combine the two breakpoint values:\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\nYou start to get a good sense of how much shorter and easier it is to write a media query when we ditch the Boolean `and` operator in favor of the new range comparison syntax:\n\n```\n\n    @media (400px \u003C= width \u003C= 1000px) {\n        \u002F* etc. *\u002F\n    }\n    \n```\n\nMuch easier, right? And it’s clear exactly what this media query is doing.\n\n#### Browser support\n\nThis improved media query syntax is still in its early days at the time of this writing and not as widely supported at the moment as the approach that combines `min-width` and `max-width`. We’re getting close, though! Safari is the only major holdout at this point, but [there is an open ticket for it](https:\u002F\u002Fbugs.webkit.org\u002Fshow_bug.cgi?id=180234) that you can follow.\n\n![](https:\u002F\u002Floggix.com\u002Fwp-content\u002Fuploads\u002F2024\u002F09\u002FScreenshot_2-1.png)","\u003Cp>We rely on \u003Ca href=\"https:\u002F\u002Fcss-tricks.com\u002Fa-complete-guide-to-css-media-queries\u002F\">CSS Media Queries\u003C\u002Fa> for selecting and styling elements based on a targeted condition. That condition can be all kinds of things but typically fall into two camps: (1) the type of media that’s being used, and (2) a specific feature of the browser, device, or even the user’s environment.\u003C\u002Fp>\n\u003Cp>So, say we want to apply certain CSS styling to a printed 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>The fact that we can apply styles at a certain viewport width has made CSS Media Queries a core ingredient of responsive web design since Ethan Marcotte \u003Ca href=\"https:\u002F\u002Falistapart.com\u002Farticle\u002Fresponsive-web-design\u002F\">coined the term\u003C\u002Fa>. If the browser’s viewport width is a certain size, then apply a set of style rules, which allows us to design elements that respond to the size of the 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>Notice the \u003Ccode>and\u003C\u002Fcode> in there? That’s an operator that allows us to combine statements. In that example, we combined a condition that the media type is a \u003Ccode>screen\u003C\u002Fcode> and that it’s \u003Ccode>min-width\u003C\u002Fcode> feature is set to \u003Ccode>30em\u003C\u002Fcode> (or above). We can do the same thing to target a range of viewport sizes:\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>Now those styles apply to an explicit range of viewport widths rather than a single width!\u003C\u002Fp>\n\u003Cp>But the Media Queries Level 4 specification has introduced a new syntax for targeting a range of viewport widths using common mathematical comparison operators — things like \u003Ccode><\u003C\u002Fcode>, \u003Ccode>>\u003C\u002Fcode>, and \u003Ccode>=\u003C\u002Fcode> — that make more sense syntactically while writing less code.\u003C\u002Fp>\n\u003Cp>Let’s dig into how that works.\u003C\u002Fp>\n\u003Ch4>New comparison operators\u003C\u002Fh4>\n\u003Cp>That last example is a good illustration of how we’ve sort of “faked” ranges by combining conditions using the \u003Ccode>and\u003C\u002Fcode> operator. The big change in the Media Queries Level 4 specification is that we have new operators that compare values rather than combining them:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode><\u003C\u002Fcode> evaluates if a value is \u003Cstrong>less than\u003C\u002Fstrong> another value\u003C\u002Fli>\n\u003Cli>\u003Ccode>>\u003C\u002Fcode> evaluates if a value is \u003Cstrong>greater than\u003C\u002Fstrong> another value\u003C\u002Fli>\n\u003Cli>\u003Ccode>=\u003C\u002Fcode> evaluates if a value is \u003Cstrong>equal\u003C\u002Fstrong> to another value\u003C\u002Fli>\n\u003Cli>\u003Ccode><=\u003C\u002Fcode> evaluates if a value is \u003Cstrong>less than or equal t\u003C\u002Fstrong>o another value\u003C\u002Fli>\n\u003Cli>\u003Ccode>>=\u003C\u002Fcode> evaluates if a value is \u003Cstrong>greater than or equal t\u003C\u002Fstrong>o another value\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Here’s how we might’ve written a media query that applies styles if the browser is \u003Ccode>600px\u003C\u002Fcode> wide or greater:\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>Here’s how it looks to write the same thing using a comparison operator:\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>Targeting a range of viewport widths\u003C\u002Fh4>\n\u003Cp>Often when we write CSS Media Queries, we’re creating what’s called a breakpoint — a condition where the design “breaks” and a set of styles are applied to fix it. A design can have a bunch of breakpoints! And they’re usually based on the viewport being between two widths: where the breakpoint starts and where the breakpoint ends.\u003C\u002Fp>\n\u003Cp>Here’s how we’ve done that using the \u003Ccode>and\u003C\u002Fcode> operator to combine the two breakpoint values:\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>You start to get a good sense of how much shorter and easier it is to write a media query when we ditch the Boolean \u003Ccode>and\u003C\u002Fcode> operator in favor of the new range comparison syntax:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\n    @media (400px <= width <= 1000px) {\n        \u002F* etc. *\u002F\n    }\n    \n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Much easier, right? And it’s clear exactly what this media query is doing.\u003C\u002Fp>\n\u003Ch4>Browser support\u003C\u002Fh4>\n\u003Cp>This improved media query syntax is still in its early days at the time of this writing and not as widely supported at the moment as the approach that combines \u003Ccode>min-width\u003C\u002Fcode> and \u003Ccode>max-width\u003C\u002Fcode>. We’re getting close, though! Safari is the only major holdout at this point, but \u003Ca href=\"https:\u002F\u002Fbugs.webkit.org\u002Fshow_bug.cgi?id=180234\">there is an open ticket for it\u003C\u002Fa> that you can follow.\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,""]