用CSS3将你的设计带入下个高度


尽管CSS3的诸多新特性还不被很多浏览器支持,或者说支持的不好。但作为一个前端开发人员,你总不能等到所有浏览器都完美支持它的时候再去学习。

CSS3到底给我们带来了哪些新特性呢?简单的说,CSS3把很多以前需要使用图片和脚本来实现的效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影等。CSS3不仅能简化前端开发工作人员的设计过程,还能加快页面载入速度。

本文里面,就让我们来全面的看一下CSS3的各种新特性。也别忘了检阅我们之前发布的一些CSS教程和技巧文章:

  • 60+CSS技巧教程资源大全
  • CSS3.0相关资源和参考手册收集整理

使用浏览器专有属性

为了使用大部分CSS3特性,我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在,大部分浏览器只支持部分CSS3属性。而且不幸的是,一些属性甚至到最后都可能不被W3C推荐,所以通过指定浏览器专有属性,将他们与标准属性区分开来是很重要的(然后在他们是多余的的时候使用符合标准的样式将之覆盖)。

当然,这种方法的劣势是,将导致一个杂乱的样式表和网站在浏览器之间的表现不一致。毕竟,我们不想在我们的样式表中重拾私有浏览器hack的需求。 Internet Explorer的臭名昭著的marquee、blink以及其它标签在大量样式表中被应用,并在20世纪九十年代成为一个传奇;它们依然让现存的很多网 站(在其他浏览器中)表现不一致甚至难以阅读。而我们现在也不想将我们自己置于同样的境地,对吧?

然而,网站不需要在所有的浏览器中看起来必须严格的一致。有的时候在某个浏览器中使用私有属性来实现特定的效果是可行的。

最常见的私有属性是用于Webkit核心浏览器的(比如, Safari), 它们以-webkit-开始,以及Gecko核心的浏览器(比如, Firefox),以-moz-开始,还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们自己的属性扩展(目前只有IE8支持-ms-前缀)

作为专业的设计师,我们不得不注意:使用这些私有属性将让我们的样式表不能通过验证。所以目前将他们放到最终版的样式中是少见的。但是在某种情况下,比如试验或学习,我们至少可以考虑将他们和标准的CSS属性一起写到一个样式表中。

扩展阅读

  • Vendor-specific extensions and W3C
  • Vendor-specific extensions to CSS3
  • Vendor-specific properties

1. 选择器

CSS选择器是个难以置信地强大的工具:它们允许我们在标签中指定特定的HTML元素而不必使用多余的 class、 ID 或JavaScripts。而且它们中的大部分并不是CSS3中新添加的,而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及 结构与表现更好的分离,高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。

属性选择器

三个新的属性选择器被添加到CSS3:

  • [att^="value"]
    匹配包含以特定的值开头的属性的元素
  • [att$="value"]
    匹配包含以特定的值结尾的属性的元素
  • [att*="value"]
    匹配包含含有特定的值的属性的元素

值的属性的元素

Andrea Gandino 在他的网站上使用:last-child 为选择器指定每篇日志的最后一个段落,并将其的外间距(margin)设置为0:

#primary .text p:last-child { margin: 0; }

浏览器支持: Webkit核心和Opera 浏览器支持所有新的CSS3 伪类,Firefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, only-child, :root, :empty, :target, :checked, :enabled 和:disabled,但是Firefox 3.5 将更加广泛的支持CSS3 选择器。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。

伪元素

在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮(选中)的元素。

浏览器支持: 目前没有任何一款Internet Explorer 或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。

扩展阅读

  • Selectors Level 3: W3C Working Draft
  • CSS3: Attribute selectors: CSS3.info
  • Compatibility table: CSS3 Selectors
  • CSS selectors and pseudo selectors browser compatibility
  • CSS3 Attribute Selectors
  • ::selection
  • General Sibling Selector
  • CSS3 Pseudo-classes


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3