谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
开本系列,谈谈一些有趣的 CSS
题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。
解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。
不断更新,不断更新,不断更新,重要的事情说三遍。
谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法
谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型
谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少
谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit
谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略
谈谈一些有趣的CSS题目(六)-- 全兼容的多列均匀布局问题
谈谈一些有趣的CSS题目(七)-- 消失的边界线问题
谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线
谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
所有题目汇总在我的 Github 。
正文从这里开始。 大部分的时候,作为前端,我们在写 CSS 样式之前,都知道需要添加一份 reset.css
,但是有深究过reset.css
每一句的人恐怕不多,其实其中也是有很多学问的,知己知彼,真正厘清它,对提高 CSS 大有裨益。
reset.css
先来看看早先 YUI 的一个版本的 reset.css
,这是一份历史比较悠久的 RESET 方案:
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin: 0;padding: 0;
}
table {border-collapse: collapse;border-spacing: 0;
}
fieldset, img {border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {font-style: normal;font-weight: normal;
}
ol, ul {list-style: none;
}
caption, th {text-align: left;
}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;
}
q:before, q:after {content: '';
}
abbr, acronym {border: 0;
}
首先,我们要知道 CSS RESET 的目的是什么?是为了消除不同的浏览器在默认样式上不同表现,但是到今天,现代浏览器在这方面的差异已经小了很多。
reset.css 存在的问题
看看第一段:
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin: 0;padding: 0;
}
这一条样式的目的是在于,清除元素的默认 margin
和 padding
。
但是这一段代码是充满问题的。
- 诸如 div 、dt、li 、th、td 等标签是没有默认
padding
和margin
的; - 如果我现在问你 fieldset 是什么标签,可能没几个人知道,相似的还有如 blockquote 、acronym 这种很生僻的标签,在 html 代码中基本不会出现的,其实没太大必要 RESET ,只会给每个项目徒增冗余代码;
上面的意思是,这一段代码其实做了很多无用功!
要知道,CSS RESET 的作用域是全局的。我们都知道在脚本代码中应该尽量避免滥用全局变量,但是在 CSS 上却总是会忘记这一点,大量的全局变量会导致项目大了之后维护起来非常的棘手。
再看看这一段:
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;
}
ol, ul {list-style: none;
}
这一段代码,目的是统一了 h1~h6 的表现,取消了标题的粗体展示,取消了列表元素的项目点。
好像没什么问题,但是诸如 h1~h6、ol、ul 这些拥有具体语义化的元素,一旦去掉了它们本身的特性,而又没有赋予它们本身语义化该有的样式(经常没有),导致越来越多人弄不清它们的语义,侧面来说,这也是现在越来越多的页面上 div 满天飞,缺乏语义化标签的一个重要原因。
YUI 版本的 reset 不管高矮胖瘦,一刀切的方式,看似将所有元素统一在同一起跑线上,实则是多了很多冗余代码,得不偿失。
所以,YUI 的 reset.css 的诸多问题,催生出了另一个版本的 reset.css ,名为 Normalize.css。
Normalize.css
Normalize.css 有着详尽的注释,由于篇幅太长,可以点开网址看看,本文不贴出全部代码。
normalize.css v5.0.0
Normalize.css 与 reset.css 的风格恰好相反,没有不管三七二一的一刀切,而是注重通用的方案,重置掉该重置的样式(例如body的默认margin),保留该保留的 user agent 样式,同时进行一些 bug 的修复,这点是 reset 所缺乏的。
Normalize.css 做了什么
Normalize.css 注释完整,每一段代码都说明了作用,总结来说,它做了以下几个工作(摘自官网):
- Preserves useful defaults, unlike many CSS resets.
- Normalizes styles for a wide range of elements.
- Corrects bugs and common browser inconsistencies.
- Improves usability with subtle modifications.
- Explains what code does using detailed comments.
简单翻译一下,大概是:
- 统一了一些元素在所有浏览器下的表现,保护有用的浏览器默认样式而不是完全清零它们,让它们在各个浏览器下表现一致;
- 为大部分元素提供一般化的表现;
- 修复了一些浏览器的 Bug ,并且让它们在所有浏览器下保持一致性;
- 通过一些巧妙的细节提升了 CSS 的可用性;
- 提供了详尽的文档让开发者知道,不同元素在不同浏览器下的渲染规则;
真心建议各位抽时间读一读 Normalize.css 的源码,加上注释一共就 460 行,多了解了解各个浏览器历史遗留的一些坑。
关于取舍
那么,最后再讨论下取舍问题。是否 Normalize.css 就真的比 reset.css 好呢?
也不见得,Normalize.css 中重置修复的很多 bug ,其实在我们的项目中十个项目不见得有一个会用得上,那么这些重置或者修复,某种意义上而言也是所谓的冗余代码。
我觉得最重要的是,拒绝拿来主义,不要人云亦云,看见别人说这个 reset.css 好用,也不了解一下,拿来就上到项目中。又或者说写代码几年了,知道每次都引用一个 reset ,却从没有去细致了解其中每一句的含义。
关于维护
当团队根据项目需要(可能混合部分了 reset 或者 normalize )编写了一份适合团队项目的 reset 之后,随着不断的迭代或者说是复用,很有可能这个版本的 reset.css 会逐渐添加许多其他的全局性的样式,从而又重新陷入上面说的那些问题。
所以我觉得,reset.css 也是需要维护的,关于最佳的 reset.css ,没有一劳永逸的方案,根据项目灵活配置,做出取舍微调,适量裁剪和修改后再使用。
最后,搞技术的同学还是应该要有所追求,不要满足于消费别人的总结,一定要去源头看看。
到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
转载于:https://www.cnblogs.com/coco1s/p/6249038.html
谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?相关推荐
- vue或者react的css样式初始(css样式重置)——reset.css与normalize.css
前言 为什么要样式重置即 css reset ? 原因:不同的浏览器在实现w3c标准过程中,对各个元素的实现是不一致的.这就导致了同一个页面在不同的浏览器中比如ie和chrome中,表现有差异.为了解 ...
- Normalize.css和Reset CSS有什么区别?
我知道CSS重置是什么,但是最近我听说了这个叫做Normalize.css的新东西. Normalize.css和Reset CSS有什么区别? 标准化CSS和重置CSS有什么区别? CSS重置只是一 ...
- 在vue里使用reset.css
在vue里使用reset.css 1.搜索reset.css并下载 2.在vue项目的src下的assets目录里放入下载好的reset.css 3.在main.js入口文件里导入reset.css ...
- 比较有名的CSS,优雅地写css
重置你的CSS样式 使用CSS常量进行更快速的开发. /* # Dark grey (text): #333333 # Dark Blue (headings, links) #000066 # Mi ...
- 谈谈一些有趣的CSS题目(十七)-- 不可思议的颜色混合模式 mix-blend-mode
谈谈一些有趣的CSS题目(十七)-- 不可思议的颜色混合模式 mix-blend-mode 原文:谈谈一些有趣的CSS题目(十七)-- 不可思议的颜色混合模式 mix-blend-mode 开本系列, ...
- 谈谈一些有趣的CSS题目(十六)-- 奇妙的 background-clip: text
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!
谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画! 原文:谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画! 开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到 ...
- 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
最新文章
- Android零基础入门第30节:两分钟掌握FrameLayout帧布局
- 【SmartJob】启动问题查询
- 通达信高级服务器最新配置文件,通达信移动证后台服务器配置.doc
- java如何写外键关联_JAVA基础:Hibernate外键关联与HQL语法
- 谷歌 I/O 2021 在音视频领域中有哪些技术值得被关注?
- java中nio怎么实现聊天,JAVA-NIO实现聊天室详细代码说明
- 04 java 基础:数据类型
- 分分钟使用Retrofit+Rxjava实现网络请求
- oracle安装总结
- ie浏览器查看vue中js_浅析 Vue.js 中那些空间换时间的操作
- linux切分文件指定行_vim技巧:在不同文件buffer间切换,在多窗口跳转和改变窗口大小...
- php相册上传和删除吗,php上传与删除图片的简单范例
- 哔哩哔哩PC客户端可以缓存视频了!
- 关于最优化问题的个人理解以及黑塞矩阵的示例
- 如何查看自己win10的产品密钥
- 电子书管理软件Calibre使用
- ECharts之阶梯瀑布柱状图
- 浅谈大数据风控的基本框架
- 【Android Jetpack学习之旅】--> Navigation 的使用
- 【2021】02 过年
热门文章
- 解决Eclipse开发工具Debug调试JDK源码无法查看变量值
- Linux服务器异常关机,重启启动后weblogic无法启动
- 经典排序算法(二十二)--图书馆排序(Library Sort)
- C++17特性一览(转载)
- 监听套接字为什么要设置成非阻塞的?
- 解决mysql不是内部或外部命令 菜鸟教程
- springmvc配置中文乱码过滤器
- matlab读入stl文件,【源码】二进制立体光刻文件(STL)的MATLAB读取函数stlread
- 机器人教练走进驾校_“机器人教练”走进镇江驾校
- mysql 里的1对n虚线_mysql workbench EER图,里面的实线以及虚线的关系