Feuilles de style constructibles

Styles réutilisables fluides

Jason Miller

Les feuilles de style constructibles sont un moyen de créer et de distribuer des styles réutilisables lorsque vous utilisez Ombre DOM.

Navigateurs pris en charge

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

Source

Il a toujours été possible de créer des feuilles de style en utilisant JavaScript. Toutefois, a toujours consisté à créer un élément <style> en utilisant document.createElement('style'), puis accédez à sa propriété sheet pour obtenir une référence à l'infrastructure CSSStyleSheet Compute Engine. Cette méthode peut générer un code CSS en double ainsi que l'info-bulle correspondante, Le fait de joindre des fichiers entraîne l'apparition d'un flash de contenu sans style, qu'il y ait gonflé ou non. 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.

Schéma illustrant la préparation et l&#39;application du CSS

Des feuilles de style constructibles permettent de définir et de préparer des feuilles de style CSS partagées puis les appliquer à plusieurs racines fantômes ou au document facilement et sans duplication. Les mises à jour d'une feuille de style CSS 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 contructibles 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 à composants, les mises à jour du thème s'appliquant aux composants automatiquement. Il peut être utilisé pour distribuer des valeurs de propriété personnalisée CSS à des sous-arbres DOM spécifiques sans s'appuyer sur la cascade. Il peut même peut servir d'interface directe à l'analyseur CSS du navigateur. pour précharger les feuilles de style sans les injecter dans le DOM.

Création d'une feuille de style

Plutôt que d'introduire une nouvelle API pour y parvenir, la classe Constructable StyleSheets permet de créer des feuilles de style de façon impérative en invoquant constructeur CSSStyleSheet(). L'objet CSSStyleSheet obtenu possède deux de nouvelles méthodes qui facilitent l'ajout et la mise à jour de règles de feuille de style sans le déclenchement de Flash of Unstyled Content (FOUC). La replace() et replaceSync() remplacent la feuille de style par une chaîne CSS et replace(). renvoie une promesse. Dans les deux cas, les références aux feuilles de style externes pris en charge : 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 fonctionnalité introduite par les feuilles de style Constructable est adoptedStyleSheets disponible sur Shadow Racines et Documents. Cela nous permet d'appliquer explicitement les styles définis par un CSSStyleSheet à un sous-arbre DOM donné. Pour ce faire, nous définissons la propriété sur un tableau d'une ou plusieurs feuilles de style s'appliquent à 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 Constructable StyleSheets, 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 avons un nouveau API basée sur promesse pour charger des feuilles de style à partir d'une chaîne de source CSS qui utilise l'analyseur intégré au navigateur et la sémantique de chargement. Enfin, nous avons un de mise à jour des feuilles de style à toutes les utilisations d'une feuille de style, en simplifiant des choses comme les changements de thème et les préférences de couleurs.

Voir la démonstration

Perspectives d'avenir

Version initiale des feuilles de style constructibles fournies avec l'API décrit ici, mais des travaux sont en cours pour simplifier son utilisation. Il y a une proposition d'étendre le FrozenArray adoptedStyleSheets avec des méthodes dédiées pour insérer et en supprimant les feuilles de style, ce qui évite d'avoir à cloner le tableau de potentielles références de feuille de style en double.

En savoir plus