使用CSS3:旧的浏览器和常见的注意事项

随着IE9的到来,微软已经暗示其意图与基于标准的技术工作。与IE浏览器的一个最流行的浏览器和浏览器的门外汉,在许多方面,这是希望拥抱的自由,因为我们做的CSS 2.1中使用CSS3的想法对我们网站的工匠长期期待的开始。然而,随着IE9的不支持以前版本的Windows Vista和很多企业仍然在运行XP,不愿(或无力)升级,它可能需要一段时间,直到我们的用户绝大多数将会看到付诸实践的新技术。

虽然很多人在那里使用CSS3,许多人并不那么热衷或不知道从哪里开始。本文将首先看后面的CSS3的想法,然后再考虑为旧版浏览器的一些良好的工作的做法和一些新的共同问题。

一个有用的比喻

最好的比喻解释CSS3的,我听说过有关电影的世界。制片人不能保证什么平台上,他们的观众将看到他们的电影。有些人会在电影院观看,有些人会在家里看他们,和一些便携设备上观看。即使在这几年的查看选项,仍然是一个潜力巨大差异:NSTM,DVD,蓝光,环绕声 – 有人甚至可能选择录影带!

所以,这是否意味着你不应该采取一切伟大的东西,蓝光允许声音和视频的优势,只是因为某人在某处不看电影,蓝光播放器?当然不是。使的好经验,你可以把它,然后将得到一个经验,是适合他们观看电影。

可以比较很多关于CSS3的3-D技术。他们都是领先的技术,增添了不少的经验。但一部电影,而无需使用3-D技术仍是完全可以接受的,有时甚至是必要的。同样的,你不需要CSS3的梯度到处飞溅,并使用各种字体,你可以找到。但是,如果一些确实提高了网站,那么为什么不呢?

然而,简单地等同对CSS3的3-D,切中要害。在许多情况下,对CSS3只允许我们做的事情,我们已经做了多年,但没有所有的麻烦。

优雅地降级或逐步提高?

在电影中,你创造最好的电影,你可以再定制产品的观景平台。听起来很熟悉吗?如果你已经涉足,甚至在CSS3的偷看,它应该。

有两个思想流派与CSS3的使用,这将是安全地说,双方的基本原则,是那些浏览器不支持CSS3的能力维持一个网站的可用性,同时提供对CSS3的浏览器增强。换句话说,确保电影看起来还是不错的,即使没有的3-D规格。在许多方面,学校的思想是类似的,不管你采用,你将面临许多相同的关切和问题,只有从不同的角度,。

优雅降级

随着优美的退化,你最好的浏览器的代码,并确保被剥离旧的浏览器对CSS3的各个层面,这些用户仍然得到一个可用的(即使不一定讨好)经验。

该方法是使用IE6的,唯一的样式表,让你服务的某些大多数用户的样式,而IE6和更低的用户提供备用风格相似(虽然不完全相同)。通常情况下,一个网站的IE6版本,删除或替换不以及任何布局怪癖的修复工作在IE6的样式属性。优雅降级的不同,它使用在浏览器本身的自然回退,修复浏览器的能力,而不是特定的浏览器版本确定。此外,优美的退化,不通常需要一套完全不同的风格。虽然,结果,是广大用户得到正常的看法,然后调整申请的人还没有发现更好的浏览器。

侵略性的优雅降级是在心脏硬汉安迪·克拉克最近的一本书,网页设计,和随行的网站,使伟大的利用优美的退化。有很多其他的例子,包括做网站需要看看在每一个Browser.com完全相同,始建展示技术,和维珍的vtravelled的博客,由约翰O’Nolan设计,这显示了一些微妙的回退大多数用户甚至不会注意到。如果你是一个WordPress用户,为什么不能在IE浏览器比较你的管理仪表板在另一个浏览器?

渐进增强

渐进增强如下的逆过程,建立低支持的浏览器,然后使用CSS3,以提高更多的浏览器的经验。这用来进行,仍然是由一些单独的增强样式表。

