saitize.css 是一个CSS库,提供一致的、跨浏览器的HTML元素默认样式,以及通用的默认值,可以跨浏览器统一HTML内容的渲染效果。
saitize.css 使用:where()在零特异性选择器中包装样式,它与ormalize.css一起开发,这意味着每一个HTML元素规范化都被包括在内,并且每一个规范化和意见都被清楚地标记和记录。
作用标准化各种元素的样式。纠正错误和常见的浏览器不一致问题。提供通用的、有用的默认值。使用详细注释解释代码的作用。用法<likhref="https://cd.skypack.dev/saitize.css"rel="stylesheet"/>特性边框size默认为border-box:
*,::before,::after{box-sizig:border-box;}背景默认不重复
*,::before,::after{backgroud-repeat:o-repeat;}
伪元素继承文本装饰和垂直对齐
::before,::after{text-decoratio:iherit;vertical-alig:iherit;}
Cursors 默认
html{cursor:default;}所有浏览器,文本都有一个合适的行高
html{lie-height:1.5;}网页上的标签和普通编辑器中的标签是一样的
html{tab-size:4;}
文字中断以防止溢出
html{word-break:break-all;}
文档不使用外边距填充
body{margi:0;}导航列表不包括标记样式
avol,avul{list-style:oe;paddig:0;}
媒体元素与其他内容的文本中心对齐
audio,cavas,iframe,img,svg,video{vertical-alig:middle;}
svg 退回到当前文本颜色
svg:ot([fill]){fill:curretColor;}表格不包括额外的边框间距
table{border-collapse:collapse;}默认情况下,文本区域只能垂直调整大小
textarea{resize:vertical;}
对可点击的元素进行单点调度
a,area,butto,iput,label,select,summary,textarea,[tabidex]{-ms-touch-actio:maipulatio;touch-actio:maipulatio;}
ARIA角色包括视觉光标提示
[aria-busy="true"]{cursor:progress;}[aria-cotrols]{cursor:poiter;}[aria-disabled="true"],[disabled]{cursor:default;}
视觉上隐藏的内容仍然可以访问
[aria-hidde="false"][hidde]{display:iitial;}[aria-hidde="false"][hidde]:ot(:focus){clip:rect(0,0,0,0);positio:absolute;}










评论