Something new, and exciting, is coming to CSS and when I say 'is coming' I mean it's not supported in any browsers yet and the spec is not finalise...
For further actions, you may consider blocking this person and/or reporting abuse
This really is the thing I am looking forward to the most in CSS.
Put it like this, I have already written a mini poly fill that I am using for a new site I am building.
I think the big problem is going to be older browsers as from what I have seen the “fall back” is hard to do gracefully, so you either have to go mobile first and put up with a crap design on desktops or design everything with careful flex designs that are kind of responsive in the first place and enhance it with container queries.
Be interesting to see what pattern people settle on when this gets released as until we can physically play with it it is hard to know what gotchyas actually exist!
In theory IE will be the only hold out and if that's the case we can almost ignore the issues. 😅
That is why it will be interesting to see what happens as as long as it displays reasonably well and is usable on IE I am happy.
Unlike most devs I still support IE9 due to accessibility as that is the realm I work in. However whenever I say that people confuse support with pixel perfection so as long as the pattern fallback allows it to be usable and accessible I am happy enough.
Where I work we "support" IE11 but it's the same as you if it doesn't break and still makes sense to the end user that's good enough.
I also have a rule that I can spam polyfills for IE with conditionals, at that stage it normally isn’t as much of a headache as it used to be.
IE and it's wahala. My last resort.
Thanks for this great article and also one of my favorite scenes from The Matrix :-)
Sometimes I am working with CSS Grids and I would like to draw a box around them, mostly for testing purposes. Using a code sample from the LayoutIt Grid, I can draw a red box around the grid container, like this:
Unfortunately, that method draws a box around the grid and any items contained within (like an image or an href for example). Could I use a CSS Container query to draw a box only around a grid? Or maybe only around grids contained within a certain grid? I'm not necessarily looking for you to provide the code (although that would be welcome), but more to understand if that is an approach I can use.
Thanks again!
Unfortunately it can't really help with that but dev tools (in both chrome and firefox) have great grid inspection support.
developer.chrome.com/docs/devtools...
developer.mozilla.org/en-US/docs/T...
That is too bad. I have used the grid dev tools but was hoping there would be a better option to highlight items without having to go into inspection tools. Thank you for the response and for the great article! I had not realized how important this will be until your simple explanation!
The feature will further ease styling with CSS
It really will, less CSS will need to be written and that can only be a good thing 😊
Awesome post Andrew, now I want to experiment with these.