作为一个起点,大多数人将编写一个明智的基于标准的浏览器,然后添加一些代码来支持的浏览器如IE7和8,并可能抛出一些修复IE6的好措施,然后退一步想, “用CSS3,我怎么能提高呢?”从那里,他们会添加属性,如圆角,渐变,@ font-face的文本替换,等等。

由于浏览器制造商增加了支持,逐步增强似乎要坐后座,优美的退化。但是,渐进增强是一个很好的方法,开始与CSS3属性和学习他们是如何工作的。

该技术的例子包括个人网站 山姆-布朗埃利奥特杰伊股市,这两个功能浓缩型的样式表,埃利奥特已就此事发言,并从他2009年的Web方向的幻灯片南方谈话,“ 停止焦虑和获取(渐进增强和故意降解),“良好的阅读。

001

埃利奥特杰伊股票的演讲“停止担忧和获取它(渐进增强和故意降解)’

 

两相比较,优美的退化可以被认为是一个自上而下的方法,最有能力利用CSS3和工作缺乏支持旧的浏览器浏览器开始。

渐进增强工作的其他方式,自下而上,作为基准的选择基于标准的浏览器,以及可能与IE7,然后再加入CSS3的浏览器支持它。它的好处是,它很容易,当你刚开始使用CSS3的工作,它也是一个明智的做法,加入CSS3的旧网站时,
无论你选择哪种方法,有许多事情要考虑,有什么CSS3属性出来。后来,我们将着眼于某些关键性能的考虑。

怎么办呢?

不管你的方法,你将毫无疑问会发现自己在某些时候想通过共同的后备进程:这个元素看起来具有一定的财产,并没有它看起来会是什么呢?它看起来罚款或破碎?如果它看起来坏了,有一个很好的机会,你将需要做一些事情。

作为一个典型的路径,你会先用CSS3实现的功能,然后用CSS 2.1,然后用JavaScript(也许),然后您使用任何黑客使用旧版浏览器。你可以争辩说,渐进增强稍微修改这个路径,使用的CSS 2.1,然后再对CSS3。

在每一个阶段,你应该确定是否有辱人格的或增强的功能将变得过于复杂,是否只需提供一种替代将是更明智的。

排列属性

让我们在订货性质的快速外观和浏览器如何解释它们。浏览器制造商开始提供通过浏览器前缀CSS3的功能:万盎司,为Mozilla,Chrome和Safari,歌剧-O -webkit的,每个浏览器,然后忽略不意味着任何前缀。公约列出的浏览器特定的前缀,然后再默认属性,如下:

浏览器不支持该属性将忽略它。任何不支持的浏览器,它会执行其特定浏览器的版本,以及当它最终支持通用的属性,将实施。是的,这将创建一个小的开销,但是当你考虑CSS3的前取得这样的效果如何,这实在不多。

为什么下令这样吗?一旦所有的浏览器实现属性相同的方式,那么他们将采取的属性的默认版本,直到这时,他们将使用前缀版本。通过在上面显示的顺序列出的属性,我们要确保标准版作为后备支持一旦实施,希望领导更一致的跨浏览器的渲染。

JavaScript的

JavaScript是实现跨浏览器CSS3功能支持最常用的方法,它可以作为一种替代或使旧的浏览器CSS3属性,或者被用来作为替代使用。

MODERNIZR的

一个有用的JavaScript工具实现CSS3的回退是Modernizr的。对于任何人用CSS3工作在生产环境中(而不是仅仅作为一种概念证明),它是必不可少的。Modernizr的使您可以使用它支持的属性CSS3的,并提供合理的替代品,它不是。

002

 

Modernizr的工程类的HTML页面元素,然后你会在样式表中调用。

例如,不支持CSS3的梯度,以显示不同的背景,你的代码看起来像这样:

相反,以显示不同的背景,只有在支持CSS3属性,你会做到这一点:

有了这额外的控制,你可以定制输出相当准确,并避免任何可能出现的冲突,从丢失财物。在这种方式中,你控制什么财产的情况下,您量身定制输出到什么是明智的。在这种情况下,你可以为支持的情况下,对CSS3梯度渐变图像。

对CSS3的PIE

可悲的是,这有什么做可口的甜点。代表进步的IE浏览器对CSS3的PIE。作为官方的介绍说:

