You might need to know this someday: you can style a div, put the div into SVG, then put the SVG in to CSS and use it as a repeating background.
“…nobody thinks they’re writing bad code while they’re doing it. That’s the trap.”
Most folks use one of the big browsers that we’ve all heard of. But there are more and more niche browsers built upon those big open source engines that differentiate themselves in interesting ways.
Sometimes pretty simple HTML elements have a lot of things to consider and take care of, from interactivity, styling, accessibility, and more.
Do you need it? Not really, custom properties are probably a better bet. But it still has a bit of utility and it’s fun to think about.
Now that we’re starting to be able to apply types (like `number`) to values of attributes we pull of HTML elements in CSS, doing interesting things with
Using hard color stops with `repeating-conic-gradient()` and the double-stop syntax, we can pretty easily create a burst background. Then get fancier.
There was a lot of interest in our Why Can’t HTML Alone Do Includes? article. I’d like to point you to my ShopTalk Show conversation where we really get into things more with Jake Archibald.
Fun idea from the team at Immich:
Cursed knowledge we have learned as a result of building Immich that we wish we never knew.
Stuff like:
Fetch requests in Cloudflare Workers use http by default, even if you explicitly specify https, which can often cause redirect loops.
You might as well really understand height and Josh Comeau has your back here. It’s really quite different than width and perhaps less intuitive. Plus when grid and flexbox get involved, things change.
We’ve been trying to make the point around here that the new shape() in CSS is awesome. It’s the powerful <path> in SVG ported to CSS so it can use actual units. It’s probably how path() should have ported to begin with, but c’est la vie.
I’ll make the point in this demo. Resize those containers and see how the clip-path responds (path() cannot be fluid, shape() can).
Are SVG <path>s 1-to-1 convertible to shape(), though? Apparently they are! (!!). Two people have already built converters and from what I’ve tested they work great.
Developer news, information, and advice — right to your feed reader of choice.
RSSHere's our page on guest writing. It's a win-win-win!
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.
