|
|
51CTO旗下网站
|
|
移动端

3.1.2 渐进增强

《前端程序员面试笔试宝典》第3章CSS基础,本章介绍的是CSS的基础知识,包括CSS的定义、目标和标准化等。本节为大家介绍渐进增强。

作者:平文来源:机械工业出版社|2018-11-09 16:36

3.1.2  渐进增强

各大主流浏览器对CSS3的支持度越来越高,IE也走上了CSS3标准之路。不过IE6~IE8发布比较早,对CSS3的支持度很低。图3-2是从StatCounter网中获取的国内桌面浏览器市场份额柱状图。

从图中可以看到IE的霸主地位已经不复存在,Chrome的占有率遥遥领先,IE8还有6%左右的量,IE6和IE7的份额已经非常少,支持CSS3的浏览器已经成为主流,这对CSS3的推广是一个好消息。但是,各个浏览器对具体的CSS3模块的支持度还是有差异的,有些完美支持,有些根本不支持,有些需要使用浏览器特有的前缀才能间接支持。浏览器通过在名称前添加特有的前缀,来实现实验性或私有的非标准特性,常用的前缀有4种,如表3-1所列。

表3-1  浏览器前缀

各个浏览器的渲染能力各不相同,要做一个每个人看到的网页、感受到的体验都一致的网站,几乎不可能。但还是要确保网站的可访问性,保证用户在任何环境下,都能正常访问核心内容或使用基本功能(避免页面打不开、排版错乱等),并为他们提供当前条件下最好的体验,这是渐进增强的核心思想。渐进增强(Progressive Enhancement)并不是一种技术,而是一种设计思想。浏览器对CSS的容错性很高,遇到不认识的CSS属性,会直接忽略,利用这个解析规则,可以很容易地实现渐进增强,例如IE6没有圆角属性,那么就用默认的直角,而在Chrome中,如果当前版本不支持标准的圆角属性,那么就用前缀,代码如下所示。

  1. input {  
  2.   -webkit-border-radius:10px;  
  3.   border-radius:10px;  

常见笔试题:1.什么是CSS预处理器?

答案:CSS预处理器(CSS Preprocessor)为CSS增加编程特性,通过编译器将使用新语法的文件输出为一个普通的CSS文件,解决CSS难以复用、代码冗余、可维护性低的问题,对CSS来说不是锦上添花而是雪中送炭。常用的预处理器有Less、Sass和Stylus。

2. CSS预处理器有哪些优缺点?

答案:CSS预处理器的优点如下所列:

(1)用变量存储多次引用的信息(如颜色值、字体、边距等),只需修改一个地方,就能让所有引用之处都随之改变。

(2)新语法中的混合(mixin)能够重用一段样式代码,可用混合将自动截取或列表中的小箭头样式组织在一起,需要这段代码的选择器只需简单引入即可。

(3)内置丰富的函数,可处理颜色、字符串、数字和选择器等,也可自定义函数,适应特定需求。

(4)可像JavaScript那样使用数学运算(如加减乘除等),条件判断和循环,几句代码,就可描述一大段CSS样式。

(5)选择器可嵌套选择器,沿着嵌套的选择器链向上组合形成最终的选择器,嵌套的形式模拟出了HTML的层级结构,同时形成了命名空间,选择器之间的关系更明显,增强了文件的可读性。

(6)导入规则可让各部分代码保持独立,模块化管理,各个导入的文件最终被编译生成一个CSS文件。

CSS预处理器的缺点如下所列:

(1)通过编译生成CSS文件,降低了对CSS文件的控制力,如果书写不当,那么编译出的CSS文件将会巨大而复杂。

(2)调试难度增加,在浏览器中调试的是编译后的CSS文件,并不是编译前的源码。

(3)带来了一定的学习成本,新人需要学习预处理器的语法规则。


喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书会第9群:808517103

【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

Linux环境下C编程指南

本书系统地介绍了在Linux平台下用C语言进行程序2018送彩金的娱乐网站的过程,通过列举大量的程序实例,使读者很快掌握在Linux平台下进行C程序2018送彩金的娱乐网站的方法和技...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
博聚网