可建構的樣式表

流暢的重複使用風格

Jason Miller

使用陰影 DOM 時，可建構的樣式表可用來建立及發布可重複使用的樣式。

瀏覽器支援

  • 73
  • 79
  • 101
  • 16.4

來源

您隨時可以使用 JavaScript 建立樣式表。不過，該程序一直都是使用 document.createElement('style') 建立 <style> 元素，然後存取其工作表屬性，以取得基礎 CSSStyleSheet 例項的參照。這個方法可能會產生重複的 CSS 程式碼及其總管，而附加程式碼會導致未設定樣式的內容閃爍 (無論內容是否膨脹)。CSSStyleSheet 介面是 CSS 表示法介面集合的根 (稱為 CSSOM)，可讓您以程式輔助方式操控樣式表，並消除與舊方法相關的問題。

顯示 CSS 準備及應用方式的圖表。

可建構的樣式表可讓您定義及準備共用的 CSS 樣式，然後將這些樣式輕鬆套用至多個陰影根層級或文件，且不會重複。共用 CSSStyleSheet 的更新會套用至已採用的所有根層級，並在工作表載入後，快速並同步採用樣式表。

可建構樣式表所設定的關聯，非常適合多種不同的應用程式。這可用來提供由多個元件使用的集中式主題：主題可以是 CSSStyleSheet 例項，並傳遞至元件，而主題更新會自動傳播至元件。這項功能可用來將 CSS 自訂屬性值發布至特定 DOM 子樹狀結構，而不需參考串聯。它甚至可以當做直接存取瀏覽器 CSS 剖析器的介面，可讓您輕鬆預先載入樣式表，而不必將其插入 DOM。

建構樣式表

與其導入新的 API 來完成此作業，不如導入可建構的樣式表規格，可讓您叫用 CSSStyleSheet() 建構函式以強制建立樣式表。產生的 CSSStyleSheet 物件提供兩種新方法，可在不觸發 Flash of Unstyled Content (FOUC) 的情況下，更安全地新增及更新樣式表規則。replace() 和 replaceSync() 方法都會將樣式表替換成 CSS 字串，而 replace() 則會傳回 Promise。這兩種情況都不支援外部樣式表參照，系統會忽略所有 @import 規則並產生警告。

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

使用建構的樣式表

建構樣式工作表導入的第二項新功能是「採用樣式工作表」adoptedStyleSheets屬性，可用於陰影根層級和文件。如此一來，我們就能將 CSSStyleSheet 定義的樣式明確套用至指定的 DOM 子樹狀結構。為此，我們會將屬性設為一或多個樣式表的陣列，以便套用至該元素。

// 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);

平台比一比

透過可建構的 StyleSheets，網頁開發人員現在可以使用明確的解決方案，建立 CSS StyleSheets 並應用到 DOM 樹狀結構。我們推出了以 Promise 為基礎的新 API，從使用瀏覽器的內建剖析器和載入語意的 CSS 來源字串載入 StyleSheet。最後，我們有一個機制可將樣式表更新套用至 StyleSheet 的所有使用情況，藉此簡化主題變更和顏色偏好設定等作業。

觀看示範

展望未來

「可建構樣式表」的初始版本，與本文所述的 API 一併提供，但仍有改善中可使用的功能。這裡有提案，可利用用於插入及移除樣式表的專屬方法擴充 adoptedStyleSheets FrozenArray，這樣會阻礙系統複製陣列，並避免可能重複的樣式表參照。

更多資訊