CSS

此页面提供有关 DevTools 使用的 CSS 的信息。想知道开发版主题吗？请参阅此页面以获取有关开发版主题的更多信息。

基础知识

CSS 代码位于 devtools/client/themes 中。

以下是一些基本技巧，如果您正在更改 CSS，这些技巧可以优化审查。

  • 避免使用 !important，但如果您必须使用它，请确保很明显您为什么要使用它（可能带有注释）。

  • 避免使用幻数，优先使用自动调整大小。

  • 避免平台特定的样式，将所有内容都放在 shared 目录中。

  • 避免使用预处理器变量，而是使用 CSS 变量。

  • 避免在 JavaScript 中设置样式。通常最好设置一个类，然后在 CSS 中指定样式。

  • classList 通常比 className 更好。这样可以减少覆盖现有类的可能性。

样板代码

确保每个文件都以标准版权标头开头（请参阅许可证样板代码）。

测试

CSS 更改通常在各个平台之间相似，因为它们使用了共享的实现，但仍然可能存在一些值得检查的差异。在 Windows、OS X 和 Ubuntu 上检查重大更改。

格式

我们对 CSS 使用 2 个空格缩进。

通常，格式如下所示

selector,
alternate-selector {
  property: value;
  other-property: other-value;
}

此外

  • 省略 0 值的单位。

  • 示例：使用 margin: 0;，而不是 margin: 0px;。

  • 在每个逗号后添加一个空格，**但**颜色函数内除外。

  • 示例：linear-gradient(to bottom, black 1px, rgba(255,255,255,0.2) 1px)。

  • 始终在 !important 之前添加一个空格。

  • 在属性选择器中假设 ="true"。

  • 示例：使用 option[checked]，而不是 option[checked="true"]。

  • 使用属性的完整版本，以便清楚地了解您正在更改的内容。

  • 示例：使用 border-color: red，而不是 border: red;。

类名命名标准

  • lower-case-with-dashes 最常用。

  • 但有时也使用 camelCase。尝试遵循现有或相关代码的样式。

亮色和暗色主题支持

DevTools 支持 2 种不同的主题：暗色主题和亮色主题。为了支持它们，提供了 2 个类名（theme-dark 和 theme-light）。

  • 尽可能使用预定义的 CSS 变量，而不是硬编码颜色。

  • 如果您需要支持主题并且预定义的变量不适合，请在 CSS 文件开头定义一个包含自定义颜色的变量。这避免了代码中的选择器重复。

示例

.theme-light {
  --some-variable-name: <color-for-light-theme>;
}
.theme-dark {
  --some-variable-name: <color-for-dark-theme>;
}
#myElement {
  background-color: var(--some-variable-name);
}

HDPI 支持

建议使用 SVG，因为它在支持多种分辨率时可以保持 CSS 的简洁性。但是，如果只有 1x 和 2x PNG 资产可用，您可以使用此 @media 查询来定位更高密度的显示器 (HDPI)：@media (min-resolution: 1.1dppx)。

性能

  • 尽可能使用 iframe，以便您的规则限定在尽可能少的节点集中。

  • 如果您的 CSS 用于 browser.xhtml，则需要特别注意性能。

  • 应避免使用后代选择器。

  • 如果可能，找到只使用 id 选择器、类选择器和选择器组的方法。

本地化

文本方向

  • 对于边距、填充和边框，使用 inline-start/inline-end 而不是 left/right。

  • 示例：使用 margin-inline-start: 3px; 而不是 margin-left: 3px。

  • 对于 RTL 感知定位 (左/右)，使用 inset-inline-start/end。

  • 当没有特殊的 RTL 感知属性 (例如 float: left|right) 可用时，使用伪类 :-moz-locale-dir(ltr|rtl)（对于 XUL 文件）或 :dir(ltr|rtl)（对于 HTML 文件）。

  • 请记住，虽然选项卡内容的滚动条在 RTL 中仍然显示在右侧，但溢出滚动条将显示在左侧。

  • 编写 padding: 0 3px 4px; 而不是 padding: 0 3px 4px 3px;。这使得填充的对称性更加明显（因此 RTL 不会成为问题）。

HTML 模块的 RTL 支持

默认情况下，新的 HTML 模块仅支持从左到右 (LTR)，并且不重用浏览器的当前方向。

要在模块中启用从右到左 (RTL) 支持，请在模块的文档元素上设置 [dir] 属性。

  • 示例：<html xmlns="http://www.w3.org/1999/xhtml" dir="">。

然后，当工具箱加载此模块时，将设置 dir 属性的适当值。

测试

在 DevTools 上测试 RTL 的推荐工作流程是使用强制 RTL 扩展。使用强制 RTL 更改方向后，您应该重新启动 DevTools 以确保所有模块都应用了新的方向。未来版本的强制 RTL 将能够动态更新所有 DevTools 文档。

切换

有时您需要打开和关闭某个样式。例如，树形结构的展开/折叠箭头、选项卡背景等。

Mozilla 的方法是使用属性而不是类来执行切换。

.tree-node {
  background-image: url(right-arrow.svg);
}
.tree-node[open] {
  background-image: url(down-arrow.svg);
}

提示

  • 使用 :empty 来匹配没有子节点的节点。

  • 通常，如果 margin 或 padding 有 4 个值，则说明有错误。如果左右值不对称，则应使用 -start 和 -end。如果值是对称的，则只使用 3 个值（请参阅本地化部分）。