- From: Carlos Lopez via GitHub <sysbot+gh@w3.org>
- Date: Wed, 08 Feb 2023 17:23:11 +0000
- To: public-css-archive@w3.org
>I also haven't tried getting outlines going, but it's probably going to get pretty complicated. Yeah, it was pretty complicated. @jsnkuhn I was able to create it with pure CSS using `mask-border` and `mask` and sub elements. All I need to do is plug in a SVG path of what a square would look like and the SVG will build the 9-slice scaling needed. I plan on pre-generating the SVG as inline CSS rules and ship as a global CSS file. I was close to making it work with Firefox, but it gets pretty wonky without being able to clamp width based on height. There's probably some magic way, but it's too much work (maybe CSS Grid). Firefox *does* support `mask`, and I was able to get the corners to show, but I couldn't clip said corners because non-square shapes need to have corners bound by the shortest side. Of course, if you *don't* want dynamically colored shapes and borders, then you can use `background-image` and `border-image` which is supported by Firefox. But you'd have to regenerate the SVG each time you want to change a color, which doesn't really seem performant. I like having the SVGs parsed only once on start-up. Also, with CSS options, it's all compositing based, so there's no painting needed. I rely on `border-mask` to shave off the corners. If Firefox can implement it, which appears to be one of the interop goals of 2023, then I'm pretty good with this as a workaround. Caveat, of course, is that I'm not a real boundary, so `box-shadow` won't work. Also, the size of the outline has to be specified in the SVG. `border-mask` also appears to not support `vector-effect="non-scaling-stroke"` which complicates things, but for me, I can use this for Chrome and Safari and use rounded corners as a fallback for Firefox until they implement `border-mask`. Here's the codepen: https://codepen.io/shortfuse/pen/MWBxozL And snapshot:  -- GitHub Notification of comment by clshortfuse Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6980#issuecomment-1422979477 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 8 February 2023 17:23:12 UTC