第1章 揭开CSS3的面纱

第一章 揭开CSS3的面纱

如果关注前端方面的技术,那么对CSS一定不会陌生,你肯定听说过CSS3。在使用CSS3之前,应该对这个新一代语言样式表语言的来龙去脉有个基本了解。

1.1 什么是CSS3

CSS3并不是一门新的语言。如果接触过CSS就知道,CSS是创建网页的另一个独立但并非不重要的一部分。CSS是种层叠样式表,是一种样式语言,用来告诉浏览器如何渲染你的web页面。

CSS3是CSS规范的最新版本

1.1.1 CSS3的新特性

CSS3新特性非常多,这里挑选一些被浏览器支持较为完美、更具实用性的新特性。

  1. 强大的CSS3选择器
  2. 抛弃图片的视觉效果
  3. 背景的变革
  4. 盒模型变化
  5. 阴影效果
  6. 多列布局与弹性盒模型布局
  7. Web字体和Web Font图标
  8. 颜色和透明度
  9. 圆角与边框的新法
  10. 盒容器的变形
  11. CSS3过渡与动画交互效果
  12. 媒体特性与Responsive布局

1.1.2 CSS3的发展状况

CSS3的每一个模块都有它自己的更新(进度表)时间。有兴趣的可以到这里-(点我查看进度)查看到CSS3当前发展的详细进度。

1.1.3 现在能使用CSS3吗?

CSS3还在不断完善中,很多功能还处于草稿阶段,但部分模块进入了"候选推荐"状态,说明在Web设计中完全可以使用这些模块。我一般都是通过can i use查看一个属性的浏览器支持情况的。

1.1.4 使用CSS3有什么好处

与CSS比起来,使用CSS3有什么好处呢?最明显的就是CSS3能让页面看起来非常炫、非常酷,使网站设计锦上添花,但是它的好处远远不止这些。在大多数情况下, 使用CSS3不仅有利于开发与维护,还能提高网站的性能。与此同时,还能增加网站的可访问性、可用性,使网站能适配更多的设备,甚至还可以优化网站SEO,提高网站的搜索排名结果。下面介绍CSS3特有的好处。

  1. 减少开发与维护成本
  2. 提高页面性能

1.2 浏览器对CSS3的支持情况

想知道用户能够体验到那些CSS3的新特性,必须了解当前浏览器对CSS3特性的支持程度如何。我一般都是通过can i use查看一个属性的浏览器支持情况的。

1.2.1 经典回顾:图说浏览器大战

1.2.2 浏览器的市场份额

  • 浏览器国内市场份额

2016-1 到 2016-11 百度统计结果 查看最新份额

  • 浏览器全球市场份额(略)

1.2.3 主流浏览器对CSS3支持情况

幸运的是,CSS3特性大部分都已经有了很好的浏览器支持度。各大主流浏览器对CSS3的支持越来越完善,曾经让多少前端开发人员心碎的IE也开始挺近CSS3标准行列。当然,即使CSS3标准制定完成,现代浏览器要普及到大部分用户也是一个相当漫长的过程。如果现在就要使用CSS3来美化你的站点,有必要对各大主流浏览器对其新技术的支持情况有一个全面的了解。

  1. 主流浏览器对CSS3属性的支持情况(下图数据来源findmebyIP

  2. 主流浏览器对CSS3选择器的支持情况(下图数据来源findmebyIP

1.3 渐进增强

渐进增强并不是一种技术,而是一种开发的方式,更是一种web设计理念。首先思考一个问题:“网站是否需要在每个浏览器中看起来都一样?” 带着这个问题来看渐进增强。

1.3.1 渐进增强与优雅降级

正如前面所言,渐进增强并不是一种技术,而是一种开发的方式,更是一种web设计理念。在编写web页面时,首先保证最核心的功能实现,让任何低端的浏览器都能看到站点内容,然后考虑使用高级但非必要的CSS和JavaScript等增强功能,为当前和未来的浏览器提供更好的支持,给用户带来更好的体验。

在设计的时候,先考虑低端设备用户是否能够看到所有的内容,然后在此基础之上为高端用户进行设计。不仅为高端设备用户提供一个完美的应用,也要为不同性能级别设备的用户设计不同级别的不那么完美的应用。这成为“优雅降级”

1.3.2 渐进增强的优点

向尽可能多的用户提供尽可能优质的用户体验

CSS的渐进增强有别于CSS的hack。hack是浏览器厂商的一种手法,用来增强自己的竞争,而渐进增强起到锦上添花之效。所以前者应该尽量避免使用,而后者应该适当使用。

1.4 CSS3的现状及未来

1.4.1 谁在使用CSS3

国内外使用CSS3特性制作网站的案例越来越多,特别是一些优秀的个人站点,更是运用得出神入化。

1.4.2 CSS3的未来

CSS3无疑对web前端开发带来质的飞跃。虽然目前CSS3还没有完全普及,而且浏览器也不完全支持,但对于我们积极地去学习和实践并不矛盾,掌握和学习CSS3将是大势所趋。CSS3将是引导我们进入编写网页精彩世界的先驱技术。开发人员能够更轻松地创建功能强大、易于维护网站。

随着旧版浏览器所占市场份额逐渐减少,学习CSS3技术将更有价值。这是作为一个优秀前端开发人员所必须掌握的技术之一,也是前端开发人员的大势所趋。

当然,学习一门新技术不能跟风,需要理性思考,这种理性思考并不表示对新技术的畏缩,同时也应该明白学习新技术可能会遇到的困难和风险。只有这样,才能更好的驾驭CSS3。

1.5 本章小结

本章主要介绍了什么是CSS3、CSS3的发展状况、新特性,以及浏览器对CSS3的支持情况;同时,引进了渐进增强的设计理念。通过本章的学习,可以对CSS3有一个初步的了解。学习CSS3的好处有很多,它能让你始终处于web设计的前沿,增加你的职业技能和竞争力,还能帮助你缩短与顶级设计师或开发者的距离。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,136评论 0 1
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,617评论 0 7
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,219评论 0 8
  • 我们总是在网上秀恩爱秀孝顺,却不肯对身边的人说一句,对不起我爱你。很简单的一句,都说不出。或许是爱在心口难开吧。把...
    周小善阅读 491评论 0 0