【譯】22個必備的CSS小技巧

阿新 • • 發佈：2018-12-12

寫於 2016.07.03

原文連結：22 Essential CSS Recipes

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

混合模式

不久之前Firefox和Safari瀏覽器已經開始支援類似Photoshop的混合模式，但是在Chrome和Opera瀏覽器中需要新增字首。舉個栗子：

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

.blend {
    background: #fff;
}
.blend img {
    mix-blend-mode: darken; 
}
複製程式碼

線上體驗地址

漸變邊框

現在，你甚至可以在邊框中使用漸變。要使用漸變邊框非常簡單，只需要設定一個更低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的過渡

也許你不知道z-index同樣支援過渡！在過渡的每一步中，它的值都不發生改變，所以你以為它不支援過渡——但其實它支援。

舉個栗子

currentColor

我們可以使用這個方法來偵測當前的顏色，以避免經常地重複定義它。這個方法在使用SVG圖示的時候非常有用，因為它們的顏色由其父元素決定。通常我們是這麼做的：

.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;
  ...
}
複製程式碼

Object Fit

你是否還記得為了解決一些問題而給一幅背景圖設定background-size屬性的時刻呢？現在你可以使用object-fit屬性啦，webkit瀏覽器都支援它，Firefox也將在近期予以支援。

.image__contain {
  object-fit: contain; 
} 
.image__fill {
  object-fit: fill; 
}
.image__cover {
  object-fit: cover; 
}
.image__scale-down {
  object-fit: scale-down;
}
複製程式碼

舉個栗子

單選框和複選框的樣式

讓我們一起不使用圖片來設定複選框的樣式：

<!-- html -->
<input type="checkbox" id="check" name="check" />
<label for="check">Checkbox</label>
複製程式碼

<!-- css -->
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";
}
複製程式碼

正如你所看見的，我們隱藏了原有的複選框，改為使用偽元素和偽類:checked（IE9+）來表現它。當它被選中時，一個設定在content裡的Unicode編碼的字元將會顯示出來。

值得注意的是，Unicode編碼在CSS和HTML中的寫法是不一樣的。在CSS中它是一個以反斜槓為開始的十六進位制數，而在HTML中它是十進位制的，比如✓。接著為我們的複選框新增一些動畫效果：

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

<!-- radio -->
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編碼，以及可以在這裡進行體驗。

CSS中的計數器

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

<!-- html -->
<ol class="list">  
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>  
複製程式碼

<!-- css -->
.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屬性中作為初始值（預設為0）。你可以設定另一個值在counter-increment屬性中作為每一步的遞增值。

高階CSS計數器

你可以計算出有多少個複選框被使用者勾選了：

<!-- html -->
<div class="languages">  
  <input id="c" type="checkbox"><label for="c">C</label>
  <input id="C++" type="checkbox"><label for="C++">C++</label>
  <input id="C#" type="checkbox"><label for="C#">C#</label>
  <input id="Java" type="checkbox"><label for="Java">Java</label>
  <input id="JavaScript" type="checkbox"><label for="JavaScript">JavaScript</label>
  <input id="PHP" type="checkbox"><label for="PHP">PHP</label>
  <input id="Python" type="checkbox"><label for="Python">Python</label>
  <input id="Ruby" type="checkbox"><label for="Ruby">Ruby</label>
</div>  
<p class="total">  
  Total selected:
</p>  
複製程式碼

<!-- css -->
.languages {
  counter-reset: characters;
}
input:checked {  
  counter-increment: characters;
}
.total:after {
  content: counter(characters);
} 
複製程式碼

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

<!-- html -->
<div class="numbers">  
  <input id="one" type="checkbox"><label for="one">1</label>
  <input id="two" type="checkbox"><label for="two">2</label>
  <input id="three" type="checkbox"><label for="three">3</label>
  <input id="four" type="checkbox"><label for="four">4</label>
  <input id="five" type="checkbox"><label for="five">5</label>
  <input id="one-hundred" type="checkbox"><label for="one-hundred">100</label>
</div>  
<p class="sum">  
  Sum 
</p>  
複製程式碼

<!-- css -->
.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和文章。

不使用圖片的選單圖示

你記得你有多麼經常被迫需要一個“漢堡”圖示嗎？

這裡有至少3個方式去實現它： 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 你可以直接使用標準符號：☰ (Unicode: U+2630, HTML: ☰)。你也可以像其他元素那樣靈活設定它的顏色或大小。看例子。你也可以使用SVG，字型圖示，或者通過偽元素設定的border邊框。

@Supports

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

@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;
    }
}
複製程式碼

visibility: visible

依你估計，把一個設定為visibility: visible的元素放在一個設定為visibility: hidden的元素裡面，會發生什麼？

.hidden {
  visibility: hidden;
}
.hidden .visible {
  visibility: visible;
}
複製程式碼

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

position: sticky

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

.sticky {
  position: static;
  position: sticky;
  top: 0px;
}
複製程式碼

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

新的尺寸單位

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

vw (viewport width) - 瀏覽器視窗寬度的1%。
vh (viewport height) - 同上，只不過用來描述高度。
vmin and vmax 設定介於vh和vw之間的最大最小值。

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

.some-text {
    font-size: 100vh;
    line-height: 100vh;
}
複製程式碼

或者你可以設定一個漂亮的彈出框在螢幕中間：

.blackSquare {
    background: black;
    position: fixed;
    height: 50vh;
    width: 50vw;
    left: 25vw;
    top: 25vh;
}
複製程式碼

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

IE9應該用vm而不是vmin。
iOS7在使用vh的時候可能會有bug。
vmax至今並未得到全面的支援。

文字修飾

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

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

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

觸控屏當中的元素滾動

如果你需要在觸控屏當中為一些元素設定內滾動，那麼你不僅需要overflow: scroll / auto，還需要-webkit-overflow-scrolling: touch; 實際上，移動端瀏覽器在某些時候並不能正確執行overflow: scroll / auto，它可能會滾動整個頁面而不是你想要的那部分。-webkit-overflow-scrolling解決了這個問題，你可以在你的實際專案中體驗一下。

使用硬體加速

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

.block {
    transform: translateZ(0);
}
複製程式碼

你並不會察覺有什麼不同，但瀏覽器會為這個元素進行3D硬體加速，在will-change這個特殊屬性未被全面支援之前，這個方法還是很有用的。

Unicode Classes

你可以用Unicode符號明名class：

.❤ {
    ...
}
.☢ {
    ...
}
.☭ {
    ...
}
.★ {
    ...
}
.☯ {
    ...
}
複製程式碼

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

垂直方向的百分比邊距

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

<!-- html -->

<div class="parent">  
    <div class="child"></div>
</div> 
複製程式碼

<!-- css -->

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

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

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

火狐瀏覽器的按鈕邊距

Firefox用它自己的方式去計算按鈕的邊距。這聽起來有點奇怪，但它會自動地新增一些邊距進去：

可以用以下方法來修復這個問題：

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;
}
複製程式碼

Color + Border = `Border-Color`

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

input[type="text"] {  
    color: red;
    border: 1px solid;
}
複製程式碼

古老瀏覽器的彩蛋

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

body {  
    :) background: pink;
}
複製程式碼

是不是很有趣？

如果你覺得我翻譯得不錯，請點贊收藏並關注我的專欄，我會陸續推出更多精彩的內容。如發現任何的錯漏歡迎指正，我們下次見！