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;
}