sanitize.css 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
sanitize.css 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
sanitize.css 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 CC0-1.0
开发语言 HTML/CSS
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发CSS框架
开源组织
地区 不详
投 递 者 罗奇奇
适用人群 未知
收录时间 2021-11-09

软件简介

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;
}
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2020/04/11 06:02

如何使用PHP清理用户输入? - How can I sanitize user input with PHP?

问题: 是否有某个功能全面的功能可以很好地用于清理用户针对SQL注入和XSS攻击的输入,同时仍允许某些类型的HTML标签? 解决方案: 参考一: https://stackoom.com/question/XjZ/如何使用PHP清理用户输入 参考二: https://oldbug.net/q/XjZ/How-can-I-sanitize-user-input-with-PHP

0
0
发表了博客
2020/06/16 06:21

如何使用PHP清理用户输入? - How can I sanitize user input with PHP?

问题: 是否有某个功能全面的功能可以很好地用于清理用户针对SQL注入和XSS攻击的输入,同时仍允许某些类型的HTML标签? 解决方案: 参考一: https://stackoom.com/question/XjZ/如何使用PHP清理用户输入 参考二: https://oldbug.net/q/XjZ/How-can-I-sanitize-user-input-with-PHP

0
0
发表了博客
2018/04/20 14:09

CSS:CSS 字体

ylbtech-CSS:CSS 字体 1.返回顶部 1、 CSS 字体 CSS字体属性定义字体,加粗,大小,文字样式。 serif和sans-serif字体之间的区别 在计算机屏幕上,sans-serif字体被认为是比serif字体容易阅读 CSS字型 在CSS中,有两种类型的字体系列名称: 通用字体系列 - 拥有相似外观的字体系统组合(如 "Serif" 或 "Monospace") 特定字体系列 - 一个特定的字体系列(如 "Times" 或 "Courier") Generic family 字体系列 说明 Serif Times ...

0
0
发表了博客
2019/04/10 10:10

CSS(1)---css语法、css选择器

<center> CSS(1)---css语法、css选择器 </center> <font color=#FFD700> 一、CSS语法</font> 1、CSS语法 CSS 规则由两个主要的部分构成:选择器以及一条或多条声明。 <img src="https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030221134804-1398437910.jpg" style="border: 1px dashed rgb(204, 200, 200);" width="600" height="160"> 属性 是您希望设置的 样式属性。每个属性有一个属性值。属性和属性值被<st...

0
1
发表了博客
2018/04/20 15:13

CSS:CSS 列表

ylbtech-CSS:CSS 列表 1.返回顶部 1、 CSS 列表 CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML中,有两种类型的列表: 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等) 有序列表 - 列表项的标记有数字或字母 使用CSS,可以列出进一步的样式,并可用图像作列表项标记。 不同的列表项标记 list-style-type属性指定列表项标记的类型是:: 实例...

0
0
发表了博客
2018/04/23 07:14

CSS:CSS 下拉菜单

ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1、 CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标移动到指定元素上时,会出现下拉菜单。 实例 <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 1...

0
0
发表了博客
2018/04/20 11:40

CSS:CSS 创建

ylbtech-CSS:CSS 创建 1.返回顶部 1、 CSS 创建 当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。 如何插入样式表 插入样式表的方法有三种: 外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style) 外部样式表 当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式...

0
0
发表了博客
2019/01/15 17:30

CSS工具、CSS重置(CSS Reset)

样式重置的目的是减少浏览器的不一致性,例如line-height,margin,标题的font-size大小等等。样式重置经常在CSS框架中出现。 这里的重置样式故意写的很一般,例如没有为body元素设置任何颜色或是背景之类,我并不建议您就拿这个重置样式应用在您自己的项目中,它应该被调整,修改,扩展以符合您自己的特定的重置基准。例如填写您自己喜欢的网页链接颜色等等。 换句话说,这仅仅是个很简单初级的引导,不是一个独立的不可操作的黑...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
0 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部