CSS 主要的区别是外观层面的

这将面临的问题是最好不管那些不支持（新技术的）的浏览器，因为即便缺乏支持对用户浏览内容毫无影响。

这样主要会用到一些新CSS3属性，比如 border-radius， text-shadow 还有border-image。

Border-radius

这是设计师在不考虑IE以为学习到的第一个CSS3属性，因为它明确的美化属性。用border-radius的时候，最好不要试图在IE里复制相同的效果，让它随意吧。



Gowalla在他们网站运用了border-radius，但是IE用户看不到这个效果。

哪些浏览器不支持？所以的IE，Opera也是。

Font-face

在IE里面可以使用Font-face，但是你需要利用Microsoft’s Web Embedding Fonts tool来转换你的字体。

如果想让的站点包含字体和格式工具，CSS应该添加以下结构：

@font-face {
	  font-family: "Delicious";
	  src: url("Delicious-Roman.eot");
	  src: local("Delicious"), url("Delicious-Roman.otf") format("opentype");
}

通常，浏览器不能渲染一堆字体中的第一个字体时，不应该破坏页面或任何方面出现阻挠用户浏览内容的问题。所以，这里推荐仔细考虑想让用户看到的那些字体，如果浏览器不支持font-face，应该依赖那些在样式表中声明的字体。



如果浏览器不支持font-face直接显示下一个可用的字体

多栏（Multiple Columns）

与其建立额外的浮动DIV来组织你的文字到分栏，不如利用CSS3的多栏属性自动建立分栏。但这意味着一些浏览器将会看不到。

多栏被很好的用于文字，而不是设计。如果在站点使用它们，最坏的情况是用户将看到一行很长的文字。

如果你只是处理简短的文字，为什么不直接在两分钟内用它搞定呢？但是如果减损可读内容
，你最好的选择是坚持用常规的DIV来建立分栏。


这里，引导文字是用了CSS multiple columns。IE用户将会看到常规的单栏文字。

哪些浏览器不支持？IE和Opera.

RGBa and Opacity

RGBa颜色是福祉般的恩惠。与其努力的为背景更新PNG文件，可以用CSS3创建相同的透明效果。但是IE做不到。IE6甚至不知道PNGs为何物。

安全的方案是，这些透明层不可以经常在覆盖着重要内容的元素上使用；在这种情况下，首先保证内容不可以被其他元素遮挡。

所以，当使用RGBa颜色时，确保在RGBs前面包含一个常规颜色，这样当浏览器不能读出它时仍然有备用颜色：

div {
	background-color:  #FFFFFF;
	background-color: rgba(255,255,255,.5);
}

透明在IE可以用Opacity滤镜实现，但是IE滤镜只在设计的元素上可用：

div {
	filter: alpha(opacity = 50);
}

另外，注意Opacity比RGBa颜色工作更复杂：所以这个DIV包含的元素将会“被透明化”。


24ways狠狠的用了RGBa颜色和alpha透明，尽管IE不能渲染透明。

那些浏览器不支持？所有浏览器支持opacity,条件是提供滤镜。IE不支持RGBa颜色。

Text-shadow

一个简单的要求：忽略它。假定文字仍然具有可读性，相对CSS而已试图用其他任何方法建立文字阴影（text-shadow）都是一项巨大的工程。所以除非失去阴影会影响大面积文字（或者一小部分，可以用图片代替）的清晰度，不用它是良好的选择。（译者没读懂这部分意思，大大们来看看This is an easy call: ignore it. Assuming that the text is still readable, trying to recreate text-shadow any other way than with CSS is a Herculean task. So, unless missing text-shadow would seriously reduce the clarity of a large amount of text, or a small amount (in which case you could use image replacement), you’re better off without it.）


在IE下，Broker Direct站点白色文字阴影是看不到的

那些浏览器不支持？IE。

边框图片Border-image

border-image属性给我们一种为元素添加漂亮边框的简单方法，否则那将是噩梦般的事情（这也是大多数情况我们可能不选择这样做）。

因为这个属性几乎总是用来美化，最佳的选择是为不支持该属性的浏览器包含一个备选——普通边框属性，并且在这之后为其他浏览器添加附加样式。



SpoonGraphics使用了border-image，但是IE不可见。

哪些浏览器不支持？相反的回答更简单：到现在为止，只有Safari和Firefox支持这个属性。

多背景图（Multiple Backgrounds）

这个属性的使用在于站点的设计，但大多数情况，缺乏第二甚至第三个背景不会影响可读性。

CSS的多背景图（Multiple Backgrounds）解决了一大堆因使用不同html hooks和嵌套元素来完成相同效果所产生的头疼问题。所以，如果你选择使用多背景图，你已经选择哪个浏览器可以显示结果。

如果让所有的用户都看到背景图很重要的话，使用旧办法——为不同的元素添加不同的背景吧。

如果也不这样，最好的措施是给那些不支持的浏览器以备选方案：选择你认为最重要的或者最适合全局设计的背景图，在多背景（Multiple Backgrounds）属性前面添加旧属性。不支持的浏览器会忽略第二个属性。

哪些浏览器不支持？IE，Opera，Firefox3.6+。

目录