PIE的让Internet Explorer的6至8能够使几个最有用的CSS3的装饰功能。

003

 

虽然它不支持众多的功能,它允许您使用箱阴影边界半径没有做太多额外的代码在IE浏览器和线性渐变。首先,上传的CSS PIE的JavaScript文件,然后当你要应用的功能,你将包括在CSS,像这样:

SELECTIVZR相当简单,它可以节省你的麻烦有使用JavaScript黑客在IE中实现有一定的影响。

CSS3的不断扩大其超越先进,如选择的曲目=“选择”和伪选择,如:重点,包括诸如选择:第n-型,这给你更多的控制和重点,并允许您省却了很多的表象的类和ID。选择支持良莠不齐,种类繁多,尤其是与被引入的额外的选择。

004

 

因此,在您的CSS3的阿森纳第三武器,将极有可能的Selectivzr,使先进的CSS3被用来在旧的浏览器和选择的目的是在老版本的IE正视。

头部的Selectivizr网站下载并添加脚本。你将有一个JavaScript框架,如jQuery或MooTools的配对,但机会是你的工作已经有一个。值得一快看主页是因为不是所有的选择是由所有的JavaScript库的支持,所以确保你需要的是由您所选择的库支持。

有问题?

以上所有的解决方案的主要问题是,他们基于JavaScript,和一些网站所有者将既不对CSS3的支持,也不启用JavaScript的用户关注。最好的办法是编写理智和利用自然CSS回退,并允许浏览器忽略的CSS属性,它不承认。

这可能使您的网站看起来像所有唱歌,所有跳舞的CSS3为基础的设计,你在头脑里少了几分,但要记住,人不支持CSS3的数量没有启用,将低,最好的你能做的就是确保他们得到一个可用的,功能性和实用性的经验,您的网站,从而使您可以继续剪裁输出到用户的平台。

一些CSS3属性:注意事项和应急办法

正在使用的许多CSS3属性,现在我们已经习惯的CSS协议的每次迭代的怪癖和陷阱。给你一个快速启动的一些比较流行的CSS3属性,我们来看看一些您可能会遇到的问题和一些明智的方式下降,在旧的浏览器。

在这篇文章关于浏览器的支持的所有信息截至2011年5月是正确的。你能跟上更新,并检查了有关支持通过访问进一步信息findmebyIP。尚未检查比2时,Safari,Opera 9中,火狐浏览器7.0 2.0和Internet Explorer 6以上版本的浏览器支持。

边界半径

技术支持:谷歌Chrome 7.0 +,火狐(2.0 +标准角落,椭圆边角3.5 +),歌剧10.5 +,Safari 3.0以上版本,IE浏览器9

属性: 边界半径

卖方前缀-webkit的边界半径-MOZ-边界半径

例如使用(甚至弯道半径5像素):

*备用行为:将显示圆角方形。

005

 

WordPress的日志在IE浏览器按钮(左)和谷歌(右)。

 

如果没有额外的p或JavaScript,或者很多占尽天时地利,切片图像的麻烦,我们可以给元素使用的简单圆角边界半径财产。

浏览器不支持边界半径怎么样?最简单的答案是,不要打扰。有四舍五入不支持的浏览器中的角落真的值得冒这个险呢?如果是的话,那么你只需要做什么你已经做了多年的JavaScript黑客和图像。

这个属性你绊倒?事实上,边界半径是非常简单的。小心使用背景图像,因为在一些版本的浏览器一定的缺陷,保持图像的角落里,出现圆形。但除此之外,这是迄今为止最好支持CSS3属性之一。

边界图片

技术支持:谷歌Chrome 7.0 +,火狐3.6 +,Safari 3.0以上,歌剧11,不支持在IE浏览器

属性: 图像边界边界角形象

卖方前缀: WebKit的边界图像-MOZ-边境形象

例如使用(与切片的高度和宽度10像素图像重复):

后援行为:显示标准的CSS边框属性设置,或无边框如果不指定。

 

006

一个边境形象演示CSS3.info。底部的第一个标准的属性边境:双橙1EM

 

