Styles réutilisables fluides
Les feuilles de style constructibles permettent de créer et de distribuer des styles réutilisables lorsque vous utilisez la fonction Shadow DOM.
Il a toujours été possible de créer des feuilles de style en utilisant JavaScript. Toutefois, le processus a toujours consisté à créer un élément <style> à l'aide de document.createElement('style'), puis à accéder à sa propriété "sheet" pour obtenir une référence à l'instance CSSStyleSheet sous-jacente. Cette méthode peut générer un code CSS en double ainsi que son élément volumineux. L'association génère un flash de contenu sans style, qu'il soit 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 des 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 à plusieurs racines fantômes ou au document, facilement et sans dupliquer. 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 créée par les feuilles de style constructibles est parfaitement adaptée à de nombreuses applications. Il permet de 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 dépendre de la cascade. Il peut même servir d'interface directe à l'analyseur CSS du navigateur, ce qui facilite le préchargement des 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 effectuer cette opération, 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 en toute sécurité sans déclencher Flash of Unstyled Content (FOUC).
Les méthodes replace() et replaceSync() remplacent la feuille de style par une chaîne de style CSS, et replace() renvoie une promesse. Dans les deux cas, les références aux feuilles 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 Constructable StyleSheets est une propriété adoptedStyleSheets disponible sur Shadow roots et Documents. Cela nous permet d'appliquer explicitement les styles définis par un élément 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 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 disposons d'une nouvelle API basée sur Promise permettant de charger des feuilles de style StyleSheets à partir d'une chaîne de source CSS qui utilise l'analyseur intégré et la sémantique de chargement intégrés au navigateur. Enfin, nous disposons d'un mécanisme permettant d'appliquer des mises à jour de feuille de style à toutes les utilisations d'une feuille de style, ce qui simplifie des éléments tels que les changements de thème et les préférences de couleurs.
Perspectives d'avenir
La version initiale des feuilles de style constructibles est fournie avec l'API décrite ici, mais des travaux sont en cours pour simplifier leur utilisation. Il existe une proposition d'étendre la fonction FrozenArray adoptedStyleSheets avec des méthodes dédiées pour insérer et supprimer des feuilles de style, ce qui éviterait de devoir cloner un tableau et éviterait d'éventuelles références de feuille de style en double.