🗣 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, já que não declaramos propriedades “opcionais” que ele eventualmente irá tentar processar.

💡 E também podemos remover vendor prefixes das nossas declarações principais para dentro do contexto do @supports ao usar essa funcionalidade para verificarmos qual é o browser atual.

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

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

💬 Legal, né?