Preflight display declaration for iframe, img, etc. overrides the hidden attribute #9165
Description
What version of Tailwind CSS are you using?
3.1.8
What build tool (or framework if it abstracts the build tool) are you using?
Laravel Mix 6.0.49
What version of Node.js are you using?
v16.16.0
What browser are you using?
Verified in Chrome & Safari
What operating system are you using?
macOS
Reproduction URL
https://play.tailwindcss.com/3ETU8oj18o
Describe your issue
I discovered a funky edge-case today in the preflight styles. Preflight contains the following:
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}Unfortunately that doesn't work well if any of those elements have the hidden attribute. Browsers implement hidden with display: none, but the Tailwind preflight class has a higher specificity and so overrides it.
I was wondering about the safest way to fix this without increasing specificity in a way that could break things. What's Tailwind's browser support policy say about using :where() for this kind of thing? I'm thinking that using the following structure would be ideal, but it wouldn't work on older browsers that lack support.
iframe:not(:where([hidden])) {
display:block;
}