少预示着新的属性之间的边界图像属性,部分,因为它可以有点硬包装你的头左右。虽然我们不会在这里细讲,考虑你正在使用的图像,测试之前执行的财产的一些变化。什么样子,如果内容溢出边境?它将如何调整的内容?舒展重复投入之间选择一些思想。

申请前的边界,以确保一切都是正确的,并测试不同的大小和方向,如何重复边境看起来图像的实验。

007

一个在使用的边界图像Blog.SpoonGraphics。在左边的图像是边境基地的形象。

 

没有太多的回退的方式,除了传统的编码8个切片图像映射额外的p的边界,方法。这是一个大量的工作,实在是不必要的。选择一个合适的边框颜色和宽度应该是一个明智的后备浏览器无边界图像的支持。

框阴影

技术支持:谷歌Chrome 7.0 +,火狐3.6,Safari 3.0以上版本,IE浏览器9

属性: 框阴影

卖方前缀: -webkit的框阴影-MOZ-框阴影-莫兹不再需要火狐4)

例如使用(显示一个黑色的影子,由10个像素,右偏移10个像素,并有5个像素的模糊半径):

框的阴影,让您快速,轻松地添加一点点的阴影元素。任何人谁使用Photoshop中的阴影,烟花或类似框阴影的原则应该是较熟悉。后援行为:阴影不会显示。

008

一个微妙的左侧框的阴影,以及一种选择性的边界上的权利的后备。

 

在其缺席的情况下?你可以使用选择性的边界(即左侧和底部边框模仿薄框的阴影)。

RGBA支持:谷歌CHROME 7.0 +和FIREFOX 3.0 +,OPERA 10的+的SAFARI 3.0 +,IE浏览器9RGBA和HSLA

低合金高强度支持:谷歌Chrome 7.0 +,Firefox 3.0以上,Opera 10的+,Safari浏览器3.0 +

财产: RGBAHSLA

后援行为:颜色声明被忽略,并且浏览器回落到先前指定的颜色,默认颜色或没有颜色。

