- From: Thibaud Colas via GitHub <sysbot+gh@w3.org>
- Date: Fri, 10 Jun 2022 06:27:55 +0000
- To: public-svg-issues@w3.org
This hasn’t been discussed in a while but I thought it’d be worth following up on this thread based on a possible issue I foresee with `hidden` usage in CSS resets:
1. For cross-browser support reasons, a fair few CSS resets use `[hidden] { display: none; }` (see for example [normalize.css](https://github.com/necolas/normalize.css/blob/fc091cce1534909334c1911709a39c22d406977b/normalize.css#L347-L349)). This means developers working with such resets are none the wiser that SVG elements lack support.
2. The introduction of `hidden="until-found"` ([spec](https://github.com/whatwg/html/commit/f5def65bda4d01a6a1e105fcf13fe45201b4f48a), [Chrome Developers explainer](https://developer.chrome.com/articles/hidden-until-found/)) will likely cause a lot of those resets to reconsider the appropriateness of this override, which breaks the `until-found` value.
If those types of widely-used resets remove their `[hidden] { display: none; }` overrides to support `hidden="until-found"` because IE6-10 is no longer relevant, a lot more people will find out that SVG elements inline in HTML unexpectedly don’t support `hidden`.
---
This will be be pretty straightforward for maintainers of CSS resets and authors generally to resolve, but I thought it worth mentioning here nonetheless. I personally found out about this because [Tailwind CSS removed this override from their reset](https://github.com/tailwindlabs/tailwindcss/discussions/8247) because of what I mention above.
For context, I use the `hidden` attribute on SVG elements exactly [as described above](https://github.com/w3c/svgwg/issues/508#issuecomment-557196749) – to hide a "sprite" of icons as symbols, which only works thanks to the CSS resets:
```html
<svg hidden>
<defs>
<symbol id="circle"><circle cx="8" cy="8" r="7" /></symbol>
</defs>
</svg>
<svg class="inline" width="16" height="16"><use href="#circle"></use></svg>Test
```
--
GitHub Notification of comment by thibaudcolas
Please view or discuss this issue at https://github.com/w3c/svgwg/issues/508#issuecomment-1152005787 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 10 June 2022 06:27:56 UTC