CSS3系列教程:寬度/列數

使用CSS3可以為你的網站設計多列，而不用為每列制定特定的層或段落。
與多背景圖片一樣，CSS3多列也是我最喜愛的一個技術。我想這條CSS3屬性有在報紙和雜誌佈局中以外的很多潛在的用途。如果你在某個想法或個人網站中使用了這種方法，請在下面的評論中提交你的連結，我很高興能確認這種方法能用於很多中佈局中。

跨瀏覽器相容性：
比較好的支援CSS3多列的瀏覽器有Firefox、Safari、Google Chrome，這樣我們就需要使用-moz和-webkit首碼了。

CSS3多列(寬度)
使用下面的CSS3樣式的效果：
#multiColumnWidth {
text-align: justify;
-moz-column-width: 20em;
-moz-column-gap: 2em;
-webkit-column-width: 20em;
-webkit-column-gap: 2em;
}

瀏覽器支持：
Firefox(3.05+…)
Google Chrome(1.0.154+…)
Google Chrome(2.0.156+…)
Internet Explorer(IE7, IE8 )
Opera(9.6+…)
Safari(3.2.1+ windows…)
CSS3多列(列數)

使用下面的CSS3樣式的效果：
#multiColumnCount {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #dedede;
-webkit-column-count: 3;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #dedede;
}

瀏覽器支持：
Firefox(3.05+…)
Google Chrome(1.0.154+…)
Google Chrome(2.0.156+…)
Internet Explorer(IE7, IE8 )
Opera(9.6+…)
Safari(3.2.1+ windows…)

特別聲明，本文章譯自：Zen Elements, 也謝謝ALEX

Special Staterment: this series posts were translate from Zen Elements

文章來自前端觀察
文章提供 BAYSTARS DESIGN網頁設計公司

CSS選擇器的瀏覽器支持

我很久以前就開始計畫著整理一下CSS選擇器的瀏覽器支持，因為CSS3增加了很多非常有用的選擇器。之前我也寫過一篇《使用CSS選擇器創建個性化連結樣式 》，作為對CSS選擇器的初步研究。

kimblim網站整理了一份很全面的CSS選擇器支援情況，我將其翻譯過來並進行進一步的整理，將其盡可能的簡化。同時結合evotech網站整理的CSS選擇器支持列表，以及我自己平時總結的一些tips。

熟悉jQuery的人可能都知道，jQuery的靈魂就是它的選擇器，同樣我認為選擇器是css最強大的功能之一，在不久的將來也會得到重視。jQuery的選擇器功能得益於CSS3選擇器提供的靈感，卻是目前相容性和易用性最好的選擇器，而CSS的選擇器不能普及，就是因為某些流覽器在拖後腿。


現在就查看《CSS選擇器的瀏覽器支持》吧！
綜合測試結果，可以得出以下結論：
webkit內核流覽器和Opera瀏覽器對CSS選擇器的支持最好，Chrome所有版本的瀏覽器均完全支持，Safari3.2版本以上瀏覽器也完全支持，Opera9.6+瀏覽器也完全支持CSS選擇器；
Safari3.0以下瀏覽器、Firefox 2.0以下瀏覽器、IE8基本支持CSS2.1選擇器，基本上不支持CSS3選擇器。可喜的是IE8瀏覽器有了里程碑的進步，基本很完全的支持了CSS2.1選擇器，但是依然不完全支援偽元素；
IE6是最落後的瀏覽器，它竟然連CSS1的選擇器都不能完全支持！

很多IE6的粉絲朋友常常問我，你為什麼那麼討厭IE6，然後我就要費盡口舌的回答他們，現在好了，有了這個表，我們可以理直氣壯的BS IE6了！
這個列表還不是最完整的，還有些CSS3的偽元素等沒有被列入，我會在適當的時候加進來。同時如果你發現這裡有某些錯誤或者不妥之處，煩請告訴我，我會儘快的更正它，多謝先！

文章來自前端觀察
文章提供 BAYSTARS DESIGN網頁設計公司