Skip to content

Commit e0ca420

Browse files
Fix Typos
1 parent d9b2d0d commit e0ca420

File tree

1 file changed

+3
-3
lines changed
  • src/pages/2022-11/css-range-media-queries

1 file changed

+3
-3
lines changed

src/pages/2022-11/css-range-media-queries/index.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ tags: ['CSS']
99
---
1010

1111

12-
I hate media queries. I know that may sound crazy, but I just hate the syntax of them. Writing code like `min-width: 300px` has never been intuitive to me. I can never remember if this is meant for screens larger or smaller then 300px and somehow I always seem to get it wrong each time. This is why I am so excited that modern CSS is removing the need to ever define media queries like this again with the introduction of range media queries. Not only does this syntax make CSS media queries easier to read and write, but it also fixes a few edge cases with media queries.
12+
I hate media queries. I know that may sound crazy, but I just hate the syntax of them. Writing code like `min-width: 300px` has never been intuitive to me. I can never remember if this is meant for screens larger or smaller than 300px and somehow I always seem to get it wrong each time. This is why I am so excited that modern CSS is removing the need to ever define media queries like this again with the introduction of range media queries. Not only does this syntax make CSS media queries easier to read and write, but it also fixes a few edge cases with media queries.
1313

1414
## The Old Way
1515

@@ -62,12 +62,12 @@ Take for example the following code.
6262
@media (min-width: 500px) {}
6363
@media (max-width: 500px) {}
6464
```
65-
The first media query will match all devices greater then 500px, the second media query will match all devices less then 500px, but what happens at exactly 500px? Both media queries will apply at 500px which could lead to weird issues or bugs with your code. This is why the new range selectors are nice since you can rewrite this as follows.
65+
The first media query will match all devices greater than 500px, the second media query will match all devices less than 500px, but what happens at exactly 500px? Both media queries will apply at 500px which could lead to weird issues or bugs with your code. This is why the new range selectors are nice since you can rewrite this as follows.
6666
```css
6767
@media (width >= 500px) {}
6868
@media (width < 500px) {}
6969
```
70-
Now at 500px only the first media query will be used while the second will only apply to screens less then 500px.
70+
Now at 500px only the first media query will be used while the second will only apply to screens less than 500px.
7171

7272
This probably isn't a huge deal, but I guarantee if you ran into a bug that was caused by this it would be very difficult to find and a massive time sink so the fact these new range queries get around that is really nice.
7373

0 commit comments

Comments
 (0)