前言

剛剛發(fā)布的 Chrome 93 版本中更新了一項(xiàng)令人興奮的新特性：CSS Module Script，使用它你可以像導(dǎo)入一個(gè) JavaScript 模塊一樣加載 CSS 樣式。

然后，你可以將 CSS 樣式與可構(gòu)造樣式表(Constructable Stylesheet) 相同的方式作用于 document 和 shadow dom，這比其他加載 CSS 的方式更方便、更高效。

什么是可構(gòu)造樣式表？

在了解 CSS Module Script 之前，我們先來(lái)了解下啥是可構(gòu)造樣式表(Constructable Stylesheet)。和表面意思一樣，它是為了 CssStyleSheet 可直接構(gòu)造而設(shè)計(jì)的，在 document 和 shadow dom 下都可以使用。

使用可構(gòu)造樣式表：

• 通過(guò) new CSSStyleSheet() 構(gòu)造一個(gè)樣式表
• 改變可構(gòu)造樣式表
• 通過(guò) adoptedStyleSheets 使用可構(gòu)造樣式表
  

改變可構(gòu)造樣式表有如下API：

• insertRule(rule，index) 往 cssRules 屬性里插入 rule
• deleteRule(rule，index) 從 cssRules 屬性里刪除 rule
• replace(text) 異步替換 cssRules
• replaceSync(text) 同步的 replace
  

// Construct the CSSStyleSheet
const stylesheet = new CSSStyleSheet();
 
// Add some CSS
stylesheet.replaceSync('body { background: #000 !important; }')
// OR stylesheet.replace, which returns a Promise instead
 
// Tell the document to adopt your new stylesheet.
// Note that this also works with Shadow Roots.
document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];

使用 CSS Module Script

引入 CSS Module Script 將作用于 document 和 shadow dom，如下：

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

CSS Module Script 默認(rèn)導(dǎo)出的是一個(gè) 可構(gòu)造樣式表 ，與任何其他 可構(gòu)造樣式表 一樣，它使用 adoptedstylesheet 作用于 document 和 shadow dom。

和其他使用 JavaScript 引入 CSS 的方式不同，你無(wú)需創(chuàng)建一個(gè) <script> 標(biāo)簽，也不需要把 CSS 插入混淆后的 JavaScript 中。

CSS Module 也有像 JavaScript Module 一樣的優(yōu)點(diǎn)：

• 重復(fù)數(shù)據(jù)刪除：如果從應(yīng)用的多個(gè)位置導(dǎo)入相同的 CSS 文件，它仍然只會(huì)被提取、實(shí)例化和解析一次。
• 一致的順序：如果導(dǎo)入一個(gè) JavaScript 運(yùn)行時(shí)，它可以依賴于已經(jīng)解析過(guò)的樣式表。
• 安全性：模塊使用 CORS 加載，并且使用嚴(yán)格的 MIME 類型檢查。
  

導(dǎo)入斷言（assert）是什么？

import 語(yǔ)句的 assert {type: 'css'} 部分是一個(gè) import 斷言，這是必需要聲明的的；如果沒(méi)有它，CSS 將被認(rèn)為是一個(gè)普通的 JavaScript 模塊，如果導(dǎo)入的文件具有非 JavaScript MIME 類型，則會(huì)導(dǎo)入失敗。

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".

樣式表的動(dòng)態(tài)導(dǎo)入

類似于 JavaScript 模塊的動(dòng)態(tài)導(dǎo)入，你還可以用 dynamic import 導(dǎo)入 CSS 模塊：

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

這里有個(gè)坑需要注意，被添加到 adoptedstylesheet 的并不是 cssModule本身，而是 cssModule.default。

@import 的規(guī)則尚未支持

目前，CSS@import 的規(guī)則不適用 于可構(gòu)造樣式表，包括 CSS Module Script。如果 CSS 模塊中含有@import 規(guī)則，則這些規(guī)則將被忽略。

/* 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>

目前 Firefox 和 Safari 瀏覽器尚未支持，不過(guò)未來(lái)可期～

總結(jié)

到此這篇關(guān)于如何像導(dǎo)入JS模塊一樣導(dǎo)入CSS的文章就介紹到這了,更多相關(guān)像導(dǎo)入JS模塊導(dǎo)入CSS內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論