Skip to content

Instantly share code, notes, and snippets.

@WebMechanic

WebMechanic/supports_selector.html

Last active March 23, 2020 15:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save WebMechanic/a75071e67d952f49a17c60b3216b23bb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save WebMechanic/a75071e67d952f49a17c60b3216b23bb to your computer and use it in GitHub Desktop.
Download ZIP
@supports selector() and :is(a,b)
Raw
supports_selector.html
<html>
<style>
/**
* @link https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
* `@supports selector` works in Firefox/69, Chrome/82 Canary, Edg/81 Dev
*
* @link https://developer.mozilla.org/en-US/docs/Web/CSS/:is
* `:is(a,b)` works with chrome://flags in Chrome/68 Canary, Edg/79 Dev
* `:-moz-any(a,b)` works in Firefox/69
*
* @date 2020-03-23
*/
@supports selector(:is(a,b)) and selector(p > em) {
b {color:rebeccapurple}
p > em.blnk {display:initial;color:initial}
}
@supports selector(:-moz-any(a,b)) and selector(p > em) {
b {color:rebeccapurple}
p > em.gck {display:initial;color:initial}
}
p {color:blue}
em {display:none;font-style:normal}
</style>
<body>
<p>Me blue.
<b>Me purple?</b>
<em class="blnk">Me Blink! 👀</em>
<em class="gck">Me Gecko! 🦊</em></p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment