Clean up styles for older browsers

[dvdherron]

Related Issue(s)

Fixes #205

Steps to test/reproduce

• On Sauce Labs, view the demo page in Safari 15 and 16 (Ventura OS) or versions of other browsers before they implemented cascade layers.
• Compare the the deploy preview here to the live site. In the latest versions of browsers, everything should be the same (except for the updated @layers popover example).

Please explain how to best reproduce the issue and/or test the changes locally (including the pages/URLs/views/states to review).

[netlify]

✅ Deploy Preview for popover-polyfill ready!

Name	Link
🔨 Latest commit	0f301bc
🔍 Latest deploy log	https://app.netlify.com/sites/popover-polyfill/deploys/67c629d5ba8230000813db99
😎 Deploy Preview	https://deploy-preview-236--popover-polyfill.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[dvdherron]

@stacyk I've removed the references here to layers (and most nesting). There's something happening that's causing a lot of the layout styles to not be applied. Testing on FF 95, custom properties are valid but not all of them are reflected in the styles of the page. Can you see the same thing in Safari 15?

[dvdherron]

@stacyk I figured out why the size variables were not working. It's due to the cq units in the base sizes.

[stacyk]

@dvdherron I have Safari 18 and there isn't a way to downgrade that I know of, so using Saucelabs is the way to go for that. Sounds like you are on the right trail so let me know if you want a review when ready.

[dvdherron]

@jgerigmeyer @stacyk I think this is ready for review.

I removed the references to layers (except for the demo example). I changed the example from having a red background to having a red border. With the former, an old browser could not read the text (It was white text on a white background).

I also removed nesting and added some @support for container query related styles. Its not perfect in older browsers, but I'm not sure how far back we want to fully support for this page.

If you test this page on Safari 16, it seems to only work when you choose Ventura as an OS version.

The shadowed popovers in older browsers don't seem to be getting the "UA Stylesheet" styles we are injecting with JS. I think that's because we are using .innerHTML to create those elements @jgerigmeyer? These popovers aren't positioned so they push content around when they are opened.

[jgerigmeyer]

Looks good to me!

The shadowed popovers in older browsers don't seem to be getting the "UA Stylesheet" styles we are injecting with JS. I think that's because we are using .innerHTML to create those elements @jgerigmeyer? These popovers aren't positioned so they push content around when they are opened.

Yeah, I think this is directly related to this note. I think I fixed it (conditionally re-injecting the styles in shadow roots) in 0f301bc -- take a look and see what you think?