In this article we will explore some new CSS features in 2024.
If you like my articles, you can buy me a coffee :)
1. CSS container quer...
For further actions, you may consider blocking this person and/or reporting abuse
Careful with the conclusion part!
While this is a great list, it is worth noting:
:scopeis not supported at all in Firefox.color-contrastis not supported at all in any browser and is purely experimental.So in reality, out of the list you gave, container queries are the only one that is "safe" to use at the moment, depending on how far back you want to support browsers!
When talkink about any "new" features of web technologies, one has to be aware of possible lack of support in certain browsers.
A dedicated website caniuse.com/ is here to save the day providing detailed info about browser adoption of most if not all of them. If anyone doesn't know it yet, bookmark it asap!
This is a fantastic point. And this is common with new features in CSS or JavaScript. It's fine to play with them in your personal projects, but you must pay a lot of attention to browser support before using them in production.
Yes, I’m aware of the current support limitations. However, it’s worth noting that when Flexbox and Grid first came out, they faced similar browser support challenges, yet over time they became well-supported
absolutely! And I encourage people to play with things and put them in side projects, just wanted to point out they were not really "production ready" yet.
Thank you for your feedback. I respect every comment, every information and opinion made on my articles in this community. Your comment is very valuable to me
Workaround would be to install PostCSS and respective plugins which will transform modern CSS to output understandable to older browsers. Once the browser support of these features is acceptable, you just remove the PostCSS plugins from your build step without modyfing the code at all.
Thank you , it seems logical to easily provide legacy browser support with PostCSS and related plugins.
This is true
Thanks for clarifying this! It’s important to check the browser support on any features you use.
Most of these are beta features
Yes, I already said it is.
Yes you did 😅
But I personally love beta features
Love it
:)
I want you to teach me
You can ask whatever you want by commenting on the article or sending an e-mail
zonaykara@gmail.com
Sometimes i wish everyone just put their effort into 1 package , tailwind css, utility based
You may be right, but a CSS framework contains CSS codes. To use a framework effectively, you need to understand css, so you have to learn css.