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

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

Jason Miller

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

Bạn luôn có thể tạo biểu định kiểu bằng JavaScript. Tuy nhiên, trước đây, quy trình nà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 sheet của phần tử đó để lấy một tham chiếu đến thực thể CSSStyleSheet cơ bản. Phương thức này có thể tạo ra mã CSS trùng lặp và sự phình to đi kèm, đồng thời hành động đính kèm sẽ dẫn đến việc nội dung không có kiểu xuất hiện dù có sự phình to 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 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ũ.

Constructable Stylesheets (Bảng đị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 đó dễ dàng áp dụng các kiểu đó cho nhiều Shadow Root (Gốc bóng) hoặc Document (Tài liệu) mà không bị trùng lặp. Các bản cập nhật cho CSSStyleSheet dùng chung sẽ được áp dụng cho tất cả các gốc mà nó đã được áp dụng và việc áp dụng một biểu định kiểu 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 Constructable Stylesheets 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 mà 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ị CSS Custom Property đến các cây con DOM cụ thể mà không cần dựa vào cascade (tầng). Bạn thậm chí có thể dùng API 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 bạn dễ dàng tải trước cá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, quy cách Constructable StyleSheets (Bảng định kiểu có thể tạo) giúp bạn có thể tạo các bảng đị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 kết quả có 2 phương thức mới giúp việc thêm và cập nhật các quy tắc biểu định kiểu trở nên an toàn hơn mà không kích hoạt Flash of Unstyled Content (FOUC) (Nội dung nhấp nháy không có kiểu). 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 tham chiếu đến 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 một 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 Constructable StyleSheets giới thiệu 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 Constructable StyleSheets, giờ đây, nhà phát triển web có một giải pháp rõ ràng để tạo CSS StyleSheets và áp dụng chúng cho các 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 và ngữ nghĩa tải sẵn có của trình duyệt. 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 cách sử dụng StyleSheet, đơ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 Constructable Stylesheets được phân phối cùng với API được mô tả tại đây, nhưng chúng tôi đang nỗ lực để giúp bạn dễ dàng 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. Điều này sẽ loại bỏ nhu cầu sao chép mảng và tránh các tệp tham chiếu biểu định kiểu trùng lặp tiềm ẩn.

Thông tin khác

• Trạng thái của nền tảng Chrome
• Ví dụ
• API
• Video giải thích
• Ý định triển khai
• Ý định vận chuyển
• Discourse