摘要：當(dāng)它被選中時，一個設(shè)置在里的編碼的字符將會顯示出來。接著為我們的復(fù)選框添加一些動畫效果這里是所有的編碼，以及可以在這里進(jìn)行體驗。這是一個新的叫做的表達(dá)式。設(shè)置介于和之間的最大最小值。至今并未得到全面的支持。

原文鏈接：22 Essential CSS Recipes
更多譯文將陸續(xù)推出，歡迎點贊+收藏+關(guān)注我的專欄，未完待續(xù)……

大家好，今天我們將會介紹一些非常實用的CSS小技巧，讓我們開始吧！

不久之前Firefox和Safari瀏覽器已經(jīng)開始支持類似Photoshop的混合模式，但是在Chrome和Opera瀏覽器中需要添加前綴。舉個栗子：

// 你也可以嘗試不同的樣式

.blend {
    background: #fff;
}
.blend img {
    mix-blend-mode: darken; 
}

在線體驗地址

現(xiàn)在，你甚至可以在邊框中使用漸變。
要使用漸變邊框非常簡單，只需要設(shè)置一個更低z-index的偽元素即可：

.box {
  margin: 80px 30px;
  width: 200px;
  height: 200px;
  position: relative;
  background: #fff;
  float: left;
}
.box:before {
      content: "";
      z-index: -1;
      position: absolute;
      width: 220px;
      height: 220px;
      top: -10px;
      left: -10px;
      background-image: linear-gradient(90deg, yellow, gold);
}

具體的例子可以看這里，或者看這里使用的是background-clip和background-origin屬性。在不久的將來，也許所有瀏覽器都將支持border-image屬性，最終的代碼會和下面一樣：

