可建構的樣式表

可無縫重複使用的樣式。

可建構的樣式表是指在使用陰影 DOM 時,建立及發布可重複使用的樣式的方式。

瀏覽器支援

  • Chrome:73。
  • Edge:79。
  • Firefox:101。
  • Safari:16.4。

資料來源

您一向可以使用 JavaScript 建立樣式表。不過,這個程序一向是使用 document.createElement('style') 建立 <style> 元素,然後存取其工作表屬性,以取得對基礎 CSSStyleSheet 執行個體的參照。這個方法可能會產生重複的 CSS 程式碼及其伴隨的膨脹,且無論是否有膨脹,附加的動作都會導致未設定樣式的內容閃爍。CSSStyleSheet 介面是 CSS 表示法介面集合的根目錄,也稱為 CSSOM,可提供程式輔助方式來操作樣式表,並消除舊方法相關的問題。

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

可建構的樣式表可讓您定義及準備共用的 CSS 樣式,然後輕鬆地將這些樣式套用至多個 Shadow Roots 或文件,且不會重複。共用 CSSStyleSheet 的更新會套用至採用該 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..."

使用結構化樣式表

可建構的 StyleSheet 引進的第二項新功能是 adoptedStyleSheets 屬性,可用於 Shadow RootDocuments。這可讓我們明確地將 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 樹狀結構。我們推出了新的以承諾為基礎的 API,可從使用瀏覽器內建剖析器和載入語意的 CSS 來源字串載入 StyleSheet。最後,我們提供一種機制,可將樣式表更新套用至所有 StyleSheet 用途,簡化主題變更和顏色偏好設定等操作。

觀看示範影片

展望未來

初始版的 Constructable Stylesheets 已隨這裡所述的 API 一併發布,但我們正在努力讓使用方式更簡單。提案建議使用專用方法來插入及移除樣式表,以擴充 adoptedStyleSheets FrozenArray,這樣就不必複製陣列,也能避免產生重複的樣式表參照。

更多資訊