Beto Muniz
  • Share

@property Variáveis CSS com super poderes

tech

📣 @property é uma nova CSS API trazida pelo conjunto de especificações CSS Houdini que visa dar "super poderes" para a atual maneira que definimos propriedades customizadas no CSS.

@property --colorPrimary {
syntax: '<color>';
initial-value: magenta;
}
body {
/* Fallback necessário para browsers que não dão suporte. */
--colorPrimary: magenta;
}
.text {
color: var(--colorPrimary);
}

⚡️ Como visto na definição da API, com @property podemos ir além de strings, pois podemos também configurar o tipo do dado contido na propriedade CSS customizada através do campo syntax e também predefinir valores através do campo initial-value.

🎩 Bem legal, né? Mas por ainda ser uma especificação em definição, confira o suporte aqui e acompanhe a sua evolução.

💧 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.