在上面的例子中,无论是背景声明指定红色。RGBA支持,将在50%(0.5)所示,在其他情况下,后援会亮红灯(#F00)。

 

009

24途径 RGBA的伟大的创造性运用。

 

虽然是不透明的广泛支持,其缺点是与元素相关的一切都变得透明。但现在我们有两个新的方法来定义颜色RGBA(红,绿,蓝,alpha)和HSLA(色调,饱和度,重量轻,α)。

都提供了新的方法来定义色彩,允许你指定的alpha通道值的好处。

RGBA和HSLA明显的回退是纯色没有问题,但主要的事情需要注意的是可读性。半透明的颜色,可以有相当不同的语调对原始。RGB值,显示了坚实的颜色和相同的值在0.75不透明可以根据大量不同背景树荫,所以一定要检查您的文字看起来映衬。

010

更改透明度可以影响覆盖文本的可读性。

 

如果透明度是至关重要的,你也可以使用背景的PNG图像。当然,这带来了IE6的老问题,但可以用JavaScript来解决。

改造

技术支持:谷歌Chrome 7.0 +,火狐3.6 +歌剧10.5 +,Safari浏览器3.0 +

3-D转换支持: Safari浏览器

性质: 改造

卖方前缀: -O-变换

用法示例(围绕中心旋转45°的p,其扩大到原来的一半大小-插图,所以翻译扭曲的价值观不需要):

后援行为:被忽略,变换和元素在其原来的形式显示。

011

westciv提供了一个有用的工具,玩弄与变换。

 

Transform 属性,让你的方式旋转,缩放和倾斜元素及其内容。这是一个伟大的方式来调整页面上的元素,并给他们一个稍微不同的外观和感觉。

一个简单的回退是基于图像变换的情况下使用替代的形象已经是旋转。如果你要旋转内容?好吧,你总是可以使用JavaScript旋转的元素。另一种简单的替代方法是事先旋转在一个图像编辑器的背景元素,并保持内容水平。

我们已经得到了这么多年的水平元素,还有人们对老的浏览器没有理由不能继续把与他们。

动画和过渡

转换支持:谷歌Chrome 7.0 +,Firefox的4.02,歌剧10.5 +,Safari浏览器3.0 +

动画支持:谷歌Chrome 7.0 +,Safari浏览器3.0 +

性质:

卖方前缀: WebKit的过渡MOZ-过渡O型过渡

例如使用(文字的颜色,悬停触发一个基本的线性过渡):

一个基本的动画,旋转,悬停的元素:

后援行为:动画和过渡只是忽略不支持的浏览器。与动画,这意味着什么也没有发生,没有内容是动画。与转换,这取决于如何被写入过渡;在悬停,如上面的情况下,浏览器只显示默认情况下,过渡的状态。

012

404页的网页设计会议2010年未来吸引纺纱背景的关注。在IE浏览器访问网站,你会看到一个静态背景图像。

 

CSS3的动画和过渡正在慢慢看到越来越多的使用,从微妙的悬停效果更复杂的移动和旋转在页面上的元素。最具影响开始在页面加载或(更频繁)是用来加强悬停效果。一旦你得到与动画脏,有伟大的乐趣,他们的设计师现在比以前更容易。

开始CSS3的小过渡的财产,是最好的,巧妙的过渡,如链接悬停,前移动到更大的事情

一旦你舒适的基本过渡和转换,你可以进入更复杂的动画属性。使用它,你宣布与动画关键帧@-webkit的关键帧,然后调用这个关键帧动画等元素,宣布时机,迭代等,注意工作的CSS3转换,动画优于其他属性,所以坚持改造转化而不是转移利润或绝对定位。

当然,人们一直在动画与JavaScript多年。但是,如果你想要做一些简单的动​​画悬停状态,那么它似乎并不值得额外的编码。最简单的事情做不支持的浏览器是一个国家,没有任何过渡,指定为悬停。

字体(CSS3中新)

支持不同的字体格式:谷歌Chrome 7.0 +时,Firefox 3.1 +,歌剧10 +的Safari 3.1 +,IE浏览器6 +

属性: @ font-face的

例如使用(一个_AT_ font-face的声明块五的OTF字体,并呼吁H1标题):

后援行为:就像是没有任何声明的字体时,浏览器继续向下,直到找到一个可用的字体字体堆栈。

013

网页设计新的冒险会议服务从字体Typekit

 

好吧,这是不严格新CSS3的。你们中许多人会指出,这已遍布只要为IE5的。然而,文本替换,当然开始增加使用浏览器制造商推出增加支持 @ font-face的

@ font-face遭受的一个问题是,字体不显示在屏幕上,直到浏览器已下载到用户的机器,有时这意味着用户将看到一个“无样式的文本闪光”(的FOUT)。也就是说,浏览器显示一个从进一步下降,直到它已完成下载的堆栈或默认字体的字体 @ font-face的文件,一旦文件下载,文字闪烁,因为它切换到 @ font-face的版本。因此,最大限度地减少闪光灯堆叠类似的大小和重量的字体是很重要的。如果堆栈编制不足,则不仅可以将文字调整大小,但可能包含的元素,这会混淆用户已经开始阅读之前,正确的字体已加载页面。

好消息是,火狐4不会有任何的FOUT较长,IE9的,但是,确实有一个的FOUT但WebInk写脚本的FOUT-B了,考虑到这些事实,并帮助你隐藏你的用户的FOUT在FF3.5-3.6和IE浏览器。

014

在他的博客,网站设计师的弗洛里安Schroiff使用@ font-face的服务普拉特字体(底部),回落至格鲁吉亚Constina,(顶部)和Times New Roman。

 

提供许多字体送货服务,包括TypeKitGoogle网页字体,其字体,通过JavaScript,这使您可以控制显示的内容,而正在下载的字体,以及发生了什么时字体的实际负荷。

由于浏览器等待直到显示之前加载的字体包文件,大量的服务让你去掉不必要的部分,以减少大小的套件。例如,如果你不打算使用小型大写字母,然后你可以去除它的文件,使字体呈现更迅速。

高级选择

支持(因使用上的选择而定):谷歌Chrome 7.0 +,火狐3.6 +,歌剧9.0 +的Safari 2.0 +,IE浏览器6 +

财产:很多,包括:第n-型第一孩子:最后的孩子属性=“...”]