.box {
    border-image: linear-gradient(to bottom, #000000 0%, #FFFFFF 100%); 
    border-image-slice: 1; /* set internal offset */
}

也許你不知道z-index同樣支持過渡！在過渡的每一步中，它的值都不發(fā)生改變，所以你以為它不支持過渡——但其實它支持。
舉個栗子

我們可以使用這個方法來偵測當(dāng)前的顏色，以避免經(jīng)常地重復(fù)定義它。
這個方法在使用SVG圖標(biāo)的時候非常有用，因為它們的顏色由其父元素決定。通常我們是這么做的：

.button {
  color: black;
}
.button:hover {
  color: red;
}
.button:active {
  color: green;
}

.button svg {
  fill: black;
}
.button:hover svg {
  fill: red;
}
.button:active svg {
  fill: green;
}

但我們可以使用currentColor這么做：

svg {  
  fill: currentColor;
}

.button {
  color: black;
  border: 1px solid currentColor;
}
.button:hover {
  color: red;
}
.button:active {
  color: green;
}

附上其它帶有偽元素的例子：

a {  
  color: #000;
}
a:hover {  
  color: #333;
}
a:active {  
  color: #666;
}

a:after,  
a:hover:after,  
a:active:after {  
  background: currentColor;
  ...
}

你是否還記得為了解決一些問題而給一幅背景圖設(shè)置background-size屬性的時刻呢？現(xiàn)在你可以使用object-fit屬性啦，webkit瀏覽器都支持它，F(xiàn)irefox也將在近期予以支持。

.image__contain {
  object-fit: contain; 
} 
.image__fill {
  object-fit: fill; 
}
.image__cover {
  object-fit: cover; 
}
.image__scale-down {
  object-fit: scale-down;
}

舉個栗子

讓我們一起不使用圖片來設(shè)置復(fù)選框的樣式：

Checkbox

input[type=checkbox] {display: none;}

input[type=checkbox] + label:before {  
    content: "";
    border: 1px solid #000;
    font-size: 11px;    
    line-height: 10px;
    margin: 0 5px 0 0;
    height: 10px;
    width: 10px;
    text-align: center;
    vertical-align: middle;
}

input[type=checkbox]:checked + label:before {  
    content: "2713";
}

正如你所看見的，我們隱藏了原有的復(fù)選框，改為使用偽元素和偽類:checked（IE9+）來表現(xiàn)它。當(dāng)它被選中時，一個設(shè)置在content里的Unicode編碼的字符將會顯示出來。

值得注意的是，Unicode編碼在CSS和HTML中的寫法是不一樣的。在CSS中它是一個以反斜杠為開始的十六進(jìn)制數(shù)，而在HTML中它是十進(jìn)制的，比如✓。
接著為我們的復(fù)選框添加一些動畫效果：

input[type=checkbox] + label:before {  
    content: "2713";
    color: transparent;
    transition: color ease .3s;
}
input[type=checkbox]:checked + label:before {  
    color: #000;
}


input[type=radio] + label:before {  
    content: "26AB";
    border: 1px solid #000;
    border-radius: 50%;
    font-size: 0;    
    transition: font-size ease .3s;
}
input[type=radio]:checked + label:before {  
    font-size: 10px;    
}

這里是所有的Unicode編碼，以及可以在這里進(jìn)行體驗。

總所周知CSS中是可以使用計數(shù)器的：

  
    
a
    
b
    
c
  

.list {
    counter-reset: i; //reset conunter
}
.list > li {
    counter-increment: i; //counter ID
}
.list li:after {
    content: "[" counter(i) "]"; //print the result
}

我們定義了一個ID在counter-reset屬性中作為初始值（默認(rèn)為0）。你可以設(shè)置另一個值在counter-increment屬性中作為每一步的遞增值。

你可以計算出有多少個復(fù)選框被用戶勾選了：

  
  C
  C++
  C#
  Java
  JavaScript
  PHP
  Python
  Ruby
  
  
  Total selected:
  

.languages {
  counter-reset: characters;
}
input:checked {  
  counter-increment: characters;
}
.total:after {
  content: counter(characters);
} 

你也可以制作一個簡單的計算器：

  
  1
  2
  3
  4
  5
  100
  
  
  Sum 
  

.numbers {
  counter-reset: sum;
}

#one:checked { counter-increment: sum 1; }
#two:checked { counter-increment: sum 2; }
#three:checked { counter-increment: sum 3; }
#four:checked { counter-increment: sum 4; }
#five:checked { counter-increment: sum 5; }
#one-hundred:checked { counter-increment: sum 100; }

.sum::after {
  content: "= " counter(sum);
} 

它同樣得以運行，請看具體的DEMO和文章。

你記得你有多么經(jīng)常被迫需要一個“漢堡”圖標(biāo)嗎？

這里有至少3個方式去實現(xiàn)它：
1、 Shadows

.shadow-icon {
  position: relative;
}
.shadow-icon:after {
  content: "";
  position: absolute;
  left: 0;
  top: -50px;
  height: 100%;
  width: 100%;
  box-shadow: 0 5px 0 #000, 0 15px 0 #fff, 0 25px 0 #000, 0 35px 0 #fff, 0 45px 0 #000;
}

2、 Gradient

.gradient-icon {
    background: linear-gradient(to bottom, #000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%, #000 100%);
}

3、 UTF-8
你可以直接使用標(biāo)準(zhǔn)符號：? (Unicode: U+2630, HTML: ?)。你也可以像其他元素那樣靈活設(shè)置它的顏色或大小。看例子。
你也可以使用SVG，字體圖標(biāo)，或者通過偽元素設(shè)置的border邊框。

這是一個新的叫做supports的CSS表達(dá)式。顧名思義，它可以檢測某些設(shè)定是否被瀏覽器所支持，并非所有的瀏覽器都支持它，但是你仍然可以使用它作為基本的檢測手段：

@supports (display: flex) {
    div { display: flex; }
}

/*You can check prefixes*/
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
    section {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        float: none;
    }
}

依你估計，把一個設(shè)置為visibility: visible的元素放在一個設(shè)置為visibility: hidden的元素里面，會發(fā)生什么？

.hidden {
  visibility: hidden;
}
.hidden .visible {
  visibility: visible;
}

你可能會認(rèn)為兩個元素都不顯示——然而事實上整個父元素都被隱藏了，而子元素不會。請看DEMO。

我們發(fā)現(xiàn)了一個新的特性，你可以新建一個sticky屬性的元素。它的運行效果和fixed相同，但不會擋住任何元素。你最好看看例子
只有Mozilla和Safari瀏覽器支持這一屬性，但你也可以像下面那樣使用它：

.sticky {
  position: static;
  position: sticky;
  top: 0px;
}

我們將會在支持的瀏覽器中得到一個sticky屬性的元素，而在不支持的瀏覽器中它將會是一個普通的元素。這在你需要建立一個不可替代的，可以移動的元素的移動端頁面的時候非常實用。

不久之前，一些新的用以描述不同元素大小的尺寸單位問世了，它們是：

vw (viewport width) - 瀏覽器窗口寬度的1%。

vh (viewport height) - 同上，只不過用來描述高度。

vmin and vmax 設(shè)置介于vh和vw之間的最大最小值。

有趣的是，幾乎所有的現(xiàn)代瀏覽器都能很好地支持它們，所以你可以放心地使用。
為什么我們需要這些新的單位？因為它們可以讓不同的尺寸更容易被定義，你不要為父元素指定任何的百分比或者別的什么，請看例子：

.some-text {
    font-size: 100vh;
    line-height: 100vh;
}

或者你可以設(shè)置一個漂亮的彈出框在屏幕中間：

.blackSquare {
    background: black;
    position: fixed;
    height: 50vh;
    width: 50vw;
    left: 25vw;
    top: 25vh;
}

這看起來酷斃了，看看在codepen的例子吧~
但是目前仍然有一些關(guān)于這些新單位的不足之處：

IE9應(yīng)該用vm而不是vmin。

iOS7在使用vh的時候可能會有bug。

vmax至今并未得到全面的支持。

我們可以通過幾行代碼修改文字被選中時的效果：

*::selection {
    color: #fff;
    background: #000;
}
*::-moz-selection {    
    /*Only Firefox still needs a prefix*/
    color: #fff;
    background: #000;
}

你不僅可以定義文字被選中時的顏色，還能定義陰影或者背景顏色。

如果你需要在觸摸屏當(dāng)中為一些元素設(shè)置內(nèi)滾動，那么你不僅需要overflow: scroll / auto ，還需要-webkit-overflow-scrolling: touch;
實際上，移動端瀏覽器在某些時候并不能正確執(zhí)行overflow: scroll / auto ，它可能會滾動整個頁面而不是你想要的那部分。-webkit-overflow-scrolling解決了這個問題，你可以在你的實際項目中體驗一下。

有時候動畫可能會導(dǎo)致用戶的電腦卡頓，你可以在特定元素中使用硬件加速來避免這個問題：

.block {
    transform: translateZ(0);
}

你并不會察覺有什么不同，但瀏覽器會為這個元素進(jìn)行3D硬件加速，在will-change這個特殊屬性未被全面支持之前，這個方法還是很有用的。

你可以用Unicode符號明名class：

.? {
    ...
}
.? {
    ...
}
.? {
    ...
}
.★ {
    ...
}
.? {
    ...
}

但這其實是用來搞笑的，千萬不要在大型項目中使用，因為不是所有的電腦都支持Unicode符號。

實際上垂直方向的排列計算是基于父元素的寬度而不是高度。定義兩個元素：

.parent {
    height: 400px;
    width: 200px;
}
.child {
    height: 50%;
    padding-top: 25%;
    padding-bottom: 25%;
    width: 100%;
}

理論上，子元素的高會是父元素高的一半，但是看看我們實際得到的情況：

記住，子元素的百分比是相對于父元素的寬度。

Firefox用它自己的方式去計算按鈕的邊距。這聽起來有點奇怪，但它會自動地添加一些邊距進(jìn)去：

可以用以下方法來修復(fù)這個問題：

button::-moz-focus-inner,  
input[type="reset"]::-moz-focus-inner,  
input[type="button"]::-moz-focus-inner,  
input[type="submit"]::-moz-focus-inner {  
    border: none;
    padding:0;
}

很少人知道，定義了一個元素的文字顏色，意味著這個元素的邊框顏色也被定義了：

input[type="text"] {  
    color: red;
    border: 1px solid;
}

如果你仍需要適配IE7或者類似的古老瀏覽器，你可以在定義hack的時候使用笑臉符號，像這樣：

body {  
    :) background: pink;
}

是不是很有趣？

如果你覺得我翻譯得不錯，請點贊收藏并關(guān)注我的專欄，我會陸續(xù)推出更多精彩的內(nèi)容。如發(fā)現(xiàn)任何的錯漏歡迎指正，我們下次見！