提升你设计水平的CSS3新技术[译]
作者:暴风彬彬 来源:彬go 发布时间:2009-08-02 20:51:00
前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章,它详细介绍了CSS3的新特性和它的使用方法,它包括:浏览器专有属性、选择器(属性选择器、连字符、伪类、伪元素)、RGBA和透明度属性、多栏布局、多背景图、Word Wrap、文字阴影、CSS圆角、边框图片、盒阴影、盒尺寸、媒体查询、语音,并详细说明了每个新技术目前有哪些浏览器兼容。彬Go本想将本文翻译成中文版和大家分享,但发现已有国人完成翻译,所以就偷个小懒,转载一下人家的翻译,在此感谢前端观察的博主辛苦翻译本文,为大家贡献了如此珍贵的学习资料。
如果你热爱前端开发,你对CSS感兴趣,那么你肯定不可错过这篇文章。
级联样式表在13年前被引入,而且被广泛使用的CSS 2.1 标准在11年前被创建,显然我们现在已经与当年相差千里了。相当了不起的是期间网站开发有了多少进步——事实上,我们也无法想象。
为什么会这样呢,当提到CSS的时候,过去我们是如此的不情愿和害怕尝试?为什么我们还要使用讨厌的hack和依赖JavaScript的技术来写样式?为什么我们不能利用丰富的CSS3 特性和现代浏览器中可用的工具 并将我们的设计品质带到下一个等级?
是时候在我们的项目中引入CSS3 特性了,不用害怕逐渐在我们的样式表中加入css3特性和选择器会出问题。让我们的客户意识到CSS3的优势 (而且让旧浏览器更快的消失)是我们力所能及的事情——我们应该这样做,特别是在它能够让网站更加灵活并减少开发和维护成本的时候。
在本文中,我们将研究CSS3的优势,并看一下一些网页设计师是如何使用它们的。最后,我们将了解到从CSS3中我们能得到什么以及我们如何在我们的项目中使用它的新特性。
同时请参考我们之前的一篇相关文章:
使用CSS3将你的网站设计推向未来
使用浏览器专有属性
为了使用大部分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属性一起写到一个样式表中。
扩展阅读
1. 选择器
CSS选择器是个难以置信地强大的工具:它们允许我们在标签中指定特定的HTML元素而不必使用多余的class、 ID 或JavaScripts。而且它们中的大部分并不是CSS3中新添加的,而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及 结构与表现更好的分离,高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。
属性选择器
三个新的属性选择器被添加到CSS3:
[att^="value"]
匹配包含以特定的值开头的属性的元素[att$="value"]
匹配包含以特定的值结尾的属性的元素[att*="value"]
匹配包含含有特定的值的属性的元素
值的属性的元素
tweetCC 使用一个属性选择器来指定有title属性并以字符“tweetCC”结尾的链接:
a[title$="tweetCC"] {
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: -9999px;
}
浏览器支持:只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你的样式中使用属性选择器是比较安全的。
猜你喜欢
- 记得很早以前看到过这样的一段介绍:想象你在逛街边的一家书店,如果最终你没有购买任何图书就直接离开了,店长并不会知道你来过。但是如果你买了书,
- ASP实现语音分时问候,其实asp实现这个功能很容易,时间判断一下,在某个时间段就调用某个的背景语音。下面是源代码:
- PHP原型模式Prototype Pattern是什么原型模式是一种创建型模式,它可以通过复制现有对象来创建新的对象,而无需知道具体的创建过
- 今天来讲一下一些实现html中表格隔行换色的方法,即每隔一个行表格的背景色就不同,有静态html/css实现的,也有asp动态实现的。这个功
- 开发web应用程序是一件非常辛苦的事情,你需要花大把大把的时间来做无数的事情。假如你不运用有条理的方法,尤其是在复杂的项目中,你会承受忽视项
- 本文主要介绍 SQLServerExpress2008不用第三方工具调试T-SQL语句,经过本文的介绍,用SQLSERVER2008 Man
- 前言 一直用ASP+ACCESS来编写网页和公司的内部应用系统,内部应用系统也就是大家说的OA吧,这个我也不知道,公司又叫它ERP,反正不管
- MySQL GUI工具很多,本文就常用的Navicat for MySQL与MySQL-Front的特色功能做一个详细介绍与比较。(一)My
- 蜜蜂可以看到紫外线,人则看不到;蛇和蚊子可以看到红外线,人则看不到。火狐(Firefox)浏览器也可以看到人们看不到的东西,但迄今为止,这些
- 什么是Css Hack?由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 11 - Using Fx.Morph, Fx O
- 深藏多年秘笈大公开,全世界唯一一家公布,怎么点就是点不出,纯CSS去掉按钮或者链接点击产生的虚线。运行代码框<style type=&
- 对很多从事产品工作的同事来说,“以用户为中心”是工作的重点,同时也是难点。用户的心思难以捉摸,用户研究的工作也似乎高深莫测。不过,用户研究并
- 从大的发展来看,网站就是一块试验田,一块在错误中成长、在错误中变强变大的试验田。这决定了互联网产品的成长路线,一定是一个反复修正和迭代的曲线
- Windows客户端业务群产品营销主管斯蒂芬最近在向记者示范Internet Explorer 8 Beta2版浏览器的技术特征时标识,与用
- 如何使用Iframe实现本页提交?例:chunfeng.html< html>< head>&n
- 在安装了IIS以后,缺省的服务器端脚本语言被设置成VBScript。许多Web 开发团队在他们的开发环境中保持了这些缺省设置,这是不幸的,因
- 就像标题呈现的一样,SQL Server 2008中的MERGE语句能做很多事情,它的功能是根据源表对目标表执行插入、更新或删除操作。最典型
- 阅读上一篇:FrontPage2002简明教程六:图片库 虽然FrontPage已经给我们提供了很多面很强大的所见即所得的工具,但是随着HT
- 常见的双倍边距类问题都遇到过,但很少遇到这种有意思的,所以记录一下。这个BUG是发生在Standards模式下(就是包含XHTML或者HTM