Beto Muniz
  • Share

CSS @supports

tech

🗣 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é?

💧 Gostou desse drop? Compartilhe-o. 🤩

E para receber meus conteúdos assim que eu publicar, me segue lá no Telegram 😋

  • Share It!
Copyright Beto Muniz © 2010-2020. All rights reserved.