Các kiểu liền mạch có thể sử dụng lạ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 DOM bóng.
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 trang tính của phần tử đó để lấy thông tin 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à khối u tương đối,
và hành động đính kèm khách hàng tiềm năng vào một luồng nội dung chưa được định kiểu cho dù có
phổ biến hay không. Giao diện CSSStyleSheet là gốc của tập hợp các giao diện trình bày CSS có tên là CSSOM, cung cấp một phương pháp có lập trình để thao tác trên biểu định kiểu cũng như loại bỏ những 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. Nội dung cập nhật cho CSSStyleSheet dùng chung sẽ được áp dụng cho mọi gốc mà nó được áp dụng, đồng thời việc sử dụng 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 được thiết lập sẽ 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 này 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 được 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 đến các cây con DOM cụ thể mà không cần dựa vào phân tầng. Công cụ này thậm chí có thể được dùng làm giao diện trực tiếp tới 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 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 Trang tính định kiểu có thể tạo giúp bạn bắt buộc phải tạo biểu định kiểu 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ế 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, thông tin 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 sẽ 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 đã tạo
Tính năng mới thứ hai mà Trang tính định kiểu có thể tạo ra là một thuộc tính adoptedStyleSheets hiện có trên Gốc bóng và Tài liệu. Đ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 StyleSheet có thể tạo, các nhà phát triển web nay có một giải pháp rõ ràng để tạo CSS StyleSheet và áp dụng cho cây DOM. Chúng tôi có một API mới dựa trên Promise để tải Style Sheets từ một chuỗi nguồn CSS có 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.
Hướng đến tương lai
Phiên bản đầu tiên của Biểu định kiểu có thể tạo đi kèm với API được mô tả tại đây, nhưng vẫn đang trong quá trình cải thiện để 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. Việc này sẽ giúp bạn không cần phải sao chép mảng và tránh các tệp tham chiếu có thể trùng lặp về biểu định kiểu.