CSS3提示

网页设计师花了很多时间生气。如果他们不抱怨网上设计还没有一些排版精确的东西,那么他们就会对互联网浏览器如何再次在谷物中留下令人讨厌和臭味的东西感到不安。因此,作为解决所有问题的解毒剂,本月的CSS文章充满了肆无忌惮的乐观情绪。我们要做的是看看CSS3即将推出的一些功能,并展示它们如何对网页设计师有所帮助。

请注意,这不是CSS3的完整指南;这是一个快速浏览CSS3中的一些方便的东西,你已经可以玩了。目前并不是所有的东西都具有实用性(IE仍在追赶CSS2,更不用说CSS3了),但仍然值得关注CSS3,因为有些属性可以为网站添加一些额外的闪光而不会影响它仍然适用于使用数字相当于铸铁冲浪板冲浪的用户。

(请注意,对于本文,我们使用Safari 3.1,Opera 9.5b2和Firefox 3预先命名为Minefield进行测试;当此杂志最终掌握在您的手中时,可能会存在更多兼容的浏览器。)

写东西

CSS的主要优点之一是排版控制。虽然CSS忍者仍然无法从排版角度与使用InDesign进行打印的人竞争,但事情仍然取得了巨大进展

虽然CSS2的一部分,很少有浏览器支持文本阴影,但现在Safari和Opera都支持基本阴影,而Opera支持多个阴影

使用CSS3,一个以前的专有财产已经进入规范,并且在这些日子里完全基于CSS的布局是必不可少的。默认情况下,文本溢出在浏览器中显示,通常在其容器外部有违规复制,尽管某些浏览器会拉伸容器以适应内容。面向CSS的设计者无疑已经意识到使用overflow:hidden来处理拉伸问题,如果它是斜体的话,它通常只会丢失几个像素的文本。

但是,有时文本字符串太长而无法放入框中。虽然这应该通过设计修改来处理,但这并不总是可行的(特别是对于从CMS运行的大型站点),因此CSS3提供了自动换行属性的答案。它最初是微软的一项发明,目前可以在Internet Explorer和Safari中使用,只需根据需要打破相关的字符串。

CSS3的另一个方便之处是能够定义列。在第176期的CSS教程中提到了这一点,我们在其中提到相关属性可以派上用场显示多列上的短项列表。例如,以下代码:

  1. Donec porttitor ligula
  2. Eu dolor
  3. [...]

如果列表中有六个或更多项目,您很快就会在屏幕上浪费大量空间。但是将一个类应用于列表并使用以下CSS,列表将显示在两列上:

.twoColumnList {width:40em; -webkit-column-count:2; -webkit-column-gap:1em; -moz-column-count:2; -moz-column-gap:1em; }

定义宽度,列数和列间距属性自动拆分空间并定位列表元素。请注意,此处使用前缀-webkit-和-moz-。从长远来看,这些将被取消;但是,目前他们需要使这些属性分别在Safari和Firefox中运行。

CSS3: multiple backgrounds

对于液体布局爱好者而言,从视觉角度来看,多种背景可能会使事情变得更有趣;但是,只有Safari目前支持它们

虽然text-shadow属性实际上是CSS2规范的一部分,而不是CSS3,但是阴影是一些最近添加到某些浏览器的武器库。尽管如此,这里值得一提,尤其是因为CSS3现在还提供了在盒子上定义阴影的功能。然而,首先是:文本。

使用text-shadow属性时定义了四个值,Safari和Opera目前支持该属性。前两个值定义投射阴影的水平和垂直距离;第三个值定义模糊距离(以像素为单位);第四个值是阴影的颜色。因此,以下CSS会产生一个相当典型的阴影,您可以使用它来引起对标题的注意:

text-shadow:2px 2px 5px#888888;

但是,通过将阴影距离减小到零并将颜色从灰色更改为更鲜明的颜色,您可以改为模拟发光效果:

Text-shadow:0 0 10px#ff0000;

Opera使您可以更进一步。它支持text-shadow的逗号分隔值集,使您可以为单个元素定义多个集。这意味着您可以在多个方向上投射相似颜色的阴影,以创建更大,更大胆的发光效果。

或者,您可以混合颜色,如其他地方描述的“红色和蓝色模糊”和“火焰文本”示例中所示。所有这些阴影的代码都在此问题的光盘上,文件为text-shadows.html。

如前所述,CSS3现在允许您为框定义阴影,从而无需使用图像。目前,只有Safari支持此功能,但我们怀疑其他浏览器很快就会效仿。

事实上的属性是box-shadow,目前在Safari中使用-webkit-box-shadow;要定义的值是按照文本阴影规则。

平滑边缘

阴影都非常好,但我们认为边界半径可能对网页设计师最有吸引力 - 至少那些迷恋当前潮流的所有曲线。此属性允许您执行的操作是为框的角设置半径,从而使您可以取消JavaScript或基于图像的“黑客”。目前,这适用于Firefox和Safari,并且需要-moz-和-webkit-前缀。因为内容仍然到达相关框的边缘,所以定义一个至少等于边界半径的填充值是有意义的,如下面的代码块所示:

