Magníficos SVGs com propriedades personalizadas CSS – Smashing Magazine

Expliquei recentemente como uso , e consultas de mídia CSS para desenvolver o que chamo de SVGs adaptativos. Os símbolos nos permitem definir um elemento uma vez e depois usar repeti-lo repetidamente, tornando as animações SVG mais fáceis de manter, mais eficientes e leves.

Desde que escrevi essa explicação, projetei e implementei novos gráficos animados do Magnificent 7 em meu site. Eles jogam com o tema pioneiro do web design, apresentando sete magníficos personagens do Velho Oeste.

e deixe-me definir um design de personagem e reutilizá-lo em vários SVGs e páginas. Primeiro, criei meus personagens e coloquei cada um em um dentro de uma biblioteca oculta SVG:

Em seguida, referenciei esses símbolos em dois outros SVGs, um para telas grandes e outro para telas pequenas:

Elegante. Mas então veio o irritante. Eu poderia reutilizar os personagens, mas não poderia animá-los ou estilizá-los. Adicionei regras CSS visando elementos dentro dos símbolos referenciados por um mas nada aconteceu. As cores permaneceram as mesmas e as coisas que deveriam se mover permaneceram estáticas. Parecia que eu havia encontrado uma barreira invisível, e foi o que aconteceu.

Compreendendo a barreira Shadow DOM

Quando você faz referência ao conteúdo de um symbol com useum navegador cria uma cópia dele no Shadow DOM. Cada instância se torna sua própria cópia encapsulada do referenciado o que significa que o CSS externo não pode romper a barreira para estilizar qualquer elemento diretamente. Por exemplo, em circunstâncias normais, este tapping valor aciona uma animação CSS:

.tapping {
  animation: tapping 1s ease-in-out infinite;
}

Mas quando a mesma animação é aplicada a um instância desse mesmo pé, nada acontece:

.tapping {
  animation: tapping 1s ease-in-out infinite;
}

Isso porque o dentro do elemento está em uma árvore de sombra protegida, e o CSS Cascade para no final limite. Esse comportamento pode ser frustrante, mas é intencional, pois garante que o conteúdo do símbolo reutilizado permaneça consistente e previsível.

Ao aprender como desenvolver SVGs adaptativos, encontrei todos os tipos de tentativas de contornar esse comportamento, mas a maioria delas sacrificou a capacidade de reutilização que torna o SVG tão elegante. Eu não queria duplicar meus personagens apenas para fazê-los piscar em momentos diferentes. eu queria um único com instâncias que têm seus próprios tempos e expressões.

Propriedades personalizadas CSS para o resgate

Enquanto trabalhava em minhas animações pioneiras, aprendi que valores CSS regulares não podem cruzar os limites do Shadow DOM, mas as propriedades personalizadas CSS podem. E mesmo que você não possa estilizar elementos diretamente dentro de um você poderá transmitir valores de propriedades customizadas para eles. Assim, quando você insere propriedades personalizadas em um estilo embutido, um navegador olha para a cascata e esses estilos ficam disponíveis para elementos dentro do estilo. sendo referenciado.

Eu adicionei rotate para um estilo embutido aplicado ao contente:

Em seguida, definimos a animação de bater o pé e aplicamos ao elemento:

@keyframes tapping {
  0%, 60%, 100% { --foot-rotate: 0deg; }
  20% { --foot-rotate: -5deg; }
  40% { --foot-rotate: 2deg; }
}

use[data-outlaw="1"] {
  --foot-rotate: 0deg;
  animation: tapping 1s ease-in-out infinite;
}

Passando vários valores para um símbolo

Depois de configurar um símbolo para usar propriedades personalizadas CSS, posso passar quantos valores quiser para qualquer exemplo. Por exemplo, eu poderia definir variáveis ​​para fill, opacityou transform. O que é elegante é que cada instância pode então ter seu próprio conjunto de valores.

use[data-outlaw="1"] {
  --eyelids-colour: #f7bea1; 
  --eyelids-opacity: 1;
}

use[data-outlaw="2"] {
  --eyelids-colour: #ba7e5e; 
  --eyelids-opacity: 0;
}

O suporte para passar propriedades personalizadas de CSS como essa é sólido e todos os navegadores contemporâneos lidam com esse comportamento corretamente. Deixe-me mostrar algumas maneiras pelas quais tenho usado essa técnica, começando com um sistema de ícones multicoloridos.

Um sistema de ícones multicoloridos

Quando preciso manter um conjunto de ícones, posso definir um ícone dentro de um e, em seguida, use propriedades personalizadas para aplicar cores e efeitos. Em vez de precisar duplicar SVGs para cada tema, cada use pode carregar seus próprios valores.

Por exemplo, apliquei um --icon-fill propriedade personalizada para o padrão fill cor do neste ícone Bluesky:

Então, sempre que eu precisar variar a aparência desse ícone – por exemplo, em um