CSS ProTips

[maoyang]

裡面收集19個CSS ProTips , 為何會使用這些tips就可以稱為Pro? 會CSS的網友發表一下意見吧!

https://github.com/AllThingsSmitty/css-protips

[jawayang]

我先來示範第一個

1. Use :not() to Apply/Unapply Borders on Navigation

http://jsbin.com/mapetunizi/edit?html,css,js,output
透過:not() 可以過濾掉你不想要套用的元素
簡化大部分人習慣先把屬性套用到所有元素之後，再移除不想套用到的元素

[maoyang]

css code還是一樣多, 這樣做會比較有效率?

[jawayang]

沒有一樣多吧?!
原本要寫兩個樣式，只需要寫一個啊~

[maoyang]

Sorry, 我重新看一次, yes, 一行搞定

[maoyang]

@jawayang 的Demo很棒, 有沒有網友要來分享下一個pro tips , 使用jsbin demo, 19個tips走完一次, 大家的CSS功力應該就是Pro等級了

[jawayang]

對英文有障礙的可以看中文版～
https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN

[jawayang]

10. Equal Width Table Cells

這題的範例
http://jsbin.com/qapafitufi/edit?html,css
使用方式就是你設定了 table 的總寬
有加 table-layout: fixed; 的 table cell 的寬度就都會是一樣寬。
若沒有加就會是下面那樣，會隨著內容而調整。

[willhuang28]

@jawayang 如你的解釋沒錯，我被 w3schools 的案例誤導了，已刪除上篇留言
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_table_table-layout