Modern CSS Code Snippets
49 points by chamlis
49 points by chamlis
There's literally no point in using these snippets when most of them are "Newly available", meaning I will have to check in 2–3 years to actually use them.
They should have shown "Widely available" by default instead of "Newly available". There is a selector bar below the header.
Yep. It's not unlikely that implementing these "Newly available" replacements will break your site for a significant number of users. "Widely available" (which you can select on this page) would serve as a better default.
Sadly true, but still good to know about. I use Sailfish OS which is still on Firefox ESR 91 & so many sites are broken that really don’t need be me that modern.
Very cool resource! TIL about:
Feels like a lot of these tricks are things I see on FrontendMasters or css-tricks.com, just packaged in bite-size snippets. This is a good thing!
My one gripe is that the headline example, the "how do you center a div in CSS" meme, is slightly inaccurate; there are absolutely reasons to prefer the position: absolute; method or display: flex; align-items: center; justify-content: center; over the provided display: grid; place-items: center; method. Granted, those reasons are very subtle and don't fit into a snippet, this is mostly a me problem :)
This is very cool! It's unfortunate that so many features are still only available on Chromium-based browsers, though
https://modern-css.com/smooth-height-auto-animations-without-javascript/
It shows interpolate-size as "newly available" when it doesn't work on Firefox and MDN shows it as "limited availability".