Transições e proteção de dados no CSS
Propriedades personalizadas de CSS, também conhecidas como CSS variáveis, permitem que você defina suas propriedades no CSS e use os valores delas em todo o CSS. Embora sejam incrivelmente úteis hoje em dia, eles têm limitações difícil de trabalhar: elas podem assumir qualquer valor, portanto, podem ser são substituídos por algum inesperado, eles sempre herdam os valores e não é possível fazer a transição delas. Com propriedades CSS e recursos API Values de nível 1, já disponíveis no Chrome 78, essas deficiências são superadas, tornando o CSS propriedades personalizadas incrivelmente eficientes.
O que é Houdini?
Antes de falar sobre a nova API, vamos falar rapidamente sobre o Houdini. A tag CSS-TAG A Força-Tarefa Houdini, mais conhecida como CSS Houdini ou simplesmente Houdini, existe para "desenvolver recursos que explicam a "mágica" de estilo e layout na Web". A coleção de especificações do Houdini é projetada para aumentar a força do mecanismo de renderização do navegador, permitindo insights mais profundos sobre nossos estilos e a capacidade de estender nosso mecanismo de renderização. Com isso, valores CSS digitados em JavaScript e o polyfilling ou a invenção de novos CSS sem impacto no desempenho. O Houdini tem o potencial de superpoder a criatividade na web.
API CSS Properties and Values de nível 1
O nível da API de valores e propriedades CSS 1 (acessórios do Hodini e Vals) permite dar estrutura às propriedades personalizadas. Esta é a configuração situação ao usar propriedades personalizadas:
.thing {
--my-color: green;
}
Como as propriedades personalizadas não têm tipos, elas podem ser substituídas de forma
de várias formas. Por exemplo, considere o que acontece se você definir --my-color com um URL.
.thing {
--my-color: url('not-a-color');
color: var(--my-color);
}
Aqui, como --my-color não foi digitado, ele não sabe que um URL não é um endereço válido
o valor da cor. Quando o usamos, ele retorna aos valores padrão (preto para color,
transparente para background). Com a Houdini Props e Vals, as propriedades personalizadas podem
ser registrado para que o navegador saiba o que deve ser.
Agora, a propriedade personalizada --my-color está registrada como uma cor. Isso diz ao
navegador que tipos de valores são permitidos e como ele pode digitar e tratar esses
propriedade.
Anatomia de uma propriedade registrada
O registro de uma propriedade é semelhante ao seguinte:
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: 'black',
});
Ele oferece as seguintes opções:
name: string
O nome da propriedade personalizada.
syntax: string
Como analisar a propriedade personalizada. Confira uma lista completa de valores possíveis na especificação Valores e unidades de CSS. O padrão é *.
inherits: boolean
Define se o valor do elemento pai é herdado. O valor padrão é true.
initialValue: string
Valor inicial da propriedade personalizada.
Analisando mais de perto a syntax. Há um número de códigos válidos
opções
variando de números a cores
<custom-ident>
tipos Essas sintaxes também podem ser modificadas com os seguintes valores
- Anexar
+significa que ele aceita uma lista de valores separados por espaços de essa sintaxe. Por exemplo,<length>+seria uma lista separada por espaços de voltas - Anexar
#significa que ele aceita uma lista separada por vírgulas de valores de essa sintaxe. Por exemplo,<color>#seria uma lista separada por vírgulas de cores - Adicionar
|entre sintaxes ou identificadores significa que qualquer uma das são válidas. Por exemplo,<color># | <url> | magicpermitiria uma lista de cores separada por vírgulas, um URL ou a palavramagic.
Gotchas
Há duas pegadinhas com Houdini Props e Vals. A primeira é que, quando não há como atualizar uma propriedade registrada existente, e tentar registrar novamente uma propriedade irá gerar um erro indicando que ela já foi definido.
Em segundo lugar, ao contrário das propriedades padrão, as propriedades registradas não são validadas eles serão analisados. Em vez disso, eles são validados quando são computados. Isso significa que tanto para que os valores inválidos não apareçam como inválidos ao inspecionar a propriedade propriedades e incluir uma propriedade inválida depois de uma válida não será substituída ao válido; uma propriedade inválida voltará para o estado padrão da propriedade.
Como animar propriedades personalizadas
Uma propriedade personalizada registrada oferece um bônus divertido além da verificação de tipo: a animá-lo! Um exemplo de animação básica tem a seguinte aparência:
<script>
CSS.registerProperty({
name: '--stop-color',
syntax: '<color>',
inherits: false,
initialValue: 'blue',
});
</script>
<style>
button {
--stop-color: red;
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
</style>
Quando você passa o mouse sobre o botão, ele muda de vermelho para verde. Sem registrar a propriedade, ele saltará de uma cor para outra porque, sem estar registrado, o navegador não saberá o que esperar entre valor e o próximo e, portanto, não pode garantir a capacidade de fazer a transição deles. No entanto, esse exemplo pode ser avançado para animar gradientes CSS. A o seguinte CSS pode ser escrito com a mesma propriedade registrada:
button {
--stop-color: red;
background: linear-gradient(var(--stop-color), black);
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
Isso vai animar a propriedade personalizada que faz parte do linear-gradient.
para animar nosso gradiente linear. Confira o Glitch abaixo para conferir o código completo
em ação e experimente você mesmo.
Conclusão
O Houdini está a caminho para os navegadores e, com ele, maneiras completamente novas de trabalhar e estender o CSS. Com o recurso Paint API já enviada e agora Custom Props and Vals, nossa caixa de ferramentas de criativos está se expandindo, permitindo-nos definir propriedades CSS tipadas e usá-las para criar e animar novas e empolgantes designs. Há mais informações a caminho também, no problema do Houdini fila, onde é possível dar feedback e saber o que vem a seguir para a Houdini. A Houdini existe para desenvolver recursos que explicam a "mágica" de estilo e layout na Web, então, saia e e colocar em bom uso esses recursos mágicos.
Foto de Maik Jonietz ativado Exibir