CSS @property e um novo estilo

• A regra @property é compatível com todos os navegadores modernos e oferece um recurso para definir explicitamente a sintaxe, o valor inicial e a herança de propriedades personalizadas do CSS
• Já faz bastante tempo desde a introdução inicial do CSS Houdini e da CSS Properties and Values API
• Vamos explorar, por meio de demos que investigam as possibilidades do @property, o que a próxima geração do CSS pode oferecer

Calls to action (elementos de chamada para ação)

• CTAs que chamam atenção em páginas da web são usados em muitos sites
• Este estilo foi testado na prática, e o resultado pode ser visto no CodePen
• Ao abrir o painel CSS da demo, é possível ver a regra @property relacionada às propriedades personalizadas que precisam de animação

@property --gradient-angle {  
  syntax: "";  
  initial-value: 0deg;  
  inherits: false;  
}  

• A regra @property permite essa sintaxe no navegador e define o valor inicial como 0deg
• Com isso, o navegador pode fazer uma transição suave de 0deg para 360deg e renderizar um gradiente em rotação

@keyframes rotate-gradient {  
  to {  
    --gradient-angle: 360deg;  
  }  
}  
.rotate-gradient {  
  background: conic-gradient(from var(--gradient-angle), transparent, black);  
  animation: rotate-gradient 10s linear infinite;  
}  

• Uma demo simples de rotação de gradiente mostra as poucas linhas de código necessárias para implementar esse conceito

Transição suave no hover

• Quando um elemento recebe hover, são necessários alguns componentes especiais para uma transição suave de gradiente
• Cada propriedade personalizada que precisa de animação declara sua sintaxe na definição @property, permitindo que o navegador faça a transição das mudanças de valor de forma fluida

.shiny-cta {  
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,  
              conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),  
                            transparent, var(--shiny-cta-highlight) var(--gradient-percent),  
                            var(--gradient-shine) calc(var(--gradient-percent) * 2),  
                            var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),  
                            transparent calc(var(--gradient-percent) * 4)) border-box;  
}  

• O valor --gradient-percent determina o tamanho da área brilhante; no hover, ele aumenta para alongar o brilho
• O valor --gradient-angle-offset reajusta o ângulo do gradiente para evitar que o brilho volte para trás no hover

Ajuste da velocidade de rotação

• Uma dica de CSS para desacelerar a rotação no hover é muito útil
• A mesma animação de rotação é declarada duas vezes, com a segunda configurada ao contrário para ficar pausada e com a duração dividida pela metade
• Quando o elemento recebe hover, animation-play-state: running substitui o valor pausado e desacelera a rotação para metade da velocidade

Pequenos pontos brilhantes

• Pequenos pontos brilhantes são adicionados dentro do botão para criar um efeito luminoso
• Para isso, é criado um fundo com radial-gradient

.shiny-cta::before {  
  --position: 2px;  
  --space: calc(var(--position) * 2);  
  background: radial-gradient(circle at var(--position) var(--position),  
                              white calc(var(--position) / 4),  
                              transparent 0) padding-box;  
  background-size: var(--space) var(--space);  
  background-repeat: space;  
}  

• A propriedade personalizada --gradient-angle é usada na máscara conic-gradient para revelar parte do padrão de pontos enquanto gira

Melhorando as cores no hover

• O estilo de hover é aprimorado para ficar mais profundo e chamativo
• O texto do botão é envolvido em um elemento span, e uma sombra de caixa com blur é aplicada para expandir e encolher no hover

Introduzindo um novo estilo

• Muitas das técnicas acima eram quase impossíveis até pouco tempo atrás
• Definir explicitamente propriedades personalizadas abre muitas oportunidades
• É animador imaginar como o @property será aproveitado em aplicações de grande porte e sistemas de design

Resumo do GN⁺

• A regra @property oferece um recurso para definir explicitamente a sintaxe, o valor inicial e a herança de propriedades personalizadas do CSS
• Com esse recurso, desenvolvedores web podem implementar animações e estilos mais complexos e sofisticados
• Há grande potencial de uso especialmente em aplicações de grande porte e sistemas de design
• Outros projetos com recursos semelhantes incluem CSS Houdini e a CSS Properties and Values API

[GN⁺]

Comentários do Hacker News

• Sinto como se meu cérebro resistisse ao entrar em contato com um conceito novo

  • Recomendo ler o artigo da MDN
  • É preciso usar @property na prática para entender
  • Ao implementar UIs complexas, é importante minimizar a dependência de JS

• Não sou desenvolvedor web, mas consigo usar frameworks web básicos

  • Lembro de quando o CSS apareceu pela primeira vez
  • Não entendo o CSS do primeiro exemplo no CodePen
  • Fico em dúvida se um sistema de estilização precisa de uma mini linguagem de programação para animações
  • Penso se isso não poderia ser feito também com JavaScript

• Tenho achado interessante o trabalho recente em CSS, especialmente o Houdini

  • Dá uma sensação parecida com quando recebi um livro sobre os recursos do IE 5.5
  • Novos recursos foram adicionados ao CSS, mas eram coisas básicas
  • Os desenvolvedores do IE podiam criar código JS em módulos e anexá-lo a elementos via CSS
  • Agora estamos voltando a ter esse tipo de recurso

• Só porque é possível não significa que deve ser feito

  • Quando os LEDs azuis brilhantes apareceram pela primeira vez, foram usados em todo tipo de hardware, mas não traziam valor para o usuário

• As coisas que dá para fazer com animações em CSS parecem mágicas

  • Como é algo específico de CSS, é difícil de aprender e de conceitualizar
  • Programar em JS parece mais fácil
  • Tenho dificuldade com a grande quantidade de opções de uso do CSS flex

• É um demo tecnicamente interessante, mas botões não deveriam ser animados desse jeito

  • Todo mundo quer adicionar e animar uma borda com gradiente roxo em tudo
  • Só porque é possível não significa que deve ser feito
  • A orientação é escrever CSS personalizado para remover esse tipo de estilo

• Envios anteriores não receberam atenção, mas são interessantes e educativos

  • link

• Este site me traz alegria

  • Sempre gostei de mexer com CSS
  • Ao construir uma carreira em desenvolvimento web, aprendi que muitas pessoas odeiam CSS
  • Dedico muito tempo a explorar e experimentar com HTML+CSS
  • A maioria das pessoas provavelmente acharia isso uma perda de tempo
  • Este site alegrou meu dia

• Gosto de trabalhar com CSS, mas vejo colegas tendo dificuldade

  • Recomendo fortemente o canal do YouTube do Kevin Powell
  • Há um vídeo que explica recursos úteis sobre propriedades registradas
  • link do vídeo
  • Também há um artigo que explica propriedades registradas de forma simples
  • link do artigo

• Faz um tempo que não faço desenvolvimento web, e levei um tempo para entender o que esse recurso faz

  • Acho que o artigo não explicou bem
  • O novo recurso faz com que sejam usados os valores definidos no bloco @property --gradient-angle {...}
  • A parte inherits: false; é clara quanto ao que faz, mas não entendo por que é necessária
  • Já que seletores CSS podem controlar herança, questiono por que isso precisa ser controlado em um segundo lugar
  • Não entendo por que é preciso definir o tipo no bloco @property
  • Fico pensando se o navegador não poderia inferir o tipo olhando os lugares em que @property é usado