Folhas de estilo construíveis

Estilos reutilizáveis perfeitos.

Jason Miller

As Folhas de estilo configuráveis são uma maneira de criar e distribuir estilos reutilizáveis ao usar o DOM de sombra.

Compatibilidade com navegadores

  • Chrome: 73.
  • Borda: 79.
  • Firefox: versão 101
  • Safari: 16.4.

Origem

Sempre foi possível criar folhas de estilo usando JavaScript. No entanto, sempre foi criar um elemento <style> usando document.createElement('style') e acessar a propriedade da planilha para obter uma referência aos CSSStyleSheet instância. Esse método pode produzir código CSS duplicado e sua sobrecarga, e o ato de anexar leva a um relâmpago de conteúdo sem estilo, independentemente de haver excesso de volume ou não. A interface CSSStyleSheet é a raiz de uma coleção de CSS de representação gráfica conhecidas como CSSOM, oferecendo uma maneira programática de manipular as folhas de estilo, além de eliminar problemas associados ao método antigo.

Diagrama mostrando a preparação e a aplicação do CSS.

As folhas de estilo construíveis permitem definir e preparar CSS compartilhado e aplicá-los a várias raízes shadow ou ao recurso com facilidade e sem duplicação. As atualizações em um CSSStyleSheet compartilhado são aplicadas a todas as raízes em que foi adotado e adotando uma folha de estilo é rápido e síncrono depois que a planilha é carregada.

A associação estabelecida pelas folhas de estilo construíveis funciona bem para um de aplicativos diferentes. Ele pode ser usado para fornecer um tema centralizado usado por muitos componentes: o tema pode ser uma instância CSSStyleSheet transmitida para componentes, com atualizações do tema se propagando para os componentes automaticamente. Ele pode ser usado para distribuir CSS de propriedade como subárvores do DOM específicas sem depender da cascade. Ela pode até ser usada como uma interface direta para o analisador de CSS do navegador, facilitando pré-carregar folhas de estilo sem injetá-las no DOM.

Como criar uma folha de estilo

Em vez de introduzir uma nova API para fazer isso, a biblioteca Constructable StyleSheets torna possível criar folhas de estilo imperativamente, invocando construtor CSSStyleSheet(). O objeto CSSStyleSheet resultante tem dois novos métodos que tornam mais seguro adicionar e atualizar regras da folha de estilo sem acionando o Flash of Unstyled do YouTube (FOUC, na sigla em inglês). O replace() e replaceSync() substituem a folha de estilo por uma string de CSS e replace() retorna uma promessa. Em ambos os casos, as referências da folha de estilo externa não são com suporte: todas as regras @import serão ignoradas e produzirão um aviso.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// replace all styles:
sheet.replace('a { color: blue; }')
  .then(() => {
    console.log('Styles replaced');
  })
  .catch(err => {
    console.error('Failed to replace styles:', err);
  });

// Any @import rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('@import url("styles.css"); a { color: red; }');
sheet.replace('@import url("styles.css"); a { color: red; }');
// Console warning: "@import rules are not allowed here..."

Como usar folhas de estilo criadas

O segundo novo recurso apresentado pelas Folhas de estilo construíveis é uma adoptedStyleSheets propriedade disponível no shadow Raízes e Documentos. Isso permite aplicar explicitamente os estilos definidos por uma CSSStyleSheet a um determinado DOM. subárvore. Para isso, definimos a propriedade como uma matriz de uma ou mais folhas de estilo para se aplicam a esse elemento.

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');

// Apply the stylesheet to a document:
document.adoptedStyleSheets.push(sheet);

// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);

Como tudo funciona em conjunto

Com as folhas de estilo construíveis, os desenvolvedores Web agora têm uma solução explícita para criar folhas de estilo CSS e aplicá-las a árvores do DOM. Temos um novo API baseada em promessas para carregar StylePlanilhas a partir de uma string de fonte CSS que usa o analisador embutido do navegador e a semântica de carregamento. Por fim, temos um mecanismo para aplicar atualizações de folha de estilo em todos os usos de uma folha de estilo, simplificando coisas como mudanças de tema e preferências de cor.

Conferir a demonstração

No futuro

A versão inicial das folhas de estilo construíveis enviadas com a API descritas aqui, mas ainda há muito trabalho a ser feito para facilitar o uso. Há uma proposta para estender o adoptedStyleSheets FrozenArray com métodos dedicados para inserir e as folhas de estilo, o que eliminaria a necessidade de clonagem de matrizes e evitaria possíveis referências duplicadas de folha de estilo.

Mais informações