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 changes how we define responsive breakpoints. It makes our c...

Displaying a subset of the total comments. Please sign in to view all comments on this post.

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
Ā 
darshanagravat profile image
Darshan Agravat •

🄹🄹🄹
I am so happy.

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

dattebayo

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
Ā 
fadekocodeit profile image
Oluwagbenga Fadeko James •

Thanks for sharing šŸ‘

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

You're welcome :)

Collapse
Ā 
syedmuhammadaliraza profile image
Syed Muhammad Ali Raza •

nice

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Thank you :)

Collapse
Ā 
machineno15 profile image
Tanvir Shaikh •

finally they are here.

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Yeah! :)

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
Ā 
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
Ā 
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
Ā 
mdrejon profile image
Sydur Rahman •

Wow That's awesome .

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Yeah! Thank you for your support :)

Collapse
Ā 
duck18 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
Ā 
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
Ā 
dfr3sh1 profile image
DFr3sh •

Thanks for this tip !

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

You're welcome! 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
Ā 
arfinhasib profile image
ArfinHasib •

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

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
Ā 
tevin_enadeghe_906b3c9eb3 profile image
Tevin Enadeghe •

This is really cool

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Thank you for your support :)

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
Ā 
kaitabassum profile image
Kainat •

Thanks for the update

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

You're welcome :)

Collapse
Ā 
tbeaumont79 profile image
Thibault Beaumont •

Thank for the share !

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

You're welcome!

Collapse
Ā 
kevinbism profile image
Kevin Ramirez •

Finally a simple syntax. Thanks!

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

You're welcome :)

Collapse
Ā 
mohamed_aldabaan_261fbd47 profile image
Mohamed AlDabaan •

cool

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Glad you like it :) Follow me to stay updated

Collapse
Ā 
wilmela profile image
Wilmela •

Good info

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Glad you like it :)

Collapse
Ā 
jacob_boluwatife_1bbf7d40 profile image
Jacob Boluwatife •

This is nice and it will make written codes faster

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Agree. Thank you for your support

Collapse
Ā 
jacob_boluwatife_1bbf7d40 profile image
Jacob Boluwatife •

No prob šŸ™‚

Collapse
Ā 
aqilaziz profile image
Aqil Aziz •

Amazing

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Thanks

Collapse
Ā 
rujorgensen profile image
rujorgensen •

Love it, I never understood the old syntax

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Same

Collapse
Ā 
tranbaohuu profile image
Tran Bao Huu • • Edited

Thanks for your information.

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

You're welcome

Collapse
Ā 
thiruxd profile image
ThiruXD ā™”ļøŽ •

Nice!

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Thank you

Collapse
Ā 
rabbiislamrony profile image
rabbi islam •

thank you

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Thank you for your support!

Collapse
Ā 
safwatman profile image
Safwat Ahmed •

Amazing!! I tried it immediately and it is super easy to understand!! I'm very happy now because I'm always get confused in this media queries šŸ˜‚šŸ˜‚šŸ˜‚
Thanks! I really appreciate it ā¤ā¤ā¤

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Thank you for your support :)

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
Ā 
melchizedek404 profile image
Melchizedek Amos •

Thank you for this

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Thank you for your support :)

Collapse
Ā 
abdul_moeed_ec5854013f356 profile image
Abdul Moeed •

Good

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

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
Ā 
pablo_campina_ab695017b4a profile image
Pablo Campina •

Wow really cool

Collapse
Ā 
dev_unbelievable profile image
Dev unbelievable •

thanks

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

You're welcome :)

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
Ā 
teewheelz profile image
Teewheelz •

Thats soo helpful

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

No problem :) Follow me to stay updated :)

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
Ā 
mohamed_messaoudene profile image
MOHAMED MESSAOUDENE •

Thanks šŸ‘ but I think it is much easier with tailwind css

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

You're welcome!

Collapse
Ā 
gitmbints profile image
Mbints •

When I saw the simpler syntax '>=' , I initially thought I preferred the old syntax, but it seems like this one is easier to read.

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Yep agree

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
Ā 
hien_posley_0e4f0e2bd5af9 profile image
Hien Posley •

