多久没听到 CSS Reset了？是时候更新了!

家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

本篇文章内容来自 Andy Bell ，其大约 4 年前写了一篇文章《现代 CSS Reset》，但是其并没有过时，本篇文章就是在其基础上更新的内容。

新 CSS Reset 调整

box-sizing

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

这条规则非常容易理解，其将所有元素和伪元素设置为使用 border-box 而不是默认的 content-box 来调整大小。

现在更多地关注让浏览器通过具有流体类型（fluid type）和空间的灵活布局来完成更多工作，这条规则虽然不再像以前那么有用。但是，项目还是建议有明确的 box-sizing 设置，因此它仍然在 Reset 中占有一席之地。

html reset

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

这条规则最好的解释者是 Kilian，他还解释了为什么需要丑陋的前缀，可以阅读文章《Your CSS reset needs text-size-adjust (probably)》。

margin reset

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

上面的 reset 规则倾向于剥离用户代理样式以获得边距，从而支持在更宏观层面上定义流程和空间。通过逻辑属性删除末端边距（end margin），而不是旧重置中的所有边。

列表 reset

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

Safari 有一些奇怪的表现，包括：如果删除列表样式，Safari 就会删除 VoiceOver 的语义。有人认为这是一个功能，也有人认为这是一个错误，但是依然建议对其进行处理。

body reset

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

大多数开发者喜欢继承的清晰易读的行高，比如将 body 的最小高度设置为 100vh 也非常方便，特别是当开发者想要设置装饰元素时。虽然使用像 dvh 的新单位可能比较吸引人，但是也可能引入一些奇怪的表现，这不是 CSS Reset 得职责所在。

而且，svh 单位似乎比 dvh 好，但大多数开发者还是会倾向于使用 vh 。最后提醒一下，在深入研究新单位之前，请务必确保了解它们。

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

就像在全局范围内拥有较大的行高一样，为标题和按钮等设置小的行高也同样方便。如果页面字体具有较大的上升部分和下降部分（ascenders and descenders though），那么删除或修改此规则绝对值得，可以有效避免内容相互冲突造成的可访问性问题。

text-wrap Reset

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

这条规则取决于特定的项目、开发者本身，但是新的文本换行 text-wrap 属性使标题看起来非常漂亮。

currentColor 继承

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

这条规则首先确保文本装饰（text decoration）不会干扰上升部分和下降部分。这条规则目前在主流浏览器中基本上是默认的，但设置它是一个很好的保险策略。

很多开发者喜欢默认设置链接来继承文本的当前颜色（currentColor），但如果不希望这样做，可以删除该规则。

font:inherit 设置

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

font:inherit 对于 input 和其他表单元素来说是非常有用的。其主要会影响 <textarea> 元素，但将其应用于其他表单元素也没有什么坏处，因为它可以在项目中节省一些 CSS。

textarea reset

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em
}

对于 <textarea> 元素，该规则很方便。默认情况下，如果不添加行属性，textarea 可能会非常小。这对于粗指针（例如手指）并不理想，并且通过代理， <textarea> 元素往往用于多行文本。

元素锚定 Reset

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

如果一个元素被锚定，那么使用滚动边距在其上方添加更多空间是有意义的，只有当该元素被定位时才会考虑这一点。以上一点点代码调整就能带来更好的用户体验！当然如果有固定标题，可能需要调整此设置。

完整的 CSS Reset

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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

参考资料

https://andy-bell.co.uk/a-more-modern-css-reset/

https://dev.to/ziratsu/css-reset-58h9

https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/

喽呀大家好呀，淼淼又来和大家见面啦，这一期淼淼要和大家分享游戏额有关浏览器兼容性的问题，解决浏览器兼容性问题通常涉及多种策略和技术，以下是一些通用的解决方案：

使用主流浏览器并保持更新： 主流浏览器如Chrome、Firefox、Safari和Microsoft Edge等，通常对最新的网页标准支持得比较好，并且会不断更新以适应新技术。确保你和你的用户使用的浏览器都是最新版本，可以减少很多兼容性问题。

利用浏览器的兼容性视图或模式：

