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.

È sempre stato possibile creare fogli di stile utilizzando JavaScript. Tuttavia, storicamente la procedura prevedeva la creazione di un elemento <style> utilizzando document.createElement('style'), quindi l'accesso alla relativa proprietà sheet per ottenere un riferimento all'istanza CSSStyleSheet sottostante. Questo metodo può produrre codice CSS duplicato e il relativo aumento delle dimensioni, mentre l'atto di allegare comporta un flash di contenuti privi di stile, indipendentemente dal fatto che le dimensioni siano aumentate 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, quindi di applicarli facilmente e senza duplicazioni a più radici Shadow 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 dai fogli di stile costruibili 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 sottostrutture DOM specifiche senza fare affidamento sulla cascata. Può anche essere utilizzato come interfaccia diretta con il parser CSS del browser, semplificando il precaricamento dei fogli di stile senza inserirli nel DOM.

Costruire un foglio di stile

Anziché introdurre una nuova API per eseguire questa operazione, la specifica dei fogli di stile costruibili 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 aggiungere e aggiornare le regole dei fogli di stile senza attivare il flash di contenuti privi di stile (FOUC). I metodi replace() e replaceSync() sostituiscono entrambi il foglio di stile con una stringa di CSS e replace() restituisce una promessa. In entrambi i casi, i riferimenti ai fogli di stile esterni non sono supportati: tutte 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..."

Utilizzare i fogli di stile costruiti

La seconda nuova funzionalità introdotta dai fogli di stile costruibili è una adoptedStyleSheets disponibile su radici Shadow e documenti. In questo modo possiamo applicare in modo esplicito gli stili definiti da un CSSStyleSheet a una determinata sottostruttura DOM. Per farlo, impostiamo la proprietà su un array di uno o più fogli di stile da applicare all'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);

Elaborazione della risposta…

Con i fogli di stile costruibili, gli sviluppatori web ora hanno una soluzione esplicita per creare CSSStyleSheet e applicarli agli alberi DOM. Abbiamo una nuova API basata su promesse per caricare i fogli di stile da una stringa di origine CSS che utilizza il parser e la semantica di caricamento integrati del browser. 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 del tema e le preferenze di colore.

Visualizza la demo

Prospettive future

La versione iniziale dei fogli di stile costruibili è stata fornita con l'API descritta qui, ma è in corso la semplificazione dell'utilizzo. È stata proposta l'estensione di adoptedStyleSheets FrozenArray con metodi dedicati per inserire e rimuovere i fogli di stile, il che eliminerebbe la necessità di clonare gli array ed evitare potenziali riferimenti duplicati ai fogli di stile.

Ulteriori informazioni

• Stato della piattaforma Chrome
• Esempio
• API
• Video esplicativo
• Intenzione di implementare
• Intenzione di spedire
• Discorso