1. 基于active,checked等狀態類名的web前端交互開發
-
.active等JS交互類名自身絕對…絕對不能有CSS樣式
再說一遍，自身無樣式，就是一個狀態標識符，用來和其他類名發生關系，然后讓其他類名的樣式發生變化。這種關系可以是父子，兄弟或者自身。
下面我們看下關鍵的CSS代碼，這個.active是如何自身無樣式的：
.box {
max-height: 80px;
transition: max-height .25s;
overflow: hidden;
}
.box.active {
max-height: 200px;
}
.active > .more {
display: none;
}
可以看到，當我們點擊按鈕后，盒子變高，以及更多元素隱藏，全部都是通過和.active發生關系后發生的，而不是.active自己的樣式。例如，我們盒子實現的200px以內任意高度的動畫效果，是通過.box.active組合類名觸發的，用中文解釋就是.box元素同時有.active狀態的時候，樣式如何如何…
2. 巧用CSS屬性值實現向下兼容
- 就拿盒陰影和邊框例子舉例，如果我來實現，則會是這樣的：
.box {
box-shadow: 0 1px 3px rgba(0,0,0,.25);
border: 1px solid #d0d0d5;
border: 0 rgba(0,0,0,.2);
}
想要讓IE9+瀏覽器沒有邊框其實很簡單，只要使用一個只有IE9+認識的同時沒有邊框的書寫形式就可以了。雖然border所有瀏覽器都識別，但是rgba色值確實IE9+瀏覽器才支持，于是，我們就可以巧妙利用IE8-瀏覽器不識別rgba色值這一特性，實現我們的向下兼容處理。
里面的例子，理論上，直接使用`rgba(0,0,0,0)`也是可以實現我們的效果的，少了1個字符，本來挺好。但是，如果你在`Sass`中寫出`border: 0 rgba(0,0,0,0);`，則會被`Sass`自以為是地編譯成`border: 0 transparent`，我靠，這個可就差了十萬八千里了，雖然看表現`rgba(0,0,0,0)`和`transparent`是一個東西，都是透明，但是，對于`border`屬性而言，`rgba(0,0,0,0) `IE9+瀏覽器才能識別，`transparent`從IE7瀏覽器就開始識別了。于是乎，IE7，IE8瀏覽器下，本要出現的邊框就這樣直接被干掉了，妥妥的bug啊！為了規避這個讓人無語的問題，這才使用了`rgba(0,0,0,.2)`。
- 所有數值相關的兼容試試CSS3
calc()
.box {
box-shadow: 0 1px 3px rgba(0,0,0,.25);
border: 1px solid #d0d0d5;
border: calc(0px + 0px) #000;
}
因為CSS3 calc()計算IE9+瀏覽器才開始支持。
- 背景圖可以試試
background多背景
.box {
background: url(test.png); /* IE8 */
background: url(test.svg), none; /* IE9+ */
}
- IE10支持但是IE9不支持的屬性
transtion,animation,gradient,transform,translate3d
3. 純CSS實現IE7/IE8下的正圓效果
.box {
width: 150px; height: 150px;
position: relative;
/* 值顯示左上角那個圓點 */
overflow: hidden;
}
.radius {
position: absolute;
width: 100%; height: 100%;
border-radius: 50%;
border: 149px dotted;
/* IE7,IE8圓尺寸要小1像素同時有1像素偏移 */
margin: 0 0 1px 1px;
color: #cd0000;
background-color: currentColor;
}
4. appearance大全鑒賞
- 去掉
date類型<input>框的叉叉：
::-webkit-clear-button {
-webkit-appearance: none;
}
- 去掉
number類型<input>框的上下箭頭：
::-webkit-inner-spin-button {
-webkit-appearance: none; /* 上下小箭頭按鈕，你丫太丑了，滾粗，負分 */
}
- 去掉
search類型<input>框的N多特征：
/* 去除圓角 */
input[type=search] { -webkit-appearance: none; }
/* 隱藏取消按鈕 */
::-webkit-search-cancel-button { -webkit-appearance: none; }
/* 隱藏放大鏡 */
::-webkit-search-results-button { -webkit-appearance: none; }
5. 中文英文左右padding一致兩端對齊實現
.justify {
text-justify: inter-ideograph;
text-align: justify;
}
