Feuilles de style constructibles

Styles réutilisables intégrés.

Jason Miller

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

Il a toujours été possible de créer des feuilles de style à l'aide de JavaScript. Toutefois, le processus consistait historiquement à créer un élément <style> à l'aide 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 générer du code CSS en double et son gonflement associé, et l'action d'association entraîne un flash de contenu sans style, qu'il y ait gonflement ou non. L'interface CSSStyleSheet est la racine d'une collection d'interfaces de représentation CSS appelée CSSOM, qui offre un moyen programmatique de manipuler les feuilles de style et d'éliminer les problèmes associés à l'ancienne méthode.

Les feuilles de style constructibles permettent de définir et de préparer des styles CSS partagés, puis de les appliquer facilement et sans duplication à plusieurs racines Shadow ou au document. Les mises à jour d'un CSSStyleSheet partagé sont appliquées à toutes les racines dans lesquelles il a été adopté, et 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. Elle peut être utilisée 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 se propageant automatiquement aux composants. Elle peut être utilisée pour distribuer des valeurs de propriété personnalisées CSS à des sous-arborescences DOM spécifiques sans s'appuyer sur la cascade. Elle peut même être utilisée comme interface directe pour 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 des feuilles de style constructibles permet de créer des feuilles de style de manière impérative en appelant le constructeur CSSStyleSheet(). L'objet CSSStyleSheet résultant comporte deux nouvelles méthodes qui permettent d'ajouter et de mettre à jour les 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 de code CSS, et replace() renvoie une promesse. Dans les deux cas, les références de feuille de style externes ne sont pas acceptées. Toutes 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 adoptedStyleSheets disponible sur les racines Shadow 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 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 arborescences DOM. Nous disposons d'une nouvelle API basée sur les promesses pour charger des feuilles de style à partir d'une chaîne de source CSS qui utilise l'analyseur intégré du navigateur et la sémantique de chargement. Enfin, nous disposons d'un mécanisme permettant d'appliquer les mises à jour de feuille de style à toutes les utilisations d'une feuille de style, ce qui simplifie les modifications de thème et les préférences de couleur.

Voir la démonstration

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 son utilisation. Il est proposé d'étendre le FrozenArrayadoptedStyleSheets avec des méthodes dédiées à l'insertion et à la suppression de feuilles de style, ce qui éviterait d'avoir à cloner le tableau et d'éventuelles références de feuilles de style en double.

En savoir plus

• État de la plate-forme Chrome
• Exemple
• API
• Vidéo explicative
• Intention d'implémenter
• Intention de livrer
• Discourse