技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> 用CSS 3将我们带入下一个高度吧!

用CSS 3将我们带入下一个高度吧!

浏览:1818次  出处信息
照片

CSS 3 不是新事物,更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里,已经准备好了首次登场,呷着咖啡,等着浏览器来铺上红地毯。你看,浏览器需要跟上了……

-谨以此文纪录ISD WEBTEAM 09年Q2力作:CSS 3.0 中文参考手册

    背景

苏昱的《样式表中文手册》为代表的CSS2.0参考资料伴随了国内众多web设计师们走过了近10年的时光,这种影响是深远的,但随着CSS技术的不断发展,设计师们多受传统资料的影响,不能超脱现有的篱笆,给自己背上了沉重的包袱。你是否已注意到CSS 3已经蓄势待发?你是否渴望开始使用它们却又不知从何下手呢?正当CSS 3新特性备受期待的时候,我们的CSS3.0 中文参考手册就应运而生了……

    什么是CSS 3?

CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    CSS3.0 则表示下一版本的CSS,3.0是版本号。

CSS 3给我们带来了什么惊喜?

CSS3.0对于我们Web设计人员来说不只是新奇的技术,更重要的是这些全新概念的web应用给我们的设计更多的无限可能性,也极大的提高了我们的开发效率。我们将不必再依赖图片或者 Javascript 去完成圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等提高Web设计质量的特色应用。CSS 3 .0的出现,让代码更简洁、页面结构更合理,性能和效果得到兼顾。

    使用说明

本手册服务对象为网页重构师或前端开发工程师。本手册根据W3C工作草案进行翻译,存在一定的不确定因素,最终解释权归ISD WEBTEAM所有。本手册的编排参考css3.info的CSS Preview将CSS 3 属性分为边框、背景、颜色、文本、用户界面、基础盒模型、内容、其它模块、高级选择器九大类。兼容性列表暂时提供Internet Explorer、FireFox、Opera、Safari、Chrome的正式版浏览器兼容性。私有属性列表中,使用Gecko引擎的浏览器有Firefox,私有属性以-moz-开始;webkit引擎的浏览器有Safari、Chrome,以-webkit-开始;Presto引擎的浏览器有Opera,以-o-开始, 以及Internet Explorer,以-ms-开始,目前只有IE8支持-ms-前缀。针对每个属性制作的示例除了@font face因涉及字体版权取自微软的示例,其它均为团队成员结合自身的沉淀制作,由于手册篇幅的局限性,也许有些示例难以理解,后续我们将对这部分示例单独以文章详细分析。继承性,鉴于W3C工作草案未对继承性有较清晰的说明,本期未对继承性有测试,暂不具备参考价值。如下载的CHM文件打不开,可以尝试右键点击CHM文件,然后在“属性”中“解除锁定”。本手册主要用于交流,限于时间紧张,且为业余深耕夜作,错误和遗漏难免,望大家在使用中多多反馈。我们会不断的完善和升级本手册。这里提供手册V1版,以月为单位不定期更新。

CSS 3.0 参考手册 (中文版) 预览:

不管你是第一次准备去认识CSS 3,还是已经略知皮毛,CSS 3.0 参考手册 (中文版)将有助你更好的学习和理解CSS 3 。还等什么?猛击http://webteam.tencent.com/css3/下载吧!

    总结

CSS 3 属性不仅可以极大的提高我们的工作效率,让一些最耗时的CSS任务不费吹灰之力就能搞定,并且可以使用更简洁和更轻量的代码标签。虽然一些属性尚未被广泛的支持,但这并不意味着我们不能为使用高级浏览器的用户提供更好的体验。

CSS 3 能让我们的优化工作有了新的突破。当你已经完成了图片合并、代码精简等优化工作之后,正在焦头烂额不知道还要做啥的时候,可以尝试把用户进行拆分,去寻求更深层次的突破。例如针对一些高级浏览器使用圆角属性,在IE浏览器使用条件注释(或者hack),那么是不是可以在保证效果的同时,让网页更快的呈现在使用高级浏览器的用户面前呢?

如果我们的网站在各个浏览器里的一个差异不影响美观和网站的可用性,它就应该是被考虑的。如果我们继续浪费大量的时间和精力以使每个细节绝对一致(而不是采用更灵活的和未来导向的方案),用户将没有升级他们的浏览器的任何动机,我们也就不能更早、更广泛的使用它们。

我相信随着时间的推进和更多浏览器的支持,CSS 3 将越来越受欢迎,它将为web设计师们带来无穷的能量。Web设计师们,还等什么?让我们一起来感受CSS 3 的能量,用CSS 3 将我们带入下一个高度吧!

    特别鸣谢

项目过程中,我们也遇到了很多难点,W3C未正式发布CSS 3 ,工作草案不断更新,存在诸多不确定因素,中文资料匮乏,涉及多个浏览器多个版本的浏览器兼容性测试,测试过程繁琐等等,项目组成员都逐步克服,感谢大家在平时需求压力也比较大的时候还能保持着很高的激情参与到CSS 3 项目中来,在公司加完班,回家了还忙着翻译、测试浏览器兼容性等等,有时候CSS3项目群里讨论的聊天记录到凌晨1、2点…正因为有了可爱的你们,项目才能如此顺利的进行,他们是:

    照片

建议继续学习:

  1. CSS3入门——由点到面    (阅读:3713)
  2. CSS3 媒介判断与 iPhone 4 视网膜显示屏    (阅读:2751)
  3. 闲谈CSS3动画    (阅读:2658)
  4. 用css3写个logo    (阅读:2592)
  5. 用 CSS3 Transitions 实现动画    (阅读:2360)
  6. 理解CSS3线性渐变    (阅读:2307)
  7. CSS3开发工具收集    (阅读:2268)
  8. CSS3 appearance简介    (阅读:2278)
  9. CSS3常用功能的写法    (阅读:2210)
  10. CSS3圆角详解    (阅读:2174)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:Reflow
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1