Sử dụng Tập lệnh mô-đun CSS để nhập biểu định kiểu

Tìm hiểu cách sử dụng tập lệnh mô-đun CSS để nhập các bảng định kiểu CSS bằng cú pháp tương tự như các mô-đun JavaScript.

Dan Clark

Với tính năng tập lệnh mô-đun CSS mới, bạn có thể tải trang kiểu CSS bằng câu lệnh import, giống như mô-đun JavaScript. Sau đó, bạn có thể áp dụng các trang kiểu cho tài liệu hoặc gốc bóng theo cách tương tự như các trang kiểu có thể tạo. Cách này có thể thuận tiện hơn và hiệu quả hơn so với các cách nhập và áp dụng CSS khác.

Hỗ trợ trình duyệt

Theo mặc định, các tập lệnh mô-đun CSS có trong Chrome và Edge phiên bản 93.

Tính năng hỗ trợ này chưa có trong Firefox và Safari. Bạn có thể theo dõi tiến trình triển khai tại lỗi Gecko và lỗi WebKit tương ứng.

Điều kiện tiên quyết

Sử dụng tập lệnh mô-đun CSS

Nhập tập lệnh mô-đun CSS và áp dụng tập lệnh đó cho một tài liệu hoặc gốc bóng như sau:

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Nội dung xuất mặc định của tập lệnh mô-đun CSS là một tệp phông chữ có thể tạo, trong đó nội dung là nội dung của tệp đã nhập. Giống như mọi kiểu trang tính có thể tạo khác, kiểu trang tính này được áp dụng cho tài liệu hoặc gốc bóng bằng cách sử dụng adoptedStyleSheets.

Không giống như các cách áp dụng CSS khác từ JavaScript, bạn không cần tạo phần tử <style> hoặc làm rối mã JavaScript của văn bản CSS.

Các mô-đun CSS cũng có một số lợi ích giống như các mô-đun JavaScript.

  • Loại bỏ trùng lặp: nếu cùng một tệp CSS được nhập từ nhiều vị trí trong một ứng dụng, thì tệp đó vẫn chỉ được tìm nạp, tạo bản sao và phân tích cú pháp một lần.
  • Thứ tự đánh giá nhất quán: khi đang chạy, JavaScript nhập có thể dựa vào bảng kiểu mà nó nhập đã được tìm nạp và phân tích cú pháp.
  • Bảo mật: các mô-đun được tìm nạp bằng CORS và sử dụng quy trình kiểm tra loại MIME nghiêm ngặt.

Nhập câu nhận định (có gì với "assert"?)

Phần assert { type: 'css' } của câu lệnh import là một xác nhận nhập. Đây là yêu cầu bắt buộc; nếu không, import sẽ được coi là một mô-đun JavaScript nhập thông thường và sẽ không thành công nếu tệp được nhập có loại MIME không phải JavaScript.

import sheet from './styles.css'; // Failed to load module script:
                                  // Expected a JavaScript module
                                  // script but the server responded
                                  // with a MIME type of "text/css".

Tệp kiểu được nhập động

Bạn cũng có thể nhập mô-đun CSS bằng cách sử dụng tính năng nhập động, với tham số thứ hai mới cho câu nhận định nhập type: 'css':

const cssModule = await import('./style.css', {
  assert: { type: 'css' }
});
document.adoptedStyleSheets = [cssModule.default];

Chưa cho phép quy tắc @import

Hiện tại, các quy tắc @import của CSS không hoạt động trong các trang kiểu có thể tạo, bao gồm cả tập lệnh mô-đun CSS. Nếu các quy tắc @import có trong một tệp kiểu có thể tạo, thì các quy tắc đó sẽ bị bỏ qua.

/* atImported.css */
div {
    background-color: blue;
}

/* styles.css */
@import url('./atImported.css'); /* Ignored in CSS module */
div {
    border: 1em solid green;
}

<!-- index.html -->
<script type="module">
    import styles from './styles.css' assert { type: "css" };
    document.adoptedStyleSheets = [styles];
</script>
<div>This div will have a green border but no background color.</div>

Bạn có thể thêm tính năng hỗ trợ @import trong tập lệnh mô-đun CSS vào quy cách. Theo dõi cuộc thảo luận về thông số kỹ thuật này trong vấn đề trên GitHub.