# CSS @supports

> Neste drop falo como a CSS @supports API pode nos ajudar a entregar declarações CSS mais performáticas, legíveis e amigáveis ao browser.

- Canonical: https://betomuniz.com/blog/css-supports-api
- Published: 2020-09-24
- Updated: 2026-04-21T17:44:00.000Z
- Language: pt
- Tags: CSS

---

Através da CSS `@supports` API podemos verificar se determinada feature existe ou não em um browser.

Com essa abordagem, podemos reduzir drasticamente a carga aplicada ao parser CSS durante momentos críticos como [paints e repaints](https://css-tricks.com/browser-painting-and-considerations-for-web-performance/), já que não declaramos propriedades "opcionais" que ele eventualmente irá tentar processar.

E também podemos remover [vendor prefixes](https://www.lifewire.com/css-vendor-prefixes-3466867) das nossas declarações principais para dentro do contexto do @supports ao usar essa funcionalidade para verificarmos qual é o browser atual.

```css
@supports (content-visibility: hidden) {
  .myClass {
    content-visibility: hidden;
  }
}

/* Funciona só no Safari */
@supports (-webkit-hyphens: none) {
  .myClass {
    color: #0000ff;
  }
}
```

Legal, né?