We cannot talk about web development without talking about Responsive Design. The latter is now a must and everyone will use Media Queries to build...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
Great thank you :-)
that's clever, but I did not fully understand your point. Do you think we'd better stop using media queries?
With your techniques, the goal is to reduce the size of the CSS and kill some redundancy?
We cannot really stop using media queries but you can reduce them a lot especially when it comes to sizing. A lot of developers write many media queries to only update the number of columns or to switch from an horizontal to a vertical layout. Using my technique you can now avoid this.
The article is a kind of "think outside of the box" to show everyone that media query shouldn't be used automatically especially that now CSS has a lot of new features that can achieve complex things with few lines of code.
Well done, my first reaction was "oh come on, you can't do sites without media queries; on real projects there are just too many pieces to do that without a lot of headaches".
As an experiment and proof of concept this is really neat though, nicely done. :)
Got to say I never quite got the P to N to M to 1 column query to work properly for me when I have tried to do it, so I look forward to playing with that one to see where I went wrong when I get to a PC!
it's probably an order issue. You need to pay attention to the orders and the values. In my example it's from N to M to P (N > M > P). Same for the breakpoints.
Quite possibly that! We will see if I can finally get my head around it for anything more complex than 3 breakpoints and I will bear that in mind!
Very nice explanations, thank you!
Did you do any performance comparisons vs
@media? ...and esp. the approach of using@mediato set just controlling css-variables.I'm wondering why you would prefer css-calculations over
@media?No, I made no performance comparison but I don't think there is any issue with performance.
I'm wondering why you would prefer css-calculations over @media? --> simply because it allows me to have a very simple code. As you can see, I replaced 4 media queries with only one CSS declaration. This is a basic example. Imagine the case where you have a real project and how many line of code you can reduce using such trick.
In addition to that, we can easily adjust the breakpoints using CSS variables and have different breakpoints per element (you don't have such flexibility with media query).
Finally, You can see this as a different way of thinking. You will rarely find such article around the net so by showing you such trick I may lead you to think about simiar tricks using clamp()/max(), etc
Great article, this one goes straight into my bookmarks for safekeeping. Thanks!
you should create a udemy course. thanks for the article!
Awesome
Impressively well-written article! Some of these formulas are genius.
Thanks :) stay tuned for more article like this in the near future ;)
Pretty nice
I will love to learn this, but I don't really understand.
what you don't understand?
Amazing stuff @afif ! Super useful too! Thanks for sharing your knowledge. I'll be keeping this bookmarked for reference.
@afif excuse me, sir. "100%/(N + 1) + 0.1%" (this line i dont really understand why we N plus 1 and plus 0.1%)