Fogli di stile costruibili

Stili riutilizzabili senza interruzioni.

Jason Miller

I fogli di stile costruibili consentono di creare e distribuire stili riutilizzabili quando si utilizza ShadowDOM.

Supporto dei browser

  • 73
  • 79
  • 101
  • 16.4

Origine

È sempre stato possibile creare fogli di stile utilizzando JavaScript. Tuttavia, storicamente il processo prevedeva la creazione di un elemento <style> utilizzando document.createElement('style') per poi accedere alla relativa proprietà del foglio per ottenere un riferimento all'istanza CSSStyleSheet sottostante. Questo metodo può generare un codice CSS duplicato e il relativo gonfiore e l'atto di attaccare genera un lampo di contenuti senza stile che si tratti di gonfiore o meno. L'interfaccia CSSStyleSheet è la base di una raccolta di interfacce di rappresentazione CSS denominate CSSOM, che offrono un modo programmatico per manipolare i fogli di stile, nonché per eliminare i problemi associati al metodo precedente.

Diagramma che mostra la preparazione e l&#39;applicazione del CSS.

I fogli di stile costruibili consentono di definire e preparare gli stili CSS condivisi, quindi di applicare questi stili a più radici ombre o al documento in modo semplice e senza duplicati. Gli aggiornamenti a un file CSSStyleSheet condiviso vengono applicati a tutte le directory principali in cui è stato adottato e l'adozione di un foglio di stile è veloce e sincrono una volta caricato il foglio.

L'associazione impostata 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 aggiornamenti del tema che si propagano automaticamente ai componenti. Può essere utilizzata per distribuire i valori delle proprietà personalizzate CSS a sottoalberi DOM specifici senza fare affidamento sulla cascade. Può essere utilizzato anche come interfaccia diretta con l'analizzatore sintattico CSS del browser, semplificando il precaricamento dei fogli di stile senza inserirli nel DOM.

Creazione di un foglio di stile

Invece di introdurre una nuova API per ottenere questo risultato, la specifica marcabile Fogli di stile consente di creare fogli di stile in modo imperativo richiamando il costruttore CSSStyleSheet(). L'oggetto CSSStyleSheet risultante offre due nuovi metodi che rendono più sicuro l'aggiunta e l'aggiornamento delle regole dei fogli di stile senza attivare 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 promessa. In entrambi i casi, i riferimenti ai fogli di stile esterni non sono supportati: eventuali 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..."

Utilizzo dei fogli di stile creati

La seconda nuova funzionalità introdotta da structable Style Sheets è una proprietà adoptedStyleSheets disponibile in Shadow Roots e Documenti. Questo consente di applicare in modo esplicito gli stili definiti da un elemento 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);

Riassumendo

Con structable Style Sheets, gli sviluppatori web hanno a disposizione una soluzione esplicita per creare fogli di stile CSS e applicarli alle strutture DOM. Disponiamo di una nuova API basata su Promise per caricare Fogli di stile da una stringa di origine CSS che utilizza l'analizzatore sintattico integrato del browser e il caricamento della semantica. Infine, è disponibile un meccanismo per applicare gli aggiornamenti dei fogli di stile a tutti gli utilizzi di StyleSheet, semplificando aspetti come le modifiche ai temi e alle preferenze di colore.

Visualizza demo

Prospettive future

La versione iniziale dei fogli di stile costruibili viene fornita con l'API descritta qui, ma stiamo lavorando per rendere tutto più facile da usare. È disponibile una proposta per estendere il FrozenArray di adoptedStyleSheets con metodi dedicati per inserire e rimuovere i fogli di stile, in modo da evitare la necessità di clonare gli array ed evitare potenziali riferimenti ai fogli di stile duplicati.

Ulteriori informazioni