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

Jrain發表於2018-12-12
CSS

寫於 2016.07.03

原文連結：22 Essential CSS Recipes

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

混合模式

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

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

// 你也可以嘗試不同的樣式.blend { 
   background: #fff;

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

線上體驗地址

漸變邊框

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

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

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

也許你不知道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;

  }複製程式碼
【譯】22個必備的CSS小技巧

舉個例子

單選框和核取方塊的樣式

讓我們一起不使用圖片來設定核取方塊的樣式：

<
!-- 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";

  }複製程式碼
【譯】22個必備的CSS小技巧

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

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

<
!-- 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;
    
  }複製程式碼
【譯】22個必備的CSS小技巧

這裡是所有的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);

  } 複製程式碼
【譯】22個必備的CSS小技巧

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

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

  } 複製程式碼
【譯】22個必備的CSS小技巧

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

不使用圖片的選單圖示

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

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

這裡有至少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

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

我們發現了一個新的特性，你可以新建一個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%;

  }複製程式碼

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

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

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

火狐瀏覽器的按鈕邊距

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

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

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

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;

  }複製程式碼
【譯】22個必備的CSS小技巧

古老瀏覽器的彩蛋

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

body { 
     :) background: pink;

  }複製程式碼

是不是很有趣？

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

來源：https://juejin.im/post/5c1101875188257afc713809#comment

相關文章