Gregory's ServerI’d love to hear what you think of `background-clip: border-area`. What will you do with it?
|
9 comments
 The most powerful part of `background-clip: border-area` might just be what you can do with a round box and conic-gradient background on its border. Especially if you animate it using `@property`! See the code: https://codepen.io/jensimmons/pen/OJKBmyP?editors=1100 I put all of the demos in one place on CodePen. https://codepen.io/collection/jONBky Be sure to try them out in Safari Technology Preview, Safari 18.2 beta, or *perhaps* the version of Safari you have right now after enabling a flag. (The demos will tell you if your browser has support or not.)   @jensimmons My guess is that the border-area + text is going to be used a lot more than just border-area, and having that be more ergonomic would be great. @Kilian +1! We’ve been opening issues at the CSSWG to make it more ergonomic — and two decisions were recently made to improve things. Be sure to read the section titled “Future changes coming” to learn about the details. Direct link: https://webkit.org/blog/16214/background-clip-border-area/#:~:text=Future%20changes%20coming @jensimmons just to bikeshed my own request, something like "background-clip: punch-through" would be nice. @Kilian Ha! Yeah, it’s more like: ``` |
`background-clip: border-area` is a great example of something that you can use today — even though it’s only supported in Safari.
Progressive enhancement techniques let you ship something using it now, while supporting all users! When other browsers add support, more users will see the result.