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

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

Jason Miller

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

Bạn luôn có thể tạo các tệp 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 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 cơ bản. Phương thức này có thể tạo ra mã CSS trùng lặp và sự phồng to đi kèm, đồng thời hành động đính kèm sẽ dẫn đến một tia chớp của nội dung chưa được tạo kiểu cho dù có phồng to hay không. Giao diện CSSStyleSheet là gốc của một tập hợp các giao diện trình bày CSS được gọi là CSSOM, cung cấp một cách lập trình để thao tác với các tệp định kiểu cũng như loại bỏ các vấn đề liên quan đến phương thức cũ.

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

Mối liên kết do Trang tí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 lớp này để cung cấp 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 sẽ 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ị Tài sản tuỳ chỉnh CSS cho các cây con DOM cụ thể mà không cần dựa vào loạt. Bạn thậm chí có thể dùng trình phân tích cú pháp CSS của trình duyệt làm giao diện trực tiếp, giúp dễ dàng tải trước các tệp định kiểu mà không cần chèn các tệp đó 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 Constructable Stylesheets (Bảng kiểu có thể tạo) cho phép tạo bảng 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ó 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 cần kích hoạt Flash của nội dung không định kiểu (FOUC). Phương thức replace() và replaceSync() đều thay thế tệp kiểu bằng một chuỗi CSS và replace() trả về một Lời hứa. Trong cả hai trường hợp, các tệp tham chiếu của bảng đị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 các tệp định kiểu được tạo

Tính năng mới thứ hai do StyleSheets có thể tạo ra 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 tôi á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 việc nà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 StyleSheets có thể tạo, nhà phát triển web hiện có một giải pháp rõ ràng để tạo StyleSheets CSS và áp dụng các StyleSheets đó cho cây DOM. Chúng tôi có một API mới dựa trên Lời hứa để tải StyleSheets 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 tôi có cơ chế áp dụng nội dung cập nhật biểu định kiểu cho mọi trường hợp sử dụng StyleSheet, giúp đơn giản hoá những thay đổi như thay đổi về 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 Trang tính kiểu có thể tạo được vận chuyển bằng 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. Bạn có thể dùng một đề xuất để mở rộng FrozenArray adoptedStyleSheets bằng các phương thức chuyên dụng để chèn và xoá biểu định kiểu. Việc này sẽ giúp bạn không cần phải sao chép mảng và tránh những trường hợp tham chiếu đến biểu định kiểu trùng lặp có thể xảy ra.

Thông tin khác

• Trạng thái của Nền tảng Chrome
• Ví dụ
• API
• Người giải thích
• Ý định triển khai
• Ý định vận chuyển
• Bài diễn thuyết