例如使用(着色唯一联系点碎杂志,着色奇数编号的表中的行):

先进的选择是一个伟大的工具,减少网站上的代码。你就能摆脱许多表象类和获得更多的选择在你的样式表控制。后援行为:在浏览器的支持,没有先进的选择,并不适用于针对性风格的元素和简单地视为任何其他类型的元素。在上述两个例子中,该链接将采取标准的链接属性,但不是指定的颜色,奇数表中的行会被其他表中的行相同颜色的。

使用Selectivzr,你可以得到较旧的浏览器,以支持这些先进的选择,这使得选择更容易使用和更强大的。

015

我们可以很容易地分配使用第n-型选择的样式。然而,因为在这个例子中的样式是直接挂钩的内容,坚持类名会更好,除非你是100%肯定,词的顺序不会改变。

类和ID完全放弃青睐第n-型是诱人的。但不只是还没有扔掉。使用先进的选择时,元素的风格是其位置的文件或一个系列的基础,例如,使用第n-型(奇数)为表中的行或利用最后的的的类型删除一些列表的底部填充。

如果一个元素的风格是根据其内容,然后坚持用类和ID。也就是说,如果插入一个新元素或更改项目的顺序,将打破风格,然后坚持用老方法。

然而,如果一个元素已经足够风格,那么你可能并不需要一个额外的类,在所有(也不是一个先进的选择,为此事)或ID。

技术支持:谷歌Chrome 7.0 +,Firefox 2.0中,Safari浏览器3.0 +,歌剧11.10 +

属性: 列数

卖方前缀: -webkit的列数-MOZ-列数

例如使用(分裂成三列内容):

后援行为:支持多列的情况下,浏览器传播的内容,已列横跨全宽。

016

德莱昂Inayaili的网站上多列和他们的后备。

 

这个属性给你一个很好的简便的方法,传播跨多列的内容。该技术是在打印标准,并在网络上,它可以很容易阅读,而无需滚动的内容。但你并不需要我告诉你,你呢?

因为财产的主要目的是让用户无需滚动即可阅读水平,首先要确保您的列不太高。不仅具有滚动和读取列击败他们的目的,但实际上的内容难以阅读。

有多个列的一些JavaScript解决方案。不过,对于旧版本的浏览器,一般没有必要坚持一个多列布局,而是,你可以考虑回退的明智选择。

017

不支持多列,块上的报价tweetCC在风格变化。

 

在CSS3支持的情况下,浏览器将流过的容器宽度的内容。你要小心有关可读性。它可以非常听说读跨越,目的是要被断成三列的宽度的内容。在这种情况下,你要设置一个合适的线路长度。这样做有几个途径:增加利润,改变字体大小或减少元素的宽度。浮动元素,如图像和块引号的文本流可以帮助填补任何剩余的空间,在单个列。

梯度

技术支持:谷歌Chrome 7.0 + -webkit的梯度,谷歌10 + WebKit的线性梯度WebKit的径向梯度时,Firefox 3.6 +,Safari浏览器

财产: 线性渐变径向渐变

供应商

例如使用(线性的白色到黑色的渐变,从上到下运行-注意缺乏线性的WebKit声明):

运行在从白到黑在外面中心径向渐变:

后援行为:浏览器将显示相同的行为,因为它缺少的图像文件(即无论背景或默认颜色)。

018

ColorZilla的终极CSS梯度发生器提供了一个熟悉的界面,产生梯度。
啊,好棒的’Web 2.0外观,但使用什么但是CSS。值得庆幸的是,渐变有光泽按钮被用来从很长的路要走,这对CSS3属性是在进化的最新步骤。

梯度应用背景图片的方式,有几种方式做到这一点:十六进制代码,RGBA和HSLA。

要小心时,与背景元素,如身体的高度为100%。在一些浏览器,这将限制梯度可见页的边缘,所以你失去的梯度向下滚动(如果你没有指定一种颜色,然后背景是白色)。通过设置背景位置固定,以确保背景不动,滚动,你可以解决这个问题。

