CSS3屬性使網站設計增強同時不消弱可用性

2024-07-11 08:27:23

字體：大中小

來源：轉載

供稿：網友

層疊樣式表(css)是Web設計的一種語言，CSS的下一代版本CSS3已經蓄勢待發。你是否可望開始使用它們卻又不知從何下手呢？雖然還有一些新屬性沒有得到官方的確認，但是一些瀏覽器已經開始支持來自CSS3得新特性了。
　　但問題是——許多瀏覽器支持了，唯獨最主要的Internet Explorer瀏覽器仍不支持！
　　很多人尤其是中國的前端er們會覺得既然IE不支持，那就先不關心CSS3。其實不應這樣的，CSS3現在能為我們帶來什么好處呢？至少現在我們就能使用那些CSS3的新特性來進行設計增強。

設計增強是指在不影響網站可用性的基礎上，使用一些高級樣式來提升網站的視覺效果。

其實對于如何區分設計增強與不影響可用性的區別還是有一定的困難的:

設計增強的例子：使用border-radius屬性為盒模型添加圓角，讓網站更富有吸引力。不過，即使圓角屬性不被瀏覽器支持，它也不會影響網站的正常使用。設計消弱可用性的例子：在某個元素上面層疊了一個使用了RGBA顏色值背景的元素，上面的元素使用半透明效果，很顯然這兩個元素都是必須讓用戶看到的。很顯然，有一部分使用舊瀏覽器的用戶想要看到下面的元素內容是很困難的，這種設計就降低了可用性。

　　下面錯新站長站將帶你一同學習5個不同的CSS3屬性，如果從現在起你就開始嘗試在你的網站中使用它們，那你將讓你的網站實現既設計增強又不會消弱可用性。

　　以下是在應用CSS3設計增強之前的普通效果:
css3-新特性

1.透明顏色

目前支持的瀏覽器:Apple Safari 4, Firefox 3.0.5+, Google Chrome 1+

RGBA允許你控制某個特性填充顏色的不透明度，無論是文本、背景、邊框還是背景顏色。

設置顏色透明度的時候，你需要使用RGB顏色值，不可以再使用十六進制值，而那個”A”則代表透明度，你可以設置從0(透明)到1(不透明)之間的數值。

1	rgba(0-255,0-255,0-255,0-1)

你還可以單獨使用RGB值:

1
2
3
4
5
6
7
8

.topbox {
color: rgb(235,235,235);
color: rgba(255,255,255,0.75);
background-color: rgb(153,153,153);
background-color: rgba(0,0,0,0.5);
border-color: rgb(235,235,235);
border-color: rgba(255,255,255,0.65);
}

上一篇：CSS 設定文本尺寸的屬性

下一篇：CSS網頁布局實例常見的12種網頁布局