The results for The State of CSS 2020 are in! Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you’ve been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. Instead of breakpoints, we can now …
Tag Archives: css
Customise the caret color with the CSS caret-color
property
Thanks to this tweet by Álvaro Trigo I found out that you can change the color of the caret — that little blinking | in text inputs — using the caret-color CSS property: There are CSS properties I never heard of before! Hello `caret-color` 👋 pic.twitter.com/ndcDUjN13R — Álvaro Trigo 🐦🔥 (@IMAC2) November 24, 2020 Example: …
Continue reading “Customise the caret color with the CSS caret-color
property”
BlurHash — Low-res Blurred Placeholder Images Represented as Text
If you’re dealing with images it’s quite common to show a small placeholder while the image is loading. You could go with grey placeholders, but a low-res blurred version of the original is preferred. That way you can, in the example use case of a website, use the Blur Up technique once the image is …
Continue reading “BlurHash — Low-res Blurred Placeholder Images Represented as Text”
Native Aspect Ratio Boxes in CSS thanks to aspect-ratio
The Raven Technique: One Step Closer to Container Queries
Building further upon The Holy Albatross technique, comes The Raven Technique by Mathias Hülsbusch: I want to get closer to actual container queries! So, what does CSS have offer that I could tap into? I have a mathematical background, so functions like calc(), min(), max() and clamp() are things I like and understand. Next step: …
Continue reading “The Raven Technique: One Step Closer to Container Queries”