CSS 与布局 / How does CSS work · 样式从哪来 / User-Agent Stylesheet 待审核 3 / 6
level 2 · UA stylesheet

User-Agent Stylesheet

每个浏览器都内置一份样式表(Chromium 是 html.css、Firefox 是 html.css/forms.css),在写任何 CSS 之前就先跑。它针对具体标签覆盖 Level 1 的初始值,给 HTML 一套「开箱即用」的外观:标题大而粗、段落有上下间距、列表有项目符号和缩进、链接是蓝色带下划线、按钮长得像按钮。

下面这段 HTML 默认按 UA 样式渲染。剥离 UA 样式这一档给演示区里的常见标签强制 all: initialall 不含 direction / unicode-bidi 与自定义属性,故不是「退回纯粹的 initial value」,也不等于「没有 UA 样式表」),观察它塌缩成的样子——这就是没有 UA 时,页面只剩 Level 1 初始值的呈现。

图 1 · 剥离 UA 样式前后的对照。剥离档给演示区的常见标签强制 all: initial,可见标题、列表与链接一并塌回无样式的形态。

1 · UA stylesheet 里大概写了什么

下面是 Chromium UA 样式表的代表性规则(简化)。注意每条几乎都在覆盖某个属性的 initial value:

html, body, div, h1, p, ul, ol, li, blockquote { display: block }   /* initial 实为 inline */
li                { display: list-item }
body              { margin: 8px }                                     /* 页面四周的留白 */
h1                { font-size: 2em; font-weight: bold;
                    margin-block: 0.67em }
p, blockquote     { margin-block: 1em }
ul, ol            { margin-block: 1em; padding-inline-start: 40px;
                    list-style-type: disc /* ol → decimal */ }
strong, b         { font-weight: bold }
a:any-link        { color: -webkit-link; text-decoration: underline;
                    cursor: pointer }
button            { appearance: auto; /* 一整套原生外观 */ }

想查某个标签完整的 UA 默认值、或对比它在不同引擎下的差异?推荐 Browser Default Styles——可搜索的 UA stylesheet 数据库,按标签列出它在 Blink(Chrome)/ WebKit(Safari)/ Gecko(Firefox)/ Trident(IE)各引擎下的默认规则,比翻浏览器源码快得多。

它的优先级在哪?UA stylesheet 属于 user-agent origin,优先级低于 author 与 user 样式,所以一条 h1 { font-size: 20px } 就能覆盖它的普通声明——无需 !important。反过来,UA origin 里带 !important 的声明(如 Chromium 对隐藏输入框的 display: none !important)高于 author 的一切声明,author 加 !important 也压不过。CSS-wide 关键字页的 revert 会先退到 user origin,user 没有声明时才落到这一层。