Open gogoend opened 3 years ago
const createStyleSheet = (rulesText) => { let sheet = new CSSStyleSheet; sheet.insertRule(rulesText);
return sheet } const injectStyleSheets = (document, ...styleSheets) => { document.adoptedStyleSheets(styleSheets) }
近期,笔者的电脑自动更新了 Chrome 浏览器,升级到了 85 版本。笔者在开发者工具中展示的 What's New 选项卡里发现了 “Style editing for CSS-in-JS” 这项更新(如下图)。进入页面中看了看 —— Construct Stylesheets,CSS 还可以使用 JavaScript来构造?本文就来对 Construct Stylesheets 尝试这进行一番探索。
参考资料
https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md https://developers.google.cn/web/updates/2019/02/constructable-stylesheets
快速Demo
以笔者写本文时使用的GitHub页面为例,下图中,左侧是页面原本的状态,右侧是执行以上代码后的状态。![image](https://user-images.githubusercontent.com/26410985/93048717-1a974200-f692-11ea-8d96-8a5ac88d9423.png)