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