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

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

大家好，今天我們將會(huì)介紹一些非常實(shí)用的CSS小技巧，讓我們開(kāi)始吧！

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

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

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

在線體驗(yàn)地址

現(xiàn)在，你甚至可以在邊框中使用漸變。
要使用漸變邊框非常簡(jiǎn)單，只需要設(shè)置一個(gè)更低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屬性。在不久的將來(lái)，也許所有瀏覽器都將支持border-image屬性，最終的代碼會(huì)和下面一樣：

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

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

我們可以使用這個(gè)方法來(lái)偵測(cè)當(dāng)前的顏色，以避免經(jīng)常地重復(fù)定義它。
這個(gè)方法在使用SVG圖標(biāo)的時(shí)候非常有用，因?yàn)樗鼈兊念伾善涓冈貨Q定。通常我們是這么做的：

.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;
  ...
}

你是否還記得為了解決一些問(wèn)題而給一幅背景圖設(shè)置background-size屬性的時(shí)刻呢？現(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;
}

舉個(gè)栗子

讓我們一起不使用圖片來(lái)設(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";
}

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

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

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)行體驗(yàn)。

總所周知CSS中是可以使用計(jì)數(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
}

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

你可以計(jì)算出有多少個(gè)復(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);
} 

你也可以制作一個(gè)簡(jiǎn)單的計(jì)算器：

  
  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);
} 

它同樣得以運(yùn)行，請(qǐng)看具體的DEMO和文章。

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

這里有至少3個(gè)方式去實(shí)現(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)符號(hào)：? (Unicode: U+2630, HTML: ?)。你也可以像其他元素那樣靈活設(shè)置它的顏色或大小?？蠢?。
你也可以使用SVG，字體圖標(biāo)，或者通過(guò)偽元素設(shè)置的border邊框。

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

@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;
    }
}

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

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

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

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

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

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

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

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

vh (viewport height) - 同上，只不過(guò)用來(lái)描述高度。

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

有趣的是，幾乎所有的現(xiàn)代瀏覽器都能很好地支持它們，所以你可以放心地使用。
為什么我們需要這些新的單位？因?yàn)樗鼈兛梢宰尣煌某叽绺菀妆欢x，你不要為父元素指定任何的百分比或者別的什么，請(qǐng)看例子：

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

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

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

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

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

iOS7在使用vh的時(shí)候可能會(huì)有bug。

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

我們可以通過(guò)幾行代碼修改文字被選中時(shí)的效果：

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

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

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

有時(shí)候動(dòng)畫可能會(huì)導(dǎo)致用戶的電腦卡頓，你可以在特定元素中使用硬件加速來(lái)避免這個(gè)問(wèn)題：

.block {
    transform: translateZ(0);
}

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

你可以用Unicode符號(hào)明名class：

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

但這其實(shí)是用來(lái)搞笑的，千萬(wàn)不要在大型項(xiàng)目中使用，因?yàn)椴皇撬械碾娔X都支持Unicode符號(hào)。

實(shí)際上垂直方向的排列計(jì)算是基于父元素的寬度而不是高度。定義兩個(gè)元素：

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

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

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

Firefox用它自己的方式去計(jì)算按鈕的邊距。這聽(tīng)起來(lái)有點(diǎn)奇怪，但它會(huì)自動(dòng)地添加一些邊距進(jìn)去：

可以用以下方法來(lái)修復(fù)這個(gè)問(wèn)題：

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;
}

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

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

如果你仍需要適配IE7或者類似的古老瀏覽器，你可以在定義hack的時(shí)候使用笑臉?lè)?hào)，像這樣：

body {  
    :) background: pink;
}

是不是很有趣？

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