DEV Community

Cover image for New CSS media queries syntax 💥
Nikola Perišić
Nikola Perišić

Posted on • Edited on

596 11 17 18 19

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! 👍

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

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 :)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay