Não é segredo que Adam adora adereços . Cara nos deu Open Props há um bom tempo para uma série de variáveis pré-configuradas para cor, sombras, tamanho, tipografia, entre muito mais. Agora ele está de volta com Prop For That, uma ideia semelhante, mas alucinante no sentido de que cria live props com base em coisas que o CSS normalmente não consegue ver no navegador. Coisas como posição do cursor, valores de progresso, certos estados do formulário, hora atual, velocidade de rolagem – você sabe, as coisas que o JavaScript detecta e passa para o CSS.
Meu entendimento é que todo o material do script já está em segundo plano. Tudo o que é necessário é importar a biblioteca, declará-la em HTML e depois estilizá-la em CSS.
Tipo, aqui está Chris há muito tempo com propriedades personalizadas registradas em JavaScript para rastrear a posição do cursor :
Prop For That tem isso muito bem coberto. A diferença é que estamos trabalhando com atributos de dados que acionam os scripts :
<div class="mover" data-props-for="pointer">...</div>E coloque os adereços relevantes nos estilos:
.mover {
aspect-ratio: 1;
width: 50px;
background: red;
position: absolute;
left: calc(var(--live-pointer-x, 0) * 1px);
top: calc(var(--live-pointer-y, 0) * 1px);
}As demos estão onde estão. Meu Deus, Adam pode fazer um trabalho elegante.
Prop For That originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.
