CSS3實戰之一些經常使用Tips

本文爲部分翻譯文章，主要內容來自於：css-protips，筆者自身也添加了一些本身的小的Tips。

使用:not()屬性爲導航添加或者去除邊框

傳統的方法是首先爲每一個li標籤添加標籤：

/* add border */
.nav li {
  border-right: 1px solid #666;
}

而後用last-child僞屬性做用於最後一個元素上：

/* remove border */
.nav li:last-child {
  border-right: none;
}

代替的方法應該是使用not僞類去設置僅做用於部分元素的屬性：

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

爲body添加line-height屬性

每每須要爲p、h*這類標籤單獨的添加行高屬性等，做爲替代的是能夠將它添加到body屬性中，即：

body {
  line-height: 1;
}

經過這種方式文本類的元素能夠自動繼承該屬性。

設置自動居中

任何一個元素的自動居中能夠使用flex屬性：

html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

使用逗號分割列表

ul > li:not(:last-child)::after {
  content: ",";
}

使用負的nth-child屬性選擇元素

li {
  display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
  display: block;
}

使用SVG做爲Icon

.logo {
  background: url("logo.svg");
}

使用SVG做爲圖標能夠達到自動縮放的效果。

文本顯示的優化

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

使用max-height在單純的CSS滑塊上

.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: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

設置Table元素等寬

.calendar {
  table-layout: fixed;
}

使用Flexbox做爲Margin Hacks

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

爲空的Links添加默認內容

a[href^="http"]:empty::before {
  content: attr(href);
}

防止iOS設備上的元素不可點擊

在iOS設備中，有時候Click事件會失效，須要設置一個專門的cursor屬性：

cursor:pointer

不過須要注意的是，這個屬性不可設置在Android設備上，若是設置在Android設備上，點擊的時候會出現一片藍色的背景。

防止iOS設備上輸入失焦

在iOS設備中，有時候若是彈出了鍵盤會致使輸入框失焦，即鍵盤上的內容沒法顯示在輸入框內，須要進行如下覆蓋：

* {
  -webkit-user-select: none; /* prevent copy paste */
}

變爲

input[type="text"] {
    -webkit-user-select: text;
}