Propriedades personalizadas mais inteligentes com a nova API da Houdini

Transições e proteção de dados no CSS

Sam Richard

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. Veja 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> | magic permitiria uma lista de cores separada por vírgulas, um URL ou a palavra magic.

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 mudará de uma cor para outra porque, sem estar registrado, o navegador não saberá o que esperar entre um 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 levado um pouco além para animar os gradientes do 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 criação está em expansão, 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 Abrir a página