本文介绍了自 Chrome 85 起在开发者工具中实现 CSS-in-JS 支持,以及我们所说的 CSS-in-JS 的一般意义,以及它与开发者工具长期以来支持的常规 CSS 的区别。
什么是 CSS-in-JS?
CSS-in-JS 的定义相当模糊。从广义上讲,这是一种使用 JavaScript 管理 CSS 代码的方法。例如,这可能意味着 CSS 内容是使用 JavaScript 定义的,而最终的 CSS 输出由应用即时生成。
在开发者工具环境中,CSS-in-JS 表示使用 CSSOM API 将 CSS 内容注入页面。常规 CSS 是使用 <style>
或 <link>
元素注入的,并且具有静态来源(例如 DOM 节点或网络资源)。相比之下,CSS-in-JS 通常没有静态来源。这种情况的一个特例是,可以使用 CSSOM API 更新 <style>
元素的内容,导致来源与实际 CSS 样式表不同步。
如果您使用任何 CSS-in-JS 库(例如 styled-component、Emotion、JSS),该库可能会在后台使用 CSSOM API 注入样式,具体取决于开发模式和浏览器。
我们来看一些示例,了解如何使用 CSSOM API 注入样式表,这与 CSS-in-JS 库执行的操作类似。
// Insert new rule to an existing CSS stylesheet
const element = document.querySelector('style');
const stylesheet = element.sheet;
stylesheet.replaceSync('.some { color: blue; }');
stylesheet.insertRule('.some { color: green; }');
您也可以创建一个全新的样式表:
// Create a completely new stylesheet
const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('.some { color: blue; }');
stylesheet.insertRule('.some { color: green; }');
// Apply constructed stylesheet to the document
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
开发者工具中的 CSS 支持
在开发者工具中,处理 CSS 时最常用的功能是 Styles 窗格。在样式窗格中,您可以查看适用于特定元素的规则,还可以修改规则并查看页面上实时的更改。
在去年之前,对使用 CSSOM API 修改的 CSS 规则的支持相当有限:您只能看到应用的规则,但无法修改。去年的主要目标是允许使用“样式”窗格修改 CSS-in-JS 规则。有时,我们还会将 CSS-in-JS 样式称为 "constructed",表示它们是使用 Web API 构建的。
我们来深入了解下在开发者工具中修改样式时的运作方式。
开发者工具中的样式修改机制
在开发者工具中选择元素时,系统会显示 Styles 窗格。Styles 窗格会发出一个名为 CSS.getMatchedStylesForNode 的 CDP 命令,以获取适用于相应元素的 CSS 规则。CDP 代表 Chrome DevTools Protocol,它是一个 API,可让开发者工具前端获取有关所检查页面的更多信息。
被调用时,CSS.getMatchedStylesForNode
会识别文档中的所有样式表,并使用浏览器的 CSS 解析器对其进行解析。然后,它会构建一个索引,将每条 CSS 规则与样式表来源中的某个位置相关联。
您可能会问,为什么还需要再次解析 CSS?这里的问题在于,出于性能方面的原因,浏览器本身并不关注 CSS 规则的源位置,因此不会存储这些规则。但开发者工具需要源位置才能支持 CSS 编辑。我们不希望普通的 Chrome 用户支付性能损失,但我们希望开发者工具用户能够访问源代码位置。这种重新解析方法同时解决了这两个用例,且缺点最少。
接下来,CSS.getMatchedStylesForNode
实现会要求浏览器的样式引擎提供与指定元素匹配的 CSS 规则。最后,该方法会将样式引擎返回的规则与源代码相关联,并提供关于 CSS 规则的结构化响应,以便开发者工具了解规则的哪一部分是选择器或属性。它允许开发者工具单独修改选择器和属性。
现在我们来看看如何修改还记得 CSS.getMatchedStylesForNode
会返回每条规则的来源位置吗?这对于修改至关重要。当您更改规则时,DevTools 会发出另一个 CDP 命令来实际更新页面。该命令包含正在更新的规则片段的原始位置,以及需要更新片段的新文本。
在后端,当处理修改调用时,DevTools 会更新目标样式表。它还会更新其维护的样式表来源副本,并更新已更新规则的源位置。为了响应修改调用,开发者工具前端会获取刚刚更新的文本片段的更新位置。
这解释了为什么在开发者工具中修改 CSS-in-JS 无法立即生效:CSS-in-JS 没有在任何位置存储实际来源,CSS 规则位于浏览器内存中的 CSSOM 数据结构中。
我们如何添加对 CSS-in-JS 的支持
因此,为了支持 CSS-in-JS 规则的修改,我们决定最佳的解决方案是为构造的样式表创建来源,以便使用上述现有机制进行修改。
第一步是构建源文本。浏览器的样式引擎会将 CSS 规则存储在 CSSStyleSheet
类中。如前所述,该类就是您可以通过 JavaScript 创建其实例的类。用于构建源文本的代码如下所示:
String InspectorStyleSheet::CollectStyleSheetRules() {
StringBuilder builder;
for (unsigned i = 0; i < page_style_sheet_->length(); i++) {
builder.Append(page_style_sheet_->item(i)->cssText());
builder.Append('\n');
}
return builder.ToString();
}
它会迭代在 CSSStyleSheet 实例中找到的规则,并从中构建单个字符串。创建 InspectorStyleSheet 类的实例时,系统会调用此方法。InspectorStyleSheet 类封装 CSSStyleSheet 实例,并提取开发者工具所需的其他元数据:
void InspectorStyleSheet::UpdateText() {
String text;
bool success = InspectorStyleSheetText(&text);
if (!success)
success = InlineStyleSheetText(&text);
if (!success)
success = ResourceStyleSheetText(&text);
if (!success)
success = CSSOMStyleSheetText(&text);
if (success)
InnerSetText(text, false);
}
在此代码段中,我们看到在内部调用 CollectStyleSheetRules
的 CSSOMStyleSheetText
。如果样式表不是内嵌或非资源样式表,则调用 CSSOMStyleSheetText
。基本上,这两个代码段已经支持对使用 new CSSStyleSheet()
构造函数创建的样式表进行基本修改。
一种特殊情况是与已使用 CSSOM API 更改的 <style>
标记相关联的样式表。在这种情况下,样式表包含源文本和源不存在的其他规则。为处理这种情况,我们引入了一种将这些附加规则合并到源文本中的方法。在这种情况下,顺序很重要,因为 CSS 规则可以插入到原始源文本的中间。例如,假设原始 <style>
元素包含以下文本:
/* comment */
.rule1 {}
.rule3 {}
然后,网页使用 JS API 插入了一些新规则,从而生成以下规则顺序: .rule0、.rule1、.rule2、.rule3、.rule4合并操作后生成的源文本应如下所示:
.rule0 {}
/* comment */
.rule1 {}
.rule2 {}
.rule3 {}
.rule4 {}
保留原始注释和缩进对于编辑过程非常重要,因为规则的源文本位置必须精确。
CSS-in-JS 样式表的另一个特别之处是页面可以随时对其进行更改。如果实际的 CSSOM 规则与文本版本不同步,修改将不起作用。为此,我们引入了一种所谓的“探测”,让浏览器能够在样式表发生变化时通知开发者工具的后端部分。之后,更改后的样式表将在下一次调用 CSS.getmatchedStylesForNode 期间进行同步。
完成所有这些工作后,CSS-in-JS 修改已经可以正常工作,但我们希望改进界面,以表明是否构建了样式表。我们在 CDP 的 CSS.CSSStyleSheetHeader 中添加了一个名为 isConstructed
的新属性,前端可利用该属性正确显示 CSS 规则的来源:
总结
我们来回顾一下我们的故事,我们了解了开发者工具不支持的与 CSS-in-JS 相关的相关用例,并介绍了支持这些用例的解决方案。这种实现的有趣之处在于,我们能够通过使 CSSOM CSS 规则具有常规源文本来利用现有功能,无需在开发者工具中彻底重新设计样式编辑的架构。
如需了解更多背景信息,请参阅我们的设计方案或 Chromium 跟踪错误,其中引用了所有相关补丁。
下载预览渠道
请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道,您可以访问最新的开发者工具功能,测试先进的网络平台 API,并在用户之前发现您网站上的问题!
与 Chrome 开发者工具团队联系
使用以下选项讨论博文中的新功能和变更,或与开发者工具相关的任何其他内容。
- 请通过 crbug.com 提交建议或反馈。
- 使用更多选项报告开发者工具问题
>帮助 >在开发者工具中报告开发者工具问题。
- 请发送电子邮件至 @ChromeDevTools。
- 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。