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
Dan Clark
X GitHub

Với tính năng tập lệnh mô-đun CSS mới, bạn có thể tải biểu định kiểu CSS bằng câu lệnh import, giống như các 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 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, tập lệnh mô-đun CSS có trong Chrome và Edge phiên bản 93.

Hiện chưa hỗ trợ trong Firefox và Safari. Bạn có thể theo dõi tiến trình triển khai lần lượt ở Lỗi Gecko và lỗi WebKit.

Đ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 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];

Tệp 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 các tài liệu hoặc gốc bóng bằng cách sử dụng adoptedStyleSheets.

Không giống như những 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 lộn xộn 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 đó sẽ 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 đang nhập, JavaScript có thể dựa vào biểu định kiểu mà JavaScript 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 tính năng kiểm tra loại MIME nghiêm ngặt.

Nhập xác nhận (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 có, import sẽ được coi là quá trình nhập mô-đun JavaScript thông thường và sẽ không thành công nếu tệp đã 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ột 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];

@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ác quy tắc @import có 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>

Bạn có thể thêm tính năng hỗ trợ @import trong các tập lệnh mô-đun CSS vào phần quy cách. Hãy theo dõi nội dung thảo luận về quy cách này trong vấn đề về GitHub.