建站
咨詢
售后
建站咨詢
新聞中心
剛剛發(fā)布的 Chrome 93 版本中更新了一項(xiàng)令人興奮的新特性：CSS Module Script，使用它你可以像導(dǎo)入一個(gè) JavaScript 模塊一樣加載 CSS 樣式。
10年積累的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有西烏珠穆沁免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
然后，你可以將 CSS 樣式與可構(gòu)造樣式表(Constructable Stylesheet) 相同的方式作用于 document 和 shadow dom，這比其他加載 CSS 的方式更方便、更高效。
什么是可構(gòu)造樣式表?
在了解 CSS Module Script 之前，我們先來了解下啥是可構(gòu)造樣式表(Constructable Stylesheet)。和表面意思一樣，它是為了 CssStyleSheet 可直接構(gòu)造而設(shè)計(jì)的，在 document 和 shadow dom 下都可以使用。
使用可構(gòu)造樣式表：
- 通過 new CSSStyleSheet() 構(gòu)造一個(gè)樣式表
- 改變可構(gòu)造樣式表
- 通過 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 的方式不同，你無需創(chuàng)建一個(gè)
目前 Firefox 和 Safari 瀏覽器尚未支持，不過未來可期～
標(biāo)題名稱：如何像導(dǎo)入JS模塊一樣導(dǎo)入CSS？
文章URL：http://fisionsoft.com.cn/article/cdohoes.html
