sanitize.cssHTML 元素統(tǒng)一標準

sanitize.css 是一個 CSS 庫，提供一致的、跨瀏覽器的 HTML 元素默認樣式，以及通用的默認值，可以跨瀏覽器統(tǒng)一 HTML 內(nèi)容的渲染效果。

sanitize.css 使用 :where() 在零特異性選擇器中包裝樣式，它與 normalize.css 一起開發(fā)，這意味著每一個 HTML 元素規(guī)范化都被包括在內(nèi)，并且每一個規(guī)范化和意見都被清楚地標記和記錄。

作用

• 標準化各種元素的樣式。
• 糾正錯誤和常見的瀏覽器不一致問題。
• 提供通用的、有用的默認值。
• 使用詳細注釋解釋代碼的作用。

用法

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

網(wǎng)頁上的標簽和普通編輯器中的標簽是一樣的

html {
  tab-size: 4;
}

文字中斷以防止溢出

html {
  word-break: break-all;
}

文檔不使用外邊距填充

body {
  margin: 0;
}

導航列表不包括標記樣式

nav ol, nav ul {
  list-style: none;
  padding: 0;
}

媒體元素與其他內(nèi)容的文本中心對齊

audio, canvas, iframe, img, svg, video {
  vertical-align: middle;
}

svg 退回到當前文本顏色

svg:not([fill]) {
  fill: currentColor;
}

表格不包括額外的邊框間距

table {
  border-collapse: collapse;
}

默認情況下，文本區(qū)域只能垂直調(diào)整大小

textarea {
  resize: vertical;
}

對可點擊的元素進行單點調(diào)度

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

視覺上隱藏的內(nèi)容仍然可以訪問

[aria-hidden="false"][hidden] {
  display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}