什么是reset.css

reset.css简单来说就是对CSS默认样式表的重置【全剧终(怎么可能)】

Why ?

同一个矩形在不同浏览器中的表现形式(仅举例说明,可类比HTML标签样式)

喜大普奔的时间节点可以追溯到2022年6月15日,IE 这个货已经逐渐退出历史舞台,通宵处理各个浏览器之间巨大差异、不同兼容性问题的日子总算是熬出来了。【不用再一度脱发了🙄】

如今虽然不同厂商在对待标准仍然存在差异,一些细节上仍旧有出入,但是我们已经不需要再像过去般大肆地对浏览器默认样式进行重置。(其实是没找到合适的例子来举例,最近有实战的Jym可以留言区交流😅)

How ?

显而易见,引入css.reset后,矩形基本一致了。

实践过程中其实不然,由于各种原因(例如:IE789),一些样式是无法百分百完美兼容的。 不过无关紧要,兼容主流即可。 如果某些产品还絮絮叨叨,那么就拔dao相见吧

Core

  • 一统江湖:统一了一些页面元素在所有浏览器下的表现,保护有用的浏览器默认样式而不是完全清零它们,让它们在各个浏览器下表现一致
  • 化繁为简:为大部分元素提供一般化的表现
  • 洗精伐髓:修复了一些浏览器的 Bug ,并且让它们在所有浏览器下保持一致性
  • 奇淫巧技:通过一些巧妙的细节提升了 CSS 的可用性
  • 知无不言言无不尽:提供了详尽的文档让开发者知道,不同元素在不同浏览器下的渲染规则

Question

为什么现在使用的reset.css越来越少,甚至有些人没有听说过?

1、性能问题

全局引用,会导致每一个HTML标签携带多条无用属性,产生冗余代码。

2、技术需求

  • 有的公司要求短、平、快节奏,能跑就行。reset.css不失为优质选择。
  • 有的公司则会进一步要求规范,从而在reset.css的基础上调优,甚至拆分、按需引入HTML文件。
  • ......

3、平替方案

专门百度的,毕竟大部分时候用的都是现成的。😅

Reset 方案 简介 仓库地址
normalize.css CSS Reset 的现代替代方案 github.com/necolas/nor...
sanitize.css 提供一致的、跨浏览器的 HTML 元素默认样式以及有用的默认样式 github.com/csstools/sa...
Modern-CSS-Reset 小而美,重置合理的默认值的现代 CSS Reset 方案 github.com/Andy-set-st...

当然肯定还有其他潜力股,说一千道一万,授人以鱼不如授人以渔。😎

高度匹配实际业务需求的,才是应该优先选择的。✔

相关推荐
To_OC2 小时前
面试被问了三回三栏布局,这次我终于把 BFC 那层窗户纸捅破了
前端·css·面试
To_OC2 小时前
啃完 TS 工具类型我发现:Pick 和 Omit 原来就是一层窗户纸
前端·面试·typescript
风月说与山鬼4 小时前
三、大括号语法
前端·react.js
kyriewen4 小时前
我把最常踩的8个CORS跨域报错整理了一遍——第8个去年还不存在
前端·javascript
Csvn5 小时前
🕰️ 闭包 + setTimeout 的 5 个经典陷阱:为什么定时器看到的永远不是最新的值?
前端
lilian2335 小时前
Harmony os 技术实战|拼豆制图27:用单字符编码承载 50 张 70×70 图纸
前端·数据库·华为·harmonyos
CarIise5 小时前
CSS选择器与样式关联
前端·css·tensorflow
里欧跑得慢7 小时前
CSS 模块化架构的演进:BEM、CSS Modules 到 CSS-in-JS 的反思
前端·css·flutter·web·css-in-js
IT_陈寒7 小时前
Vue的computed属性把我坑惨了,原来我一直用错姿势
前端·人工智能·后端