Biểu định kiểu có thể tạo

Các kiểu liền mạch có thể sử dụng lại.

[Tên người]

Biểu định kiểu có thể tạo là một cách để tạo và phân phối các kiểu có thể sử dụng lại khi sử dụng Shadow DOM.

Hỗ trợ trình duyệt

  • 73
  • 79
  • 101
  • 16,4

Nguồn

Bạn luôn có thể tạo biểu định kiểu bằng JavaScript. Tuy nhiên, quy trình trước đây là tạo một phần tử <style> bằng document.createElement('style'), sau đó truy cập vào thuộc tính trang tính của phần tử đó để lấy thông tin tham chiếu đến thực thể cơ bản của CSSStyleSheet. Phương thức này có thể tạo ra mã CSS trùng lặp và tình trạng phình lên của hệ thống trả lời, và hành động đính kèm dẫn đến một thông báo flash về nội dung không theo kiểu cho dù có cồng kềnh hay không. Giao diện CSSStyleSheet là gốc của tập hợp các giao diện biểu thị CSS được gọi là CSSOM, cung cấp một cách thức có lập trình để thao tác với biểu định kiểu cũng như loại bỏ các vấn đề liên quan đến phương thức cũ.

Sơ đồ cho thấy việc chuẩn bị và áp dụng CSS.

Biểu định kiểu có thể tạo giúp bạn dễ dàng xác định và chuẩn bị các kiểu CSS dùng chung, sau đó áp dụng các kiểu đó cho nhiều Shadow Roots hoặc Tài liệu một cách dễ dàng mà không bị trùng lặp. Nội dung cập nhật cho một CSSStyleSheet dùng chung sẽ được áp dụng cho mọi gốc mà nó được sử dụng. Đồng thời, việc sử dụng một biểu định kiểu sẽ diễn ra nhanh chóng và đồng bộ sau khi trang tính được tải.

Việc liên kết do Biểu định kiểu có thể tạo thiết lập rất phù hợp với nhiều ứng dụng. Bạn có thể dùng giao diện này để cung cấp một giao diện tập trung được nhiều thành phần sử dụng: giao diện có thể là một thực thể CSSStyleSheet được truyền đến các thành phần, với nội dung cập nhật cho giao diện tự động lan truyền đến các thành phần. Bạn có thể dùng công cụ này để phân phối các giá trị Thuộc tính tuỳ chỉnh của CSS cho các cây con DOM cụ thể mà không cần dựa vào tầng. Tệp này thậm chí có thể được dùng làm giao diện trực tiếp cho trình phân tích cú pháp CSS của trình duyệt, giúp bạn dễ dàng tải trước biểu định kiểu mà không cần chèn các biểu định kiểu đó vào DOM.

Tạo biểu định kiểu

Thay vì giới thiệu một API mới để thực hiện việc này, thông số kỹ thuật structable Style gấp (Trang tính kiểu có thể tạo) giúp bạn nhất thiết tạo biểu định kiểu bằng cách gọi hàm khởi tạo CSSStyleSheet(). Đối tượng CSSStyleSheet có hai phương thức mới giúp bạn thêm và cập nhật các quy tắc biểu định kiểu một cách an toàn hơn mà không cần kích hoạt Đèn flash của nội dung chưa định kiểu (FOUC). Cả phương thức replace() và replaceSync() đều thay thế biểu định kiểu bằng một chuỗi CSS, và replace() trả về một Promise. Trong cả hai trường hợp, các tệp tham chiếu biểu định kiểu bên ngoài đều không được hỗ trợ – mọi quy tắc @import sẽ bị bỏ qua và sẽ tạo cảnh báo.

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

Sử dụng biểu định kiểu được tạo

Tính năng mới thứ hai mà structable Style Tin giới thiệu là một thuộc tính adoptedStyleSheets có trên Shadow Roots và Documents (Tài liệu). Điều này cho phép chúng ta áp dụng rõ ràng các kiểu do CSSStyleSheet xác định cho một cây con DOM nhất định. Để thực hiện, chúng ta đặt thuộc tính thành một mảng gồm một hoặc nhiều biểu định kiểu để áp dụng cho phần tử đó.

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

Putting it all together

With Constructable StyleSheets, web developers now have an explicit solution for creating CSS StyleSheets and applying them to DOM trees. We have a new Promise-based API for loading StyleSheets from a string of CSS source that uses the browser's built-in parser and loading semantics. Finally, we have a mechanism for applying stylesheet updates to all usages of a StyleSheet, simplifying things like theme changes and color preferences.

View Demo

Looking ahead

The initial version of Constructable Stylesheets shipped with the API described here, but there's work underway to make things easier to use. There's a proposal to extend the adoptedStyleSheets FrozenArray with dedicated methods for inserting and removing stylesheets, which would obviate the need for array cloning and avoid potential duplicate stylesheet references.

More information