Feuilles de style constructibles

Styles réutilisables et fluides.

Jason Miller

Les feuilles de style constructibles permettent de créer et de distribuer des styles réutilisables lorsque vous utilisez Shadow DOM.

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 101.
  • Safari: 16.4.

Source

Il a toujours été possible de créer des feuilles de style à l'aide de JavaScript. Cependant, le processus consistait historiquement à créer un élément <style> à l'aide de document.createElement('style'), puis à accéder à sa propriété de feuille pour obtenir une référence à l'instance CSSStyleSheet sous-jacente. Cette méthode peut produire du code CSS en double et l'encombrement qui l'accompagne, et l'action d'association entraîne un flash de contenu sans style, qu'il y ait ou non encombrement. L'interface CSSStyleSheet est la racine d'un ensemble d'interfaces de représentation CSS appelées CSSOM. Elle offre un moyen programmatique de manipuler les feuilles de style et élimine les problèmes associés à l'ancienne méthode.

Diagramme montrant le flux du CSS créé à l'instanciation, puis à l'application.

Les feuilles de style constructibles permettent de définir et de préparer des styles CSS partagés, puis de les appliquer facilement à plusieurs racines Shadow ou au document, sans duplication. Les mises à jour d'une feuille de style CSSStyleSheet partagée sont appliquées à toutes les racines dans lesquelles elle a été adoptée. L'adoption d'une feuille de style est rapide et synchrone une fois la feuille chargée.

L'association configurée par les feuilles de style constructibles se prête bien à un certain nombre d'applications différentes. Il peut être utilisé pour fournir un thème centralisé utilisé par de nombreux composants : le thème peut être une instance CSSStyleSheet transmise aux composants, les mises à jour du thème étant automatiquement propagées aux composants. Il peut être utilisé pour distribuer des valeurs de propriété personnalisée CSS à des sous-arborescences DOM spécifiques sans s'appuyer sur la cascade. Il peut même être utilisé comme interface directe avec l'analyseur CSS du navigateur, ce qui facilite le préchargement des feuilles de style sans les injecter dans le DOM.

Créer une feuille de style

Plutôt que d'introduire une nouvelle API pour y parvenir, la spécification Constructable StyleSheets permet de créer des feuilles de style de manière impérative en appelant le constructeur CSSStyleSheet(). L'objet CSSStyleSheet obtenu comporte deux nouvelles méthodes qui permettent d'ajouter et de mettre à jour des règles de feuille de style de manière plus sécurisée sans déclencher de flash de contenu sans style (FOUC). Les méthodes replace() et replaceSync() remplacent toutes deux la feuille de style par une chaîne CSS, et replace() renvoie une promesse. Dans les deux cas, les références à des feuilles de style externes ne sont pas acceptées. Les règles @import sont ignorées et génèrent un avertissement.

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..."

Utiliser des feuilles de style construites

La deuxième nouvelle fonctionnalité introduite par les feuilles de style constructibles est une propriété adoptedStyleSheets disponible sur les racines fantômes et les documents. Cela nous permet d'appliquer explicitement les styles définis par un CSSStyleSheet à une sous-arborescence DOM donnée. Pour ce faire, nous définissons la propriété sur un tableau d'une ou de plusieurs feuilles de style à appliquer à cet élément.

// 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);

Synthèse

Avec les feuilles de style constructibles, les développeurs Web disposent désormais d'une solution explicite pour créer des feuilles de style CSS et les appliquer aux arbres DOM. Nous disposons d'une nouvelle API basée sur Promise pour charger des feuilles de style à partir d'une chaîne de source CSS qui utilise l'analyseur et la sémantique de chargement intégrés du navigateur. Enfin, nous disposons d'un mécanisme permettant d'appliquer les mises à jour de feuilles de style à toutes les utilisations d'une feuille de style, ce qui simplifie les modifications de thèmes et les préférences de couleur.

Voir la démo

Perspectives

La version initiale des feuilles de style constructibles est fournie avec l'API décrite ici, mais des travaux sont en cours pour faciliter l'utilisation. Une proposition vise à étendre le adoptedStyleSheets FrozenArray avec des méthodes dédiées pour insérer et supprimer des feuilles de style, ce qui éliminerait le besoin de cloner des tableaux et éviterait les références de feuilles de style potentiellement en double.

En savoir plus