sanitize.css HTML 元素统一标准开源项目

我要开发同款
匿名用户2021年11月09日
45阅读
开发技术HTML/CSS
所属分类Web应用开发、CSS框架
授权协议CC0-1.0

作品详情

sanitize.css 是一个CSS库,提供一致的、跨浏览器的HTML元素默认样式,以及通用的默认值,可以跨浏览器统一HTML内容的渲染效果。

sanitize.css 使用:where()在零特异性选择器中包装样式,它与normalize.css一起开发,这意味着每一个HTML元素规范化都被包括在内,并且每一个规范化和意见都被清楚地标记和记录。

作用标准化各种元素的样式。纠正错误和常见的浏览器不一致问题。提供通用的、有用的默认值。使用详细注释解释代码的作用。用法<linkhref="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;}

导航列表不包括标记样式

 

navol,navul{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;}
查看全文
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论