31–40 of 50 posts
I wonder why the firefox CSS rendering engine prefers to smooth out. Looks like a dramatically different implementation, but maybe that's just because it's an edge case of rendering
People should quit trying to make CSS a drawing tool--it is not--and start learning how to use SVG instead or images.
I would think that quite a few powerful new ideas have come purely from abusing and bashing around older ideas.
I wonder why the firefox CSS rendering engine prefers to smooth out. Looks like a dramatically different implementation, but maybe that's just because it's an edge case of rendering
Firefox has chosen to expand based on distance at all points, which is one of the reasonable answers and probably the most general one; a cusp then expands to a curve.
The others have chosen to retain cusps, which can be a reasonable answer and I believe is a lot cheaper to compute; but degenerate cases abound as you expand past the feature size (distances between nodes), so that by the fourth red ring it’s obviously incorrect.
Box shadows are another case where expansion occurs: the fourth length parameter, spread distance. If the corner is a cusp, the shadow corner will be a cusp. If it’s rounded, the shadow corner will be rounded. See https://drafts.csswg.org/css-backgrounds/#shadow-shape for some helpful diagrams. A sneaky trick: .1px border-radius means the box still looks square, but the expanded shadow will curve. Sometimes useful. But back on the original content of the article—if you use a font with microscopic curves instead of cusp nodes, Chromium/Safari will look more like Firefox.
I wonder why the firefox CSS rendering engine prefers to smooth out. Looks like a dramatically different implementation, but maybe that's just because it's an edge case of rendering
Made few shots and playground for that back then: https://x.com/myfonj/status/1870178380831732160
@grid: 15 / 90%;
border-radius: 50%;
background: hsl(@t(/20), 70%, 60%);
scale: sin(@atan2(@dx, @dy) + @ts);
--c: #5EBD3E,#FFB900,#F78200,#E23838,#973999,#009CDF;
@content: '';This is made with (and by the author of) , a web component that lets you put the CSS variant used in this blog inline into your HTML, like so: @grid: 15 / 90%; border-radius: 50%; background: hsl(@t(/20), 70%, 60%); scale: sin(@atan2(@dx, @dy) + @ts); No JS needed except for loading the definition of the component. Works in plain HTML, Markdown, frameworks, etc. https://css-doodle.com/
Kudos to the author for posting something cool and new in the age of standardised styles.
This is made with (and by the author of) , a web component that lets you put the CSS variant used in this blog inline into your HTML, like so: @grid: 15 / 90%; border-radius: 50%; background: hsl(@t(/20), 70%, 60%); scale: sin(@atan2(@dx, @dy) + @ts); No JS needed except for loading the definition of the component. Works in plain HTML, Markdown, frameworks, etc. https://css-doodle.com/
Thanks for the explanation. I’ve moved away from frontend work in 2018, and I really have no idea what CSS can do anymore! So much of the CSS in this page looks cryptic to me. Kudos to the author for posting something cool and new in the age of standardised styles.