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

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

Jason Miller

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 dùng Shadow DOM.

Browser Support

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

Source

Bạn luôn có thể tạo biểu định kiểu bằng JavaScript. Tuy nhiên, quy trình này trước đây là tạo một phần tử <style> bằng cách sử dụng document.createElement('style'), sau đó truy cập vào thuộc tính trang tính của phần tử đó để lấy tham chiếu đến thực thể CSSStyleSheet bên dưới. Phương thức này có thể tạo ra mã CSS trùng lặp và làm tăng kích thước tệp, đồng thời việc đính kèm sẽ dẫn đến việc nội dung không được định kiểu trong giây lát, bất kể có tăng kích thước tệp hay không. Giao diện CSSStyleSheet là gốc của một tập hợp các giao diện biểu diễn CSS được gọi là CSSOM, cung cấp một cách có lập trình để thao tác với các 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 quy trình từ CSS được tạo đến Tạo thực thể đến Ứng dụng.

Biểu định kiểu có thể tạo giúp bạn 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 Gốc bóng hoặc Tài liệu một cách dễ dàng và không bị trùng lặp. Nội dung cập nhật cho CSSStyleSheet dùng chung được áp dụng cho tất cả các gốc mà nó được áp dụng và việc áp dụng biểu định kiểu sẽ diễn ra nhanh chóng và đồng bộ sau khi biểu định kiểu được tải.

Mối liên kết do Biểu định kiểu có thể tạo thiết lập phù hợp với một số ứng dụng khác nhau. Bạn có thể dùng tính năng 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 các bản cập nhật cho giao diện tự động truyền đến các thành phần. Bạn có thể dùng thuộc tính này để phân phối các giá trị Thuộc tính tuỳ chỉnh CSS cho các cây con DOM cụ thể mà không cần dựa vào thác. Thậm chí, bạn có thể dùng thẻ này 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 dễ dàng tải trước biểu định kiểu mà không cần chèn chúng 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 Biểu định kiểu có thể tạo giúp bạn có thể tạo biểu định kiểu một cách bắt buộc bằng cách gọi hàm khởi tạo CSSStyleSheet(). Đối tượng CSSStyleSheet thu được có hai phương thức mới giúp 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 kích hoạt Flash of Unstyled Content (FOUC). Cả hai 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 đều bị bỏ qua và sẽ tạo ra 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 do Biểu định kiểu có thể tạo ra là thuộc tính adoptedStyleSheets có trên Shadow Roots và Documents. Đ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. Để làm như vậy, 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);

Kết hợp kiến thức đã học

Với Biểu định kiểu có thể tạo, nhà phát triển web hiện có một giải pháp rõ ràng để tạo Biểu định kiểu CSS và áp dụng chúng cho cây DOM. Chúng tôi có một API mới dựa trên Promise để tải Biểu định kiểu từ một chuỗi nguồn CSS sử dụng trình phân tích cú pháp tích hợp sẵn của trình duyệt và ngữ nghĩa tải. Cuối cùng, chúng ta có một cơ chế để áp dụng các bản cập nhật biểu định kiểu cho tất cả các trường hợp sử dụng StyleSheet, giúp đơn giản hoá những việc như thay đổi giao diện và lựa chọn ưu tiên về màu sắc.

Xem bản minh hoạ

Hướng đến tương lai

Phiên bản ban đầu của Biểu định kiểu có thể tạo được đi kèm với API được mô tả tại đây, nhưng chúng tôi đang nỗ lực để giúp mọi thứ dễ sử dụng hơn. Có một đề xuất mở rộng adoptedStyleSheets FrozenArray bằng các phương thức chuyên dụng để chèn và xoá biểu định kiểu, giúp loại bỏ nhu cầu sao chép mảng và tránh các tham chiếu biểu định kiểu trùng lặp tiềm ẩn.

Thông tin khác