指定的背景颜色,不仅是一个很好的的后备做法,但可以防止不可预见的问题。作为一般规则,将其设置到渐变的一端,或在中间范围的颜色。

易读性也是一个考虑因素。对了坚实的背景颜色的文本可读性是很容易的。但如果一个渐变是戏剧性的(例如,从很轻很暗),然后选择文字颜色渐变的范围,将工作超过。

径向梯度是一个有点不同的,习惯的起源和传播可以采取的玩弄位。但是,该原则同样适用。请注意开关Webkit浏览器WebKit的梯度属性WebKit的线性梯度-webkit的径向渐变。为了安全起见,包括属性,但(正如我们已经学会)提出之前,新老物业。

这些问题是不是新的,我们一直在使用的年龄梯度。如果你真的需要一个,那么明显的回退是简单地使用图像。虽然它不会适应容器的尺寸,您将能够设置其确切的尺寸,您认为合适的。

多重背景

技术支持:谷歌Chrome 7.0 +时,Firefox 3.6 +,Safari浏览器2.0 +,IE浏览器9

属性: 背景

例如使用(以逗号分隔的多个背景之上,它后面的第二,第三在他们身后,等):

后援行为:不受支持的浏览器将显示只有一个形象,顶一个(即首次在声明中)。

019

美妙的失落的世界博览会的网站显示在它的头和纯色作为一个备用的多个背景。

 

可以设置多个背景图像是非常有用的。您可以在彼此之上的层图像。因为CSS梯度​​可以应用为背景,你可以层的多个图像和轻松的梯度。

您还可以动态大小的容器内定位的背景元素。例如,你可以有形象出现下降容器25%和75%,这两个移动任何动态内容,然后在另一个。

如果有多个背景到您的网站是必不可少的,你可以插入到DOM中的其他元素和图像使用JavaScript。不过,这是值得做的事情吗?一个单一的精心挑选的背景图片可能效果最好。采摘的最重要的图像或融合成一个复合的图像(即使这使得少动的背景),这可能是一个问题。

仅使用需要的地方

这是值得重复的,对CSS3不是必需品。只是因为你可以使用CSS3属性,并不意味着你的网站,这是他们没有任何更糟。运用这些影响现在这么简单,所以带走变得太容易。你真的需要轮的每一个角落,到处或使用多重背景?正如电影的3-D无工作,所以要你的设计是能够工作,没有CSS3的到处乱泼。该技术仅仅是一种工具,以使我们的生活更轻松,并帮助我们创造更好的设计。

这是一个证明那些已经使用CSS3,有极少数情况下,目前滥用。似乎滥用它的网站为了自身的利益,他们的设计师对CSS3,或不考虑其影响,在某些平台上。

2010年在“网页设计趋势:现实生活中的隐喻和CSS3的适应,“非凡杂志的维塔利·弗里德曼指出,滥用的文字阴影财产。

020

一对CSS3小于理想上SramekDesign.com使用,。
必将成为流行的文字阴影属性。一个像素的白色阴影弹出文本中随处可见,没有明显的原因。正如维塔利说:

… CSS3的功能添加到您的网站之前,确保它实际上是一个增强,加入美学和可用性,可用性的成本不美学的目的。

当你成为熟悉CSS3的新特性,您将学习认识到何时何地出现问题,其中的属性是不是真的有必要。

使用CSS3

CSS3的是Web的未来,没有这样的说法。因此,在未来的语言,自己现在versing很有意义。虽然IE仍然是最流行的浏览器,它现在拥有的市场份额超过一半,这意味着大多数人不再使用它,它可以不再为借口,不探索新的可能性和机会。

使用CSS3的手段来拥抱网站需要看在每一个浏览器相同的,而是应根据用户的浏览喜好,通过合理的回退的原则。这不是令人望而生畏,或是人迹罕至,最好的学习方法是由潜水英寸

其他资源

如果您想了解更多信息,很多是有。这里有一些选择,让你开始。

 

原文:http://coding.smashingmagazine.com/2011/05/03/using-css3-older-browsers-and-common-considerations