重设( c)
一个包含现代 CSS 特性的样式重置,可以给你一个更好的基础开始.
特征
- 为级联层设计,但仍使用
:where要保持低规格的无层设置. - 使用自动暗模式
color-scheme。 。 。 . system-ui字体预应用.- 可获取、一致的重点纲要.
- 支持诸如
<dialog>财务报告和审定财务报表popover。 。 。 . .visually-hidden班级烤入.
见 源代码 如果你对整套规则好奇的话.
使用量
安装并导入软件包( 需要捆绑) :
npm install @acab/reset.css
/* in a CSS file or <style> tag */
@import '@acab/reset.css';
// or in a JS file
import '@acab/reset.css';
或从CDN直接使用:
@import 'https://unpkg.com/@acab/reset.css';
叠加层
建议将此重置导入第一层.
理想的情况是,你应该预先定义你的地层,作为第一个样式表的第一件事.
@layer reset, page, overrides;
然后在导入此重置时应用第一个层名.
@import '@acab/reset.css' layer(reset);
视觉隐藏( 仅包含 SR)
每个项目都需要"可视化隐藏"的样式来进行屏幕阅读器独有的文本,因此这个重置已经将其建入.
它可以通过 .visually-hidden 类及其中的所有声明 !important 这样它们就不会被更高优先级的层层所压倒.
当隐藏的视觉元素被聚焦或内部的元素被聚焦时,这些样式会自动被撤销.
重点纲要
默认情况下,焦点样式在浏览器之间可能非常不一致(甚至无法访问). 此重置使其正常化为使用双色大纲 系统颜色 收养 color-scheme根据特定章节的背景,您可能想要设置 color-scheme 属性以保持足够的颜色对比.
要覆盖焦点样式, 您可以指定自己的 outline (或者说 outline-color) (中文(简体) ).
@layer globals {
:focus-visible {
outline-color: var(--my-brand);
}
}
鸣谢
这个计划的灵感来自一些现有的,受欢迎的 CSS resets:
- 安迪・贝尔的 现代 CSS 重置
- 乔什W Comeau的 自定义 CSS 重置
- 简·西蒙斯的 CSS 补救