Fogli di stile costruibili

Stili riutilizzabili senza interruzioni.

Jason Miller

I fogli di stile costruibili sono un modo per creare e distribuire stili riutilizzabili quando si utilizza Shadow DOM.

Browser Support

• 73
• 79
• 101
• 16.4

Source

È sempre stato possibile creare fogli di stile utilizzando JavaScript. Tuttavia, storicamente il processo consisteva nel creare un elemento <style> utilizzando document.createElement('style') e poi accedere alla relativa proprietà sheet per ottenere un riferimento all'istanza CSSStyleSheet sottostante. Questo metodo può produrre codice CSS duplicato e il relativo aumento di dimensioni, e l'atto di collegamento porta a un flash di contenuti non formattati, indipendentemente dal fatto che ci sia un aumento di dimensioni o meno. L'interfaccia CSSStyleSheet è la radice di una raccolta di interfacce di rappresentazione CSS denominate CSSOM, che offre un modo programmatico per manipolare i fogli di stile ed eliminare i problemi associati al vecchio metodo.

I fogli di stile costruibili consentono di definire e preparare stili CSS condivisi, per poi applicarli facilmente e senza duplicazioni a più Shadow Root o al documento. Gli aggiornamenti a un CSSStyleSheet condiviso vengono applicati a tutte le radici in cui è stato adottato e l'adozione di un foglio di stile è rapida e sincrona una volta caricato il foglio.

L'associazione configurata da Constructable Stylesheets si presta bene a una serie di applicazioni diverse. Può essere utilizzato per fornire un tema centralizzato utilizzato da molti componenti: il tema può essere un'istanza CSSStyleSheet passata ai componenti, con gli aggiornamenti del tema che si propagano automaticamente ai componenti. Può essere utilizzato per distribuire i valori delle proprietà personalizzate CSS a sottoalberi DOM specifici senza fare affidamento sulla cascata. Può anche essere utilizzato come interfaccia diretta per l'analizzatore CSS del browser, semplificando il precaricamento dei fogli di stile senza inserirli nel DOM.

Creazione di un foglio di stile

Anziché introdurre una nuova API per raggiungere questo obiettivo, la specifica Constructable StyleSheets consente di creare fogli di stile in modo imperativo richiamando il costruttore CSSStyleSheet(). L'oggetto CSSStyleSheet risultante ha due nuovi metodi che rendono più sicuro l'aggiunta e l'aggiornamento delle regole del foglio di stile senza attivare il Flash of Unstyled Content (FOUC). I metodi replace() e replaceSync() sostituiscono entrambi il foglio di stile con una stringa di CSS e replace() restituisce una Promise. In entrambi i casi, i riferimenti a fogli di stile esterni non sono supportati: le regole @import vengono ignorate e generano un avviso.

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

Nelle versioni precedenti della specifica, replace() consentiva le regole @import e restituiva una Promise che si risolveva al termine del caricamento. A partire da Chrome 84, questa funzionalità è stata rimossa dalla specifica e le regole @import vengono ignorate con un avviso.

Utilizzo di fogli di stile costruiti

La seconda nuova funzionalità introdotta da Constructable StyleSheets è una proprietà adoptedStyleSheets disponibile su Shadow Roots e Documents. In questo modo, possiamo applicare esplicitamente gli stili definiti da un CSSStyleSheet a un determinato sottoalbero DOM. Per farlo, impostiamo la proprietà su un array di uno o più fogli di stile da applicare a quell'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);

Nelle versioni precedenti della specifica, adoptedStyleSheets era implementato come un array bloccato, il che significa che le mutazioni in loco come push() generavano un'eccezione. L'aggiunta di un nuovo foglio di stile richiedeva la ridefinizione dell'array: `document.adoptedStyleSheets = [...document.adoptedStyleSheets, newSheet] Questo non è più il caso, poiché la specifica è stata aggiornata per consentire le mutazioni degli array.

Elaborazione della risposta…

Con i fogli di stile costruibili, gli sviluppatori web ora hanno una soluzione esplicita per creare fogli di stile CSS e applicarli agli alberi DOM. Abbiamo una nuova API basata su Promise per il caricamento di fogli di stile da una stringa di origine CSS che utilizza l'analizzatore sintattico integrato del browser e la semantica di caricamento. Infine, abbiamo un meccanismo per applicare gli aggiornamenti dei fogli di stile a tutti gli utilizzi di un foglio di stile, semplificando operazioni come le modifiche ai temi e le preferenze di colore.

Visualizza demo

Prospettive future

La versione iniziale di Constructable Stylesheets è stata fornita con l'API descritta qui, ma sono in corso lavori per semplificarne l'utilizzo. Esiste una proposta per estendere adoptedStyleSheets FrozenArray con metodi dedicati per l'inserimento e la rimozione di fogli di stile, il che eliminerebbe la necessità di clonare gli array ed eviterebbe potenziali riferimenti duplicati ai fogli di stile.

Ulteriori informazioni

• Chrome Platform Status
• Esempio
• API
• Divulgatore
• Intent to Implement
• Intent to Ship
• Discourse