Fogli di stile costruibili

Stili riutilizzabili senza problemi.

Jason Miller

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

È sempre stato possibile creare fogli di stile utilizzando JavaScript. Tuttavia, il processo è sempre stato quello di creare un elemento <style> utilizzando document.createElement('style') e poi accedere alla relativa proprietà del foglio per ottenere un riferimento alle informazioni CSSStyleSheet in esecuzione in un'istanza Compute Engine. Questo metodo può generare un codice CSS duplicato e il relativo gonfiore, e l'atto di aggiungere contenuti fa apparire un lampo di contenuti senza stile se c'è o meno. L'interfaccia CSSStyleSheet è l'elemento principale di una raccolta di CSS di rappresentazione, dette anche CSSOM offrendo un modo programmatico per manipolare i fogli di stile, oltre a eliminare il problemi associati al metodo precedente.

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

L'associazione impostata dai Fogli di stile costruibili si presta bene di applicazioni diverse. Può essere utilizzato per fornire un tema centralizzato usato da molti componenti: il tema può essere un'istanza CSSStyleSheet passata a componenti, con aggiornamenti del tema che si propagano ai componenti automaticamente. Può essere usato per distribuire CSS personalizzati Valori della proprietà su sottoalberi DOM specifici senza fare affidamento cascade. Può persino essere utilizzata come interfaccia diretta con l'analizzatore sintattico CSS del browser, semplificando vengono precaricati i fogli di stile senza inserirli nel DOM.

Creazione di un foglio di stile

Anziché introdurre una nuova API per ottenere questo risultato, la tabella Buildable StyleSheets rende possibile 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 l'attivazione di Flash senza stile Contenuti (FOUC). La replace() e replaceSync() sostituiscono il foglio di stile con una stringa di CSS e replace() restituisce una promessa. In entrambi i casi, i riferimenti a fogli di stile esterni non sono supportati: eventuali regole @import vengono ignorate e viene visualizzato 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 Buildable Style Sheets è un'interfaccia adoptedStyleSheets proprietà disponibile su Shadow Radici e Documenti. 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 si applicano 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 ora a disposizione una soluzione esplicita per creare fogli di stile CSS e applicarli alle strutture DOM. Abbiamo una nuova API basata su Promise per il caricamento di Fogli di stile da una stringa di origine CSS che utilizza il parser integrato del browser e il caricamento della semantica. Infine, abbiamo un meccanismo di applicazione degli aggiornamenti del foglio di stile a tutti gli utilizzi di StyleSheet, semplificare cose come le modifiche ai temi e le preferenze di colore.

Visualizza demo

Prospettive future

La versione iniziale dei fogli di stile costruibili forniti con l'API descritti qui, ma stiamo lavorando per renderli più facili da usare. C'è una proposta per estendere FrozenArray di adoptedStyleSheets con metodi dedicati per inserire e rimuovendo i fogli di stile, evitando così la necessità di clonare gli array ed evitando potenziali riferimenti duplicati a fogli di stile.

Ulteriori informazioni

• Stato della piattaforma Chrome
• Esempio
• API
• Spiegazione
• Intento di implementazione
• Intenzione di spedizione
• Discorso