Feature Detection in CSS (CSS @supports) 관련

TypeScript > Article(s)

---

Article(s)

---

Feature Detection in CSS (CSS @supports)

There’s a good introduction to @supports on Mozilla Hacks: With @supports, you can write a small test in your CSS to see whether or not a particular “feature” (CSS property or value) is supported, and apply a block of code (or not) based on the answer. Progressive enhancement in it’s finest form: /* fallback code … Continue reading ”Feature Detection in CSS (CSS @supports)”

There’s a good introduction to @supports on Mozilla Hacks:

With @supports, you can write a small test in your CSS to see whether or not a particular “feature” (CSS property or value) is supported, and apply a block of code (or not) based on the answer.

Progressive enhancement in it’s finest form:

/* fallback code for older browsers */

@supports (display: grid) {
  /* code for newer browsers */
  /* including overrides of the code above, if needed */
}

Apart from enhancing your styles, you could also use to show/hide warnings. The trick is to show a warning by default, and then hide it

.warning {
  /* style for warning box here …*/
}

@supports (display: grid) {
  /* hide warning box */
  .warning {
    display: none;
  }

  /* extra styles here … */
}

Handy when making tech-demos.

What about browser support?

Feature Queries have been around since mid–2013. With the imminent release of Safari 10, I believe it’s past time for us to add @supports to our toolbox.

Using Feature Queries in CSS – Mozilla Hacks - the Web developer blog

There’s a tool in CSS that you might not have heard of yet. It’s powerful. It’s been there for a while. And it’ll likely become one of your favorite new ...

Feature Detection in CSS (CSS @supports)

---

There’s a good introduction to @supports on Mozilla Hacks: With @supports, you can write a small test in your CSS to see whether or not a particular “feature” (CSS property or value) is supported, and apply a block of code (or not) based on the answer. Progressive enhancement in it’s finest form: /* fallback code … Continue reading ”Feature Detection in CSS (CSS @supports)”