.roundedCorners {width:300px; background-color:#d3aa9c; margin-bottom:20px;填充:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }

当然,目前为盒子提到的各种属性可以组合在一起,因此很容易创建一个带阴影的圆形盒子。有用的是,投影符合圆角,正如您所期望的那样。一个例子可以在这个问题的光盘上快速命名的box-with-corners-and-shadow.html文档中看到,它还突出了CSS3的另一个新增内容:不透明度。如果您在Safari,Firefox或Opera中打开文档,您将看到一个红色的半透明矩形覆盖页面的另一个div。不透明度由狡猾命名的不透明度属性定义;值范围从0到1,并影响其应用的元素中的所有内容。 Safari和Firefox还允许您使用RGBA值('A'代表alpha)定义不透明度,因此您可以为背景定义值rgba(255,0,0,0.3)以创建半 - 在对象上的透明红色背景。

CSS3 resize property

某些浏览器(如描述的Safari)可以调整textarea元素的大小; CSS3的resize属性最终将使您能够将任何元素定义为可调整大小

在背景主题上,我们最喜欢的CSS3之一是能够为元素定义多个背景。网页设计师常常使用丑陋(从编码的角度来看)黑客为网页或内容区域定义多个背景,但在CSS3中,您可以用逗号分隔背景值,从而使您能够添加和定位尽可能多的背景图像如你所愿。例如,要定位四个图像,一个位于页面正文的每个角落,您可以使用以下规则:

身体{margin:0;填充:0; background:url(bkg-tl.png)0 0 no-repeat,url(bkg-tr.png)100%0 no-repeat,url(bkg-br.png)100%100%no-repeat,url(bkg -bl.png)0 100%无重复; }

目前,只有Safari支持这种添加背景的方法和一个例子,multiple-backgrounds.html,在这个问题的光盘上(它需要前面规则中提到的四个PNG背景图像)。

CSS3: different browsers

可以在任何您喜欢摇晃的浏览器中工作的网站示例是dowebsitesneedtolookexactlythesameineverybrowser.com。回答其URL中提出的问题,其单页(仅显示NO!)在各种浏览器中提供了略微不同的视觉设计。对于那些具有最新支持的用户,例如Safari 3,文本有一个阴影;对于那些留下的人,例如IE6,PNG具有白色背景;在不同的平台上,字体会有所不同。当然,关键是即使剥离了更精细,设计导向的元素,最小的设计仍然可用。从左上方顺时针方向:在Safari(Mac),Firefox(Mac),Internet Explorer 6(Windows)和7(Windows)中出现的单行网站

完美的定位

我们将看到的最后一个属性是box-sizing,它挖掘了一个关于CSS盒子模型的古老争论。理解这个模型是CSS布局不可或缺的一部分。如果您对它不完全熟悉,它的工作原理如下:在CSS中,您可以定义元素内容区域的尺寸;然后,您可以添加到该填充和边框。因此,具有10像素边框的100像素宽的元素实际上将占用120像素的水平空间。

在版本6之前,Internet Explorer不同意,而是在定义的维度内放置边框和填充。最终,微软让步了,IE6的盒子模型“固定”了。问题是,在某些情况下,微软过去的做事方式实际上非常有用。例如,创建一个包含两个div的页面,每个div的宽度为50%,并将它们向左浮动。现在为每个添加一些填充和固定大小的边框。它们会堆叠在一起,因为合并的内容宽度现在超过了100%。

CSS3: box styling in Safari

这张来自Safari的镜头展示了一些方便的新造型盒属性。可以通过CSS应用圆角和阴影,并可以定义框的不透明度

存在各种变通方法:您可以按百分比定义填充和边框,并确保所有宽度值的总和不超过100%;你可以确保你的div宽度不会增加到接近100%的任何位置(为填充和边框提供空间);或者您可以创建嵌套的div并应用边框和填充。但是,CSS3允许您使用border-box属性值box-sizing,对于特定元素,模拟IE 5.5及之前使用的盒子模型。目前,Opera按原样使用该属性,但Safari和Firefox需要-webkit-和-mox-前缀。具有讽刺意味的是,Internet Explorer的第6版和第7版不支持此属性,尽管在编写本文时当前的beta版8接受-ms-box-sizing。 (有关此属性的示例,请参阅other-boxes.html。)

CSS3 columns

在不久的将来,CSS3将使您能够自动在列中显示元素:方便地列出短项目列表

这并不是CSS3提供的所有功能。我们已经提到了你(希望)很快能够整合到网站中的附加内容的一部分。除了提到的属性之外,还有一些当前不受支持的resize,但是它可以让你定义一个元素的框是否可以由用户调整大小; border-image,它允许您定义元素边框的图像,而不是限制为一小组线条和图案;以及通过background-size(使用Opera的-o-前缀和Safari的-webkit-)来定义背景图像(在Opera和Safari中)的能力,并根据项目填充或内容的边缘定义它们的原点via background-origin(接受值内容,填充和边框)。

现在看一下这些属性似乎为时过早 - 正如我们所说,某些属性目前仅适用于某些浏览器,通常也需要前缀。然而,要知道在网页设计领域可能会有什么东西是有用的,即使你不考虑涉足CSS3让自己领先于游戏,实验并知道你能够做到这一点仍然很有趣在不太遥远的未来收集大量黑客。



翻译字数超限