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

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

Jason Miller

Biểu định kiểu có thể tạo là để tạo và phân phối các kiểu có thể sử dụng lại khi sử dụng Bóng Mô hình đối tượng tài liệu (DOM).

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

Biểu định kiểu có thể tạo giúp bạn có thể xác định và chuẩn bị CSS dùng chung rồi á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. Áp dụng nội dung cập nhật cho CSSStyleSheet dùng chung tất cả những gốc rễ mà nó đã được áp dụng và áp dụng một biểu định kiểu diễn ra nhanh và đồng bộ sau khi trang tính đã được tải.

Việc liên kết được thiết lập bởi Biểu định kiểu có thể tạo sẽ phù hợp với số lượng ứng dụng khác nhau. Dữ liệu này có thể được dùng để cung cấp một chủ đề tập trung được nhiều thành phần sử dụng: giao diện có thể là thực thể CSSStyleSheet được truyền đến các thành phần, cùng với thông tin cập nhật cho chủ đề được truyền đến các thành phần tự động. Có thể dùng để phân phối CSS Custom Giá trị của thuộc tính đối với các cây con DOM cụ thể mà không cần dựa vào thác 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 một tệp định kiểu

Thay vì giới thiệu một API mới để thực hiện việc này, API Conbuildable StyleSheets giúp bạn có thể tạo biểu định kiểu 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 các phương thức mới giúp việc thêm và cập nhật quy tắc biểu định kiểu an toàn hơn mà không cần kích hoạt Flash chưa được định kiểu Nội dung (FOUC). Chiến lược phát hành đĩa đơn replace() và replaceSync() đều thay thế biểu định kiểu bằng một chuỗi CSS, đồng thời replace() sẽ trả về một lời hứa. Trong cả hai trường hợp, các thông tin tham chiếu đến biểu định kiểu bên ngoài đều không được đượ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 các tệp định kiểu được tạo

Tính năng mới thứ hai mà StyleSheet có thể tạo ra là một adoptedStyleSheets thuộc tính có sẵn trên Shadow Gốc và Tài liệu. Chiến dịch 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 DOM nhất định cây con. Để 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 thành sẽ á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 ra, các nhà phát triển web hiện 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 dựa trên lời hứa để tải StyleSheet 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à tải ngữ nghĩa. Cuối cùng, chúng ta có một cơ chế để áp dụng các bản cập nhật của tệp định kiểu cho tất cả các trường hợp sử dụng của 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 Biểu định kiểu có thể tạo được gửi cùng với API được mô tả ở đây, tuy nhiên vẫn đang trong quá trình cải tiến để mọi thứ trở nên dễ sử dụng hơn. Có 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á các kiểu trang, giúp bạn không cần phải sao chép mảng và tránh các tham chiếu kiểu trang 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
• Người giải thích
• Ý định triển khai
• Ý định gửi hàng
• Bài diễn thuyết