怎么像导入 JS 模块一样导入 CSS？
发布时间：2022-06-27 15:38:57 所属栏目：安全 来源：互联网
导读：刚刚发布的 Chrome 93 版本中更新了一项令人兴奋的新特性：CSS Module Script，使用它你可以像导入一个 JavaScript 模块一样加载 CSS 样式。 什么是可构造样式表? 在了解 CSS Module Script 之前，我们先来了解下啥是可构造样式表(Constructable Stylesheet)
|
刚刚发布的 Chrome 93 版本中更新了一项令人兴奋的新特性：CSS Module Script，使用它你可以像导入一个 JavaScript 模块一样加载 CSS 样式。 什么是可构造样式表? 在了解 CSS Module Script 之前，我们先来了解下啥是可构造样式表(Constructable Stylesheet)。和表面意思一样，它是为了 CssStyleSheet 可直接构造而设计的，在 document 和 shadow dom 下都可以使用。 使用可构造样式表： 通过 new CSSStyleSheet() 构造一个样式表 改变可构造样式表 通过 adoptedStyleSheets 使用可构造样式表 改变可构造样式表有如下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 使用 CSS Module Script 引入 CSS Module Script 将作用于 document 和 shadow dom，如下： 复制 import sheet from './styles.css' assert { type: 'css' }; document.adoptedStyleSheets = [sheet]; shadowRoot.adoptedStyleSheets = [sheet]; 1. 2. 3. CSS Module Script 默认导出的是一个 可构造样式表 ，与任何其他 可构造样式表 一样，它使用 adoptedstylesheet 作用于 document 和 shadow dom。 和其他使用 JavaScript 引入 CSS 的方式不同，你无需创建一个<script>标签，也不需要把 CSS 插入混淆后的 JavaScript 中。 CSS Module 也有像 JavaScript Module 一样的优点： 重复数据删除：如果从应用的多个位置导入相同的 CSS 文件，它仍然只会被提取、实例化和解析一次。 一致的顺序：如果导入一个 JavaScript 运行时，它可以依赖于已经解析过的样式表。 安全性：模块使用 CORS 加载，并且使用严格的 MIME 类型检查。 复制 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". 1. 2. 3. 4. 样式表的动态导入类似于 JavaScript 模块的动态导入，你还可以用 dynamic import 导入 CSS 模块： 复制 const cssModule = await import('./style.css', { assert: { type: 'css' } }); document.adoptedStyleSheets = [cssModule.default]; 1. 2. 3. 4. 这里有个坑需要注意，被添加到 adoptedstylesheet 的并不是 cssModule本身，而是 cssModule.default。 @import 的规则尚未支持 目前，CSS@import 的规则不适用 于可构造样式表，包括 CSS Module Script。如果 CSS 模块中含有@import 规则，则这些规则将被忽略。 复制 /* 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> 1. 2. 3. 4. 5. 6. 目前 Firefox 和 Safari 浏览器尚未支持，不过未来可期～ （编辑：PHP编程网 - 黄冈站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330482号