可建構的樣式表

流暢的重複使用風格

Jason Miller

可建構的樣式表是 如何在使用 Shadow 時，建立及發布可重複使用的樣式 DOM。

瀏覽器支援

  • Chrome：73.
  • Edge：79。
  • Firefox：101。
  • Safari：16.4。

資料來源

您隨時可以使用 JavaScript 建立樣式表。不過，這個程序一向是使用 document.createElement('style') 建立 <style> 元素，然後存取其工作表屬性，以取得對基礎 CSSStyleSheet 執行個體的參照。這個方法可能會產生重複的 CSS 程式碼及其總管 所謂附加行為，會使無樣式的內容迅速載入。 才剛好CSSStyleSheet 介面是 CSS 集合的根 這類介面稱為 CSSOM、 提供程式輔助方式操控樣式表 問題與舊方法有關的問題

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

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

可建構樣式表設定的關聯非常適合用於多種不同的應用程式。可用於提供集中式主題 多個元件所使用的 3 個元件：主題可以傳遞至 CSSStyleSheet 例項， 更新主題，且主題的更新會傳播至元件 。可用於發布 CSS 自訂廣告 屬性值設為 特定 DOM 子樹狀結構，而不必依賴 cascade。甚至 可做為直接存取瀏覽器 CSS 剖析器的介面 預先載入樣式表，而不必將其插入 DOM。

建構樣式表

與其導入新的 API 來達成這個目的，建構 able StyleSheets 因此您可以透過叫用 CSSStyleSheet() 建構函式。產生的 CSSStyleSheet 物件有兩個 新方法，讓您能更安全地新增及更新樣式表規則 觸發「未設定樣式的 Flash」 內容 (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);

全面整合使用

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

觀看示範

展望未來

API 隨附的可建構樣式表的初始版本 但仍有許多功能可以輕鬆使用還有 一個提案，讓 adoptedStyleSheets FrozenArray 具有插入和插入的專屬方法 移除樣式表，這會減少需要複製陣列以及避免 可能重複的樣式表參照。

更多資訊