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 biểu định kiểu CSS bằng cú pháp giống như 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 các biểu định kiểu CSS bằng câu lệnh import, giống như mô-đun JavaScript. Sau đó, bạn có thể áp dụng biểu định kiểu cho tài liệu hoặc gốc bóng theo cách tương tự như biểu định 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

Tập lệnh mô-đun CSS được cung cấp theo mặc định trong Chrome và Edge phiên bản 93.

Firefox và Safari chưa được hỗ trợ. 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];

Kết quả xuất mặc định của tập lệnh mô-đun CSS là một biểu định kiểu có thể tạo có nội dung là nội dung của tệp đã nhập. Giống như mọi biểu định kiểu có thể tạo khác, biểu định kiểu 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 các phần tử <style> hoặc gây rối với các chuỗi JavaScript của văn bản CSS.

Mô-đun CSS cũng có một số lợi ích giống như 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 thực thể và phân tích cú pháp một lần.
  • Thứ tự đánh giá nhất quán: khi JavaScript nhập đang chạy, JavaScript này có thể dựa vào biểu định 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ì trong "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 có, import sẽ được coi là một lệnh nhập mô-đun JavaScript 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".

Biểu định kiểu được nhập động

Bạn cũng có thể nhập mô-đun CSS bằng cách sử dụ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];

@import quy tắc chưa được cho phép

Hiện tại, các quy tắc @import của CSS không hoạt động trong các biểu định kiểu có thể tạo, bao gồm cả tập lệnh mô-đun CSS. Nếu có quy tắc @import trong một biểu định 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>

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