It's amazing

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Yeah!

Collapse
Ā 
abdessalam_barka profile image
Abdessalam Barka •

Thank you for the update

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

You're welcome :)

Collapse
Ā 
sattar007 profile image
Mohamed Abdel Sattar •

Thanks for the update. it's fascinating.

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

You're welcome :)

Collapse
Ā 
aurnab profile image
Zubayer Aurnab •

thats great !

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Yeah :) Thank you for your support!

Collapse
Ā 
tablepad profile image
Tablepad •

Cool, thanks!

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

You're welcome!

Collapse
Ā 
nyein_swe_ced0776ab0990d8 profile image
Nyein Swe •

Thanks , like it šŸŽØ

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

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

Collapse
Ā 
emmy3131 profile image
Emmy3131 •

Wow I love this very unique

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Thank you for your support :)

Collapse
Ā 
qeshela profile image
Nikoloz Keshelashvili •

is it supported in all browsers?

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

you can check it here: caniuse.com/?search=media%20queries

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

I talked about that in the article and provided link..
caniuse.com/?search=media%20queries

Collapse
Ā 
syedmaazsaeed profile image
Syed Maaz Saeed •

Great .

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Thanks :)

Collapse
Ā 
alpha_alpha_c1aaed1d10758 profile image
Alpha Alpha •

Good !!!!

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Thank you for your support

Collapse
Ā 
vitalves profile image
vitalves •

Very nice!

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Thank you for reading my blog post!

Collapse
Ā 
aqib_shoaib_460d14658d79a profile image
Aqib Shoaib •

will try for sure....

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Thanks for reading my blog post :)

Collapse
Ā 
johnravee profile image
John Rave Mimay •

Thank you for the info.

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

You're welcome! Follow me to stay updated :)

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

giga chad

Collapse
Ā 
kevinkev profile image
Kevin kev •

Wow amazing

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Thank you for your support :)

Collapse
Ā 
sorena_salehi profile image
Sorena salehi •

I'm feel free now šŸ˜‚šŸ˜‚ā¤ļø

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

hahah, same!

Collapse
Ā 
kamlesh_suthar_53 profile image
Kamlesh Suthar •

This syntax is look like a simple to implement by replaces of Max and min width.

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Yeah, agree

Collapse
Ā 
awaismadni97 profile image
Awais Naveed •

Thanks for this valuable tip :)

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Glad you liked it :)

Collapse
Ā 
joshuajohn11 profile image
Joshua 11 •

I love it, and it's beginner friendly

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Glad you liked it :)

Collapse
Ā 
ozoani_valentine_fc8a75c6 profile image
Ozoani Valentine •

Thanks for the help, I really enjoyed it

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Glad you liked it :)

Collapse
Ā 
vandinelsonrocha profile image
Vandinelson Rocha •

Eu sempre pensei porque não se usava a sintaxe assim, feliz por saber que agora jÔ é possível usar...😊

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Obrigado pelo seu apoio!

Collapse
Ā 
prathamesh_sawant_f5751ab profile image
Prathamesh Sawant •

More readability less code, finally a better abstraction

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Yeah, finally!

Collapse
Ā 
adrian_gharineh profile image
Adrian Gharineh •

I'm just starting out in my development journey but this seems much more intuitive to me than max-width and min-width. Thank you for sharing!

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

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

Collapse
Ā 
shajim profile image
SHAJIM •

It's look like same . I think that's way not too much useful.

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Well, 2k people don't agree with you

Collapse
Ā 
grigoriy_ko_966f81216f54c profile image
Grigoriy Ko •

Good news, thanks!

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

You're welcome :)

Collapse
Ā 
jarzdev profile image
Javier •

also you can use minmax to vary with @media, thank you for this !

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

You're welcome :)

Collapse
Ā 
lexyvng profile image
Alexia •

Very useful. Thank you!

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Follow me to stay updated :)

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
Ā 
sagarj521 profile image
Sagar jadhav •

Good one

Collapse
Ā 
perisicnikola37 profile image
Nikola PeriŔi㠕

Absolutely!

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