1

We have an issue on mobile that involves using the vh unit. Rather than have a gap at the top/bottom of the page that isn't consistent we are hoping to use a couple of the newer features to help us cut the mustard for support.

I'm not having much like determining if the @supports(...){} media query has a way to work for us here. What I'm hoping to accomplish is...

  1. Check support for css env() _This would also include a check to the JS version of CSS.supports to include JS to update the next fallback...

  2. Check support for CSS variables. Using this feature we'd just recalculate the vh based on the windows innerHeight(?) and assign it to a CSS variable --vh

  3. If neither of those two options is available we'd fall back to just much larger than required top and bottom margins.

Is it possible to use the @supports(...){} media query for either of these two features?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Jared
  • 5,840
  • 5
  • 49
  • 83
  • 1
    `@supports (color: var(--)) { /* has support */ }` – Asons Feb 15 '19 at 20:46
  • 1
    Also check this post ... shows some nice JS as well: https://stackoverflow.com/questions/33359157/instead-of-using-prefixes-i-want-to-ask-site-visitors-to-upgrade-their-browser – Asons Feb 15 '19 at 20:49
  • https://developer.mozilla.org/en-US/docs/Web/CSS/@supports#Testing_for_the_support_of_custom_properties – Asons Feb 15 '19 at 20:51

0 Answers0