DEV Community

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

Posted on ā€¢ Edited on

598 12 18 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 (169)

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
 
sharada_marasinha_75ee54d profile image
Sharada Marasinha ā€¢ ā€¢ Edited

Thank you bro..

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

You're welcome! Thank you for your support :)

Collapse
 
fmagrosoto profile image
Fernando Magrosoto ā€¢

Thank you for your input

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

Thank you for your support

Collapse
 
tbeaumont79 profile image
Thibault Beaumont ā€¢

Thank for the share !

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

You're welcome!

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
 
melchizedek404 profile image
Melchizedek Amos ā€¢

Thank you for this

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

Thank you for your support :)

Visualizing Promises and Async/Await šŸ¤“

async await

ā˜ļø Check out this all-time classic DEV post on visualizing Promises and Async/Await šŸ¤“