DEV Community

Cover image for New CSS media queries syntax šŸ’„
Nikola PeriÅ”ić
Nikola PeriÅ”ić

Posted on ā€¢ Edited on

606 12 17 19 20

New CSS media queries syntax šŸ’„

Say goodbye to Min-Width & Max-WidthšŸ‘‹šŸ»

The new CSS media query syntax changes how we define responsive breakpoints.

It makes our code cleaner and easier to understand. šŸš€

The benefits of the new syntax:

  • Clarity: The new syntax is simple and intuitive āœØ

  • Efficiency: Reduced complexity leads to faster development šŸŽļø

  • Compatibility: High support across modern browsers. You can check it out here šŸŒ


Code Examples šŸ–„ļø

Traditionally, you might write:

CSS media query

With the new, simpler syntax, it becomes:

CSS media query

Old way:

CSS media query

New way:

CSS media query

You can also test between two widths...

CSS Media query


Conclusion šŸŒŸ

Adopting the new CSS media query syntax will simplify your code.

Please, comment on your thoughts. Your thoughts are valuable for contributing to the front-end development field. All are welcome! I want to hear them šŸ’¬

Keep up the good work! šŸ‘

Top comments (168)

Collapse
 
kooiinc profile image
KooiInc ā€¢

Thanks, good to know.

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić ā€¢

I'm glad you like it. Make sure to follow me to keep up with more content like this šŸ˜€

Collapse
 
deejuh719 profile image
K Surratt ā€¢

This makes it so much easier to remember than going "wait... does max mean up to or....?" Thank you!

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić ā€¢

Yeah, absolutely. Thank you for your support!

Collapse
 
stkarlkode profile image
StKarl-kode ā€¢

Interesting. Thanks mate

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić ā€¢

You're welcome :)

Collapse
 
randy918 profile image
randy918 ā€¢

My brain doesn't think straight regarding min-width, etc. It always stops me to think it out. This new way is beautiful and instant to read.

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić ā€¢

Agree

Collapse
 
darshanagravat profile image
Darshan Agravat ā€¢

šŸ„¹šŸ„¹šŸ„¹
I am so happy.

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić ā€¢

dattebayo

Collapse
 
uthmanhub profile image
Uthman Sarafadeen ā€¢

Thanks so much, I was actually in search of a way of achieving exactly what the accent-color does after reading this post and luckily enough I found it here in a much easier way...

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić ā€¢

Thanks for support :)

Collapse
 
ermmes profile image
Emerson Campos ā€¢

Interesting! Thanks for share!

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić ā€¢

You're welcome :) Follow me to stay updated

Collapse
 
tbeaumont79 profile image
Thibault Beaumont ā€¢

Thank for the share !

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić ā€¢

You're welcome!

Collapse
 
pablo_campina_ab695017b4a profile image
Pablo Campina ā€¢

Wow really cool

Collapse
 
abdul_moeed_ec5854013f356 profile image
Abdul Moeed ā€¢

Good

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić ā€¢

Thank you for your support

This post blew up on DEV in 2020:

js visualized

šŸš€āš™ļø JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! šŸ„³

Happy coding!