sanitize.css中文文档|sanitize.css js中文教程|解析

安装命令：npm i sanitize.css

清理.css

sanitize.css 是一个 CSS 库，它提供一致的、跨浏览器的 HTML 元素默认样式以及有用的默认值。

sanitize.css与normalize.css一起开发，这意味着包含每个规范化，并且每个规范化和意见都被清楚地标记和记录。

sanitize.css使用将样式包装在零特异性选择器中:where()。

用法

<link href="https://cdn.skypack.dev/sanitize.css" rel="stylesheet" />

详细了解sanitize.css.

表单 CSS

一个单独的样式表，用于规范化表单控件而没有副作用。

<link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />

详细了解forms.css.

资产 CSS

一个单独的样式表，对普通文档应用舒适的度量。

<link href="https://unpkg.com/sanitize.css/assets.css" rel="stylesheet" />

详细了解assets.css.

排版 CSS

使用系统界面字体规范排版的单独样式表。

<link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />

详细了解typography.css.

减少运动 CSS

一个单独的样式表，用于在用户在系统级别请求时限制运动。

<link href="https://unpkg.com/sanitize.css/reduce-motion.css" rel="stylesheet" />

详细了解reduce-motion.css.

系统界面

一个单独的样式表，增加了对system-ui在 Firefox 中使用的支持。

<link href="https://unpkg.com/sanitize.css/system-ui.css" rel="stylesheet" />

UI-等宽

一个单独的样式表，增加了对ui-monospace在 Chrome、Edge 和 Firefox 中使用的支持。

<link href="https://unpkg.com/sanitize.css/ui-monospace.css" rel="stylesheet" />

安装

npm install sanitize.css --save

网络包使用

进口 sanitize.css 在 CSS 中：

@import '~sanitize.css';
@import '~sanitize.css/forms.css';
@import '~sanitize.css/typography.css';

或者，导入 sanitize.css 在JS中：

import 'sanitize.css';
import 'sanitize.css/forms.css';
import 'sanitize.css/typography.css';

在中webpack.config.js，请务必使用适当的加载程序：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

下载

见https://csstools.github.io/sanitize.css/latest/sanitize.css

它有什么作用？

标准化各种元素的样式。
纠正错误和常见的浏览器不一致问题。
提供通用的、有用的默认值。
使用详细注释解释代码的作用。

浏览器支持

铬（最后 2 个）
边缘（最后 2 个）
火狐（最后 2 个）
火狐ESR
歌剧（最后2）
Safari (最后 2)
iOS Safari（最后 2 个）
浏览器 9+

差异

normalize.css和sanitize.css在仔细测试和记录更改的同时纠正浏览器错误。normalize.css 样式遵循 css 规范。sanitize.css 样式遵循常见的开发人员期望和偏好。
reset.css unstyles所有元素。sanitize.css 和 normalize.css 都保持同步。

特征

框大小默认为边框框

*, ::before, ::after {
  box-sizing: border-box;
}

背景默认不重复

*, ::before, ::after {
  background-repeat: no-repeat;
}

伪元素继承文本修饰和垂直对齐

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

游标仅更改以提示不明显的接口

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

形式

sanitize.css 包括一个单独的样式表，用于使用最小的、类似标准的样式来规范化表单。

<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />

表单功能

表单控件在视觉上保持一致并一致地重新设计样式

button, input, select, textarea {
  background-color: transparent;
  border: 1px solid WindowFrame;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  padding: 0.25em 0.375em;
}

[type="color"],
[type="range"] {
  border-width: 0;
  padding: 0;
}

可扩展的选择控件在视觉上保持一致

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: no-repeat right center / 1em;
  border-radius: 0;
  padding-right: 1em;
}

select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
}

::-ms-expand {
  display: none;
}

占位符在 Internet Explorer 中在视觉上保持一致

:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.54);
}

资产

sanitize.css 包括一个单独的样式表，用于规范化限制所有浏览器中资产的大小。

<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/assets.css" rel="stylesheet" />

资产特性

资产在所有浏览器中使用舒适的度量

iframe,
img,
input,
select,
textarea {
  height: auto;
  max-width: 100%;
}

排版

sanitize.css 包括一个单独的样式表，用于使用系统界面字体规范排版。

<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />

排版功能

排版使用默认系统字体

html {
  font-family:
    system-ui,
    /* macOS 10.11-10.12 */ -apple-system,
    /* Windows 6+ */ Segoe UI,
    /* Android 4+ */ Roboto,
    /* Ubuntu 10.10+ */ Ubuntu,
    /* Gnome 3+ */ Cantarell,
    /* KDE Plasma 5+ */ Noto Sans,
    /* fallback */ sans-serif,
    /* macOS emoji */ "Apple Color Emoji",
    /* Windows emoji */ "Segoe UI Emoji",
    /* Windows emoji */ "Segoe UI Symbol",
    /* Linux emoji */ "Noto Color Emoji";
}

预格式化和代码格式化的文本使用等宽系统字体

code, kbd, pre, samp {
  font-family:
    /* macOS 10.10+ */ Menlo,
    /* Windows 6+ */ Consolas,
    /* Android 4+ */ Roboto Mono,
    /* Ubuntu 10.10+ */ Ubuntu Monospace,
    /* KDE Plasma 5+ */ Noto Mono,
    /* KDE Plasma 4+ */ Oxygen Mono,
    /* Linux/OpenOffice fallback */ Liberation Mono,
    /* fallback */ monospace;
}

减少运动

sanitize.css 包括一个单独的样式表，用于在用户在系统级别请求时限制运动。

<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/reduce-motion.css" rel="stylesheet" />

减少运动特征

在所有浏览器中都减少了动画、滚动效果和过渡

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
  }
}