sanitize.cssHTML 元素统一标准
sanitize.css 是一个 CSS 库,提供一致的、跨浏览器的 HTML 元素默认样式,以及通用的默认值,可以跨浏览器统一 HTML 内容的渲染效果。
sanitize.css 使用 :where() 在零特异性选择器中包装样式,它与 normalize.css 一起开发,这意味着每一个 HTML 元素规范化都被包括在内,并且每一个规范化和意见都被清楚地标记和记录。
作用
- 标准化各种元素的样式。
- 纠正错误和常见的浏览器不一致问题。
- 提供通用的、有用的默认值。
- 使用详细注释解释代码的作用。
用法
<link href="https://cdn.skypack.dev/sanitize.css" rel="stylesheet" />
特性
边框 size 默认为 border-box:
*, ::before, ::after { box-sizing: border-box; }
背景默认不重复
*, ::before, ::after { background-repeat: no-repeat; }
伪元素继承文本装饰和垂直对齐
::before, ::after { text-decoration: inherit; vertical-align: inherit; }
Cursors 默认
html { cursor: default; }
所有浏览器,文本都有一个合适的行高
html { line-height: 1.5; }
网页上的标签和普通编辑器中的标签是一样的
html { tab-size: 4; }
文字中断以防止溢出
html { word-break: break-all; }
文档不使用外边距填充
body { margin: 0; }
导航列表不包括标记样式
nav ol, nav ul { list-style: none; padding: 0; }
媒体元素与其他内容的文本中心对齐
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
svg 退回到当前文本颜色
svg:not([fill]) { fill: currentColor; }
表格不包括额外的边框间距
table { border-collapse: collapse; }
默认情况下,文本区域只能垂直调整大小
textarea { resize: vertical; }
对可点击的元素进行单点调度
a, area, button, input, label, select, summary, textarea, [tabindex] { -ms-touch-action: manipulation; touch-action: manipulation; }
ARIA 角色包括视觉光标提示
[aria-busy="true"] { cursor: progress; } [aria-controls] { cursor: pointer; } [aria-disabled="true"], [disabled] { cursor: default; }
视觉上隐藏的内容仍然可以访问
[aria-hidden="false"][hidden] { display: initial; } [aria-hidden="false"][hidden]:not(:focus) { clip: rect(0, 0, 0, 0); position: absolute; }
评论