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;

}