对于Microsoft Edge，你可以更改兼容性视图设置或使用IE模式来浏览那些仅兼容旧版Internet Explorer的网站。

其他浏览器如Chrome可通过安装特定的扩展程序（如IE Tab Multi）来模拟其他浏览器的渲染引擎。

优化网页代码：

遵循W3C标准编写HTML、CSS和JavaScript代码，避免使用非标准或已废弃的特性。

使用CSS前缀(-webkit-, -moz-, -ms-)来确保CSS样式在不同浏览器中的兼容性。

应用CSS Reset或Normalize.css来消除浏览器之间的默认样式差异。

使用跨浏览器兼容的前端框架和库，如Bootstrap或jQuery，它们已经处理了很多常见的兼容性问题。

实施CSS Hack或条件注释：

在特定情况下，可能需要使用CSS Hack来针对不同浏览器编写特定的样式代码。尽管这不是最佳实践，但在某些特殊场景下可能有用。

对于旧版IE，可以使用条件注释来加载特定的样式或脚本。

使用跨浏览器测试工具：

利用工具如BrowserStack、Selenium等进行自动化和手动的跨浏览器测试，确保网页在各种浏览器和版本中都能正确显示和功能正常。

持续监控和用户反馈：

建立一个机制来收集用户关于浏览器兼容性问题的反馈，并及时响应和修复。

定期使用兼容性检测工具（如Can I Use）检查你的代码依赖的特性在各浏览器中的支持情况。

禁用硬件加速：

如果发现某些渲染问题是由于硬件加速引起，可以尝试在浏览器设置中禁用这一功能。

综合运用上述方法，可以有效地减少甚至解决浏览器兼容性问题，提升网站的用户体验。

淼淼这一期的内容就讲到这里啦！大家有不同的想法和意见可以在评论区留言奥

SS Reset是指样式重置，主要用于清除浏览器里面的默认样式，有利于页面布局。以下总结了一些常见网站使用的默认样式，供大家参考。

淘宝

html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-color:#FFFFFF;
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E4E4E4;
border-width:1px 0;
clear:both;
height:2px;
margin:5px 0;
overflow:hidden;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
content:””;
}

腾讯

body,ol,ul,h 1 ,h 2 ,h 3 ,h 4 ,h 5 ,h 6 ,p,th,td,dl,dd,form,fieldset,legend,input,textarea,
select{ 
margin:0; 
padding:0 
}
body{ 
font : 12px "宋体" , "Arial Narrow" ,HELVETICA; 
background:#fff;
-webkit-text-size-adjust: 100% 
}
a{ 
color : #172c45; 
text-decoration:none 
}
a:hover{ 
color : #cd0200; 
text-decoration:underline 
}
em{ 
font-style:normal 
}
li{ 
list-style:none 
}
img{ 
border:0 ; 
vertical-align:middle 
}
table{ 
border-collapse:collapse ; 
border-spacing:0 }
p{word-wrap:break-word}

百度

body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}

新浪

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img {
    margin: 0;
    padding: 0
}
fieldset,img {
    border: 0
}
img {
    display: block
}
address,caption,cite,code,dfn,th,var {
    font-style: normal;
    font-weight: normal
}
ul,ol {
    list-style: none
}
input {
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun","宋体"
}
input::-moz-focus-inner {
    border: 0;
    padding: 0
}
select,input {
    vertical-align: middle
}
select,input,textarea {
    font-size: 12px;
    margin: 0
}
input[type="text"],input[type="password"],textarea {
    outline-style: none;
    -webkit-appearance: none
}
textarea {
    resize: none
}
table {
    border-collapse: collapse
}

京东

* {
    margin: 0;
    padding: 0
}
em,i {
    font-style: normal
}
li {
    list-style: none
}
img {
    border: 0;
    vertical-align: middle
}
button {
    cursor: pointer
}
a {
    color: #666;
    text-decoration: none
}
a:hover {
    color: #c81623
}

大众版

在线咨询

上一篇：如何快速写出表格代码？exl表格转换成html代码
下一篇：10个对web开发人员有用的HTML文件上传技巧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商