DEV Community

Cover image for New CSS media queries syntax šŸ’„

New CSS media queries syntax šŸ’„

Nikola PeriÅ”ić on June 18, 2024

Say goodbye to Min-Width & Max-WidthšŸ‘‹šŸ» The new CSS media query syntax revolutionizes how we define responsive breakpoints. It make...
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
 
divyesh_kakrecha_221ac450 profile image
Divyesh Kakrecha

Thanks for this update.

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

No problem amigo! Follow me to stay updated :)

Collapse
 
stkarlkode profile image
StKarl-kode

Interesting. Thanks mate

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

You're welcome :)

Collapse
 
dfr3sh1 profile image
DFr3sh

Thanks for this tip !

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

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

Collapse
 
ademagic profile image
Miko

Hah, fantastic :) Strange to think it wasn't always written in this way!

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

Haha, exactly!

Collapse
 
dackd profile image
duck

this syntax is more readable and intuitive

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

Agree with you :) Follow me to stay updated

Collapse
 
machineno15 profile image
Tanvir Shaikh

finally they are here.

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

Yeah! :)

Collapse
 
mdrejon profile image
Sydur Rahman

Wow That's awesome .

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

Yeah! Thank you for your support :)

Collapse
 
adhishthanashok profile image
Adhishthan Ashok

Thanks! For the update.

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

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

Collapse
 
damienschneider profile image
Damien Schneider

So much clearer, no one can be against this change. Love this.

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

Totaly agree :)

Collapse
 
fadekocodeit profile image
Future_Developer

Thanks for sharing šŸ‘

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

You're welcome :)

Collapse
 
temaroon profile image
Aditya

This made it much clear for beginners.

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

Yeah. It is much more clean now

Collapse
 
syedmuhammadaliraza profile image
Syed Muhammad Ali Raza

nice

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

Thank you :)

Collapse
 
e-tech profile image
Onyedikachi Emmanuel Nnadi

nice

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

Thank you for your support :)

Collapse
 
webdevop-mudasir profile image
Mudasir Abbas Phulpoto

Well bro, to share latest syntax of css

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

Thank you for your support. Follow me to stay updated :)

Collapse
 
anas_alhomsi_bf7397a007e6 profile image
Anas ALhomsi

It is so good and beautiful

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

Thanks for supporting :) Follow me for more :)

Collapse
 
sagar_jadhav_193c74b6a410 profile image
Sagar jadhav

Good one

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

Absolutely!

Collapse
 
hien_posley_0e4f0e2bd5af9 profile image
Hien Posley

It's amazing

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

Yeah!

Collapse
 
dnaite profile image
Setiya Budi

I love this one, definitely simpler instead of thinking about min and max. Thank's for the update!

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

You're welcome :)

Collapse
 
tablepad profile image
Tablepad

Cool, thanks!

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

You're welcome!

Collapse
 
korie_chisom_432709203df4 profile image
Korie Chisom

Very wonderful and less time consuming, thanks šŸ˜ŠšŸ’•

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

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

Collapse
 
adamj_web_dev profile image
Adam Johnson

Oh yes I love this.

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

Me too :) Follow me to stay updated

Collapse
 
dev_unbelievable profile image
Dev unbelievable

thanks

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

You're welcome :)

Collapse
 
anujsamdariya07 profile image
Anuj Samdariya

Thanks for sharing !

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

You're welcome :) Follow me to stay updated

Collapse
 
teewheelz profile image
Teewheelz

Thats soo helpful

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

No problem :) Follow me to stay updated :)

Collapse
 
mayor profile image
Mayowa

This is so much easier to understand!

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

Agree! Thank you for your support :) Follow me for more :)

Collapse
 
lexyvng profile image
Alexia

Very useful. Thank you!

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

Follow me to stay updated :)

Collapse
 
talison-cardoso profile image
TƔlison Cardoso

JĆ” usei dessa forma em uma aplicaĆ§Ć£o que fiz no final do ano passado, mas nĆ£o teve (pelo menos na Ć©poca) uma boa compatibilidade com o Safari no mobile.

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić

Image description

Collapse
 
kartofelek007 profile image
kartofelek007

I don't know how it is with these safari updates, but after applying the new @media I immediately got a return from a customer with a new iphone that in his case does not work. After changing to the old one everything was laughing.

Thread Thread
 
talison-cardoso profile image
TƔlison Cardoso

exactly, even though caniuse.com shows that as of safari 16.4 it already works, the failure still happens.

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić
Collapse
 
sandip2196 profile image
Sandip Bhambre (Sandy)

What about compatibility with Browsers? šŸ¤”

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić
Collapse
 
arfinhasib profile image
ArfinHasib

Thanks. This looks promising. I'll definitely try it out.

Collapse
 
abdessalam_barka profile image
Abdessalam Barka

Thank you for the update

Collapse
 
marton_gombos_67d94a238db profile image
Marton Gombos

Thatā€™s nothing revolutionary ā€“ to be honest it might be more readable, but not by much

Collapse
 
perisicnikola37 profile image
Nikola PeriÅ”ić • Edited

Thank you for your comment :)

While the new CSS media query syntax may not appear revolutionary at first glance, it actually brings several key advantages that can significantly enhance how we develop responsive web pages.

  1. Code clarity(as you said): The new syntax is simple and intuitive
  2. Easier syntax for beginners: The simplified syntax reduces confusion, making it easier for newcomers to grasp how media queries work. Instead of juggling min-width and max-width, they can now use straightforward conditions that directly apply to elements
  3. Development efficiency: Reduced complexity leads to faster CSS writing

The real revolution lies in simplifying the process of defining breakpoints and conditions for responsive design.

I appreciate your thoughts and encourage further exploration of how these changes impact our workflows positively.