一些小技巧讓你的CSS技術更專業
- 使用
:not()去除導航上不需要的邊框 - 為
body新增行高 - 垂直居中任何元素
- 逗號分離的列表
- 使用負
nth-child選擇元素 - 使用SVG圖示
- 文字顯示優化
- 在純CSS幻燈片上使用
max-height - 繼承
box-sizing - 表格單元格等寬
- 使用Flexbox擺脫邊界Hack
- 使用屬性選擇器選擇空連結
使用:not()新增/去除導航上不需要的邊框
新增邊框…
|
1 2 3 4 5 |
/* 新增邊框 */ .nav li { border-right: 1px solid #666; } |
…然後去除最後一個元素的邊框…
|
1 2 3 4 5 |
/* 移除邊框 */ .nav li:last-child { border-right: none; } |
…使用偽類 :not() 將樣式只應用到你需要的元素上：
|
1 2 3 |
.nav li:not(:last-child) { border-right: 1px solid #666; } |
當然，你可以使用.nav li + li 或者 .nav li:first-child ~ li， 但是使用 :not() 的意圖特別清晰，CSS選擇器按照人類描述它的方式定義邊框。
為body新增行高
你不需要分別為每一個 <p>, <h*> 等元素新增行高，而是為body新增:
|
1 2 3 |
body { line-height: 1; } |
這種方式下,文字元素可以很容易從body繼承。
垂直居中任何元素
不，這不是黑魔法，你的確可以垂直居中任何元素：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; } |
想讓其他元素居中？垂直，水平…任何東西，任何時間，任何位置？CSS-Tricks上有 一個不錯的文章 來做到這一切。
注意：IE11上flexbox的一些 缺陷行為。
逗號分離的列表
讓列表看起來更像一個真正的逗號分離列表：
|
1 2 3 |
ul > li:not(:last-child)::after { content: ","; } |
使用偽類:not() ，這樣最後一個元素不會被新增逗號。
使用負 nth-child 選擇元素
在CSS使用負nth-child選擇1到n的元素。
|
1 2 3 4 5 6 7 8 9 |
li { display: none; } /* 選擇1到3的元素並顯示 */ li:nth-child(-n+3) { display: block; } |
或者，你已經學習了一些關於 使用 :not()，嘗試：
|
1 2 3 4 5 6 7 |
/* select items 1 through 3 and display them */ /* 選擇1到3的元素並顯示 */ li:not(:nth-child(-n+3)){ display: none; } |
這很簡單。
使用SVG圖示
沒有理由不使用SVG圖示：
|
1 2 3 |
.logo { background: url("logo.svg"); } |
SVG對所有解析度型別具有良好的伸縮性，IE9以上的所有瀏覽器都支援。所以放棄.png，.jpg或gif-jif等任何檔案。
注意：如果你使用SVG圖示按鈕，同時SVG載入失敗，下面能幫助你保持可訪問性：
|
1 2 3 |
.no-svg .icon-only:after { content: attr(aria-label); } |
文字顯示優化
有些字型在所有的裝置上並不是最優顯示，因此讓裝置瀏覽器來幫忙：
|
1 2 3 4 5 |
html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } |
注意：請使用optimizeLegibility。同時，IE/Edge不支援text-rendering。
在純CSS實現的內容滑塊上使用max-height
在純CSS實現的內容滑塊上使用max-height，同時設定overflow hidden：
|
1 2 3 4 5 6 7 8 9 |
.slider ul { max-height: 0; overlow: hidden; } .slider:hover ul { max-height: 1000px; transition: .3s ease; /* animate to max-height */ } |
繼承box-sizing
從html繼承box-sizing：
|
1 2 3 4 5 6 7 |
html { box-sizing: border-box; } , :before, *:after { box-sizing: inherit; } |
這讓外掛或使用其他行為的元件能很容易地改變box-sizing。
表格單元格等寬
使用表格會很痛苦，因此使用table-layout：fixed來保持單元格相同的寬度：
|
1 2 3 |
.calendar { table-layout: fixed; } |
無痛表格佈局。
使用Flexbox擺脫邊界Hack
當使用列約束時，可以拋棄nth-，first- 和 last-child的hacks，而使用flexbox的space-between屬性：
|
1 2 3 4 5 6 7 8 |
.list { display: flex; justify-content: space-between; } .list .person { flex-basis: 23%; } |
現在列約束總是等間隔出現。
使用屬性選擇器選擇空連結
顯示沒有文字值但是 href 屬性具有連結的 a 元素的連結：
|
1 2 3 |
a[href^="http"]:empty::before { content: attr(href); } |
這樣做很方便。
瀏覽器支援
這些技巧在當前版本的Chrome，Firefox， Safari， 以及Edge， 和IE11可以工作。