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

時間  2019-11-05
標籤 必備 css 技巧 欄目 CSS 简体版
原文   原文鏈接

寫於 2016.07.03css

原文連接：22 Essential CSS Recipeshtml

你們好，今天咱們將會介紹一些很是實用的CSS小技巧，讓咱們開始吧！git

混合模式

不久以前Firefox和Safari瀏覽器已經開始支持相似Photoshop的混合模式，可是在Chrome和Opera瀏覽器中須要添加前綴。舉個栗子：github

// 你也能夠嘗試不一樣的樣式

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

在線體驗地址web

漸變邊框

如今，你甚至能夠在邊框中使用漸變。 要使用漸變邊框很是簡單，只須要設置一個更低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屬性，最終的代碼會和下面同樣：bash

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

z-index的過渡

也許你不知道z-index一樣支持過渡！在過渡的每一步中，它的值都不發生改變，因此你覺得它不支持過渡——但其實它支持。 舉個栗子svg

currentColor

咱們可使用這個方法來偵測當前的顏色，以免常常地重複定義它。 這個方法在使用SVG圖標的時候很是有用，由於它們的顏色由其父元素決定。一般咱們是這麼作的：post

.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中它是十進制的，好比&#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;    
}
複製代碼

這裏是全部的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個方式去實現它： 一、 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;
}
複製代碼

二、 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%);
}
複製代碼

三、 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;
}
複製代碼

是否是頗有趣？

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程