爲何你們都用i標籤用做小圖標?

時間 2019-12-07

原文原文鏈接

用 元素作圖標在語義上是不正確的（雖然看起來像 icon 的縮寫）；
比 短，但 gzip 後差別很小，不過打字能夠少按三個鍵；
多數圖標用的是空 元素，配合 ::before 僞元素實現，由於沒有內容，讀屏器不會朗讀（這樣即便有特殊處理也跳過了），機器理解起來應該也沒什麼影響。

綜合來看，從實用性上暫時沒看出有什麼缺陷，因此目前用不用 取決於你對於遵循規範有多潔癖。

基本語法

:before 和 :after 僞元素編碼很是簡單(和大多數的css屬性同樣不須要一大堆的前綴)。這裏是一個簡單的例子。php

#example:before { content: "#"; } #example:after { content: "."; }

這個例子中提到了兩件事情，第一，咱們用#example:before和#example:after來目標鎖定相同的元素.嚴格的說，在代碼中他們是僞元素。css

第二，在內容模塊中提到，僞元素若是沒有設置「content」屬性，僞元素是無用的。html

在這個例子中，擁有屬性id的元素將有一個"哈希符號"放置內容以前，和一個"句號"在內容以後。前端

語法筆記

你能夠設置content屬性值爲空，而且僅僅把他當作一個內容不多的盒子。像這樣:html5

#example:before { content: ""; display: block; width: 100px; height: 100px; }

然而，你不能夠徹底的移除content屬性，若是你移除了，僞元素將不會起做用。至少，content屬性須要空引用做爲它的值(即:content:「」)。css3

你也許注意到，你也能夠用兩個冒號(::before 和 ::after) 寫僞元素，這個我之前討論過的。簡短的解釋是，對於這兩種語法沒有什麼不一樣，僅僅一點的不一樣是，僞元素(雙冒號)，css3中的僞類是（單冒號）web

最後就語法而言。從技術上講，你能夠廣泛的應用僞元素，不是放在特殊的元素上，像這樣：瀏覽器

:before { content: "#"; }

雖然上面是有效的，可是它十分的沒用。代碼會在DOM裏的每一個元素的內容以前插入散列符號。即便你刪除了<body>標籤和它的全部內容，你仍會在頁面上看見兩個散列符號：一個在<html>裏，另外一個在<body>標籤裏，瀏覽器會自動建立哪個。app

插入內容的特色

正如前面說起的，插入的內容在頁面的源碼裏是不可見的，只能在css裏可見。編輯器

同時，插入的元素在默認狀況下是內聯元素（或者，在html5中，在文本語義的類別裏）。所以，爲了給插入的元素賦予高度，填充，邊距等等，你一般必須顯式地定義它是一個塊級元素。

這會是對如何設計僞元素的一個簡要的說明，看我下面文本編輯器的這幅圖

在這個例子中，我高亮的樣式將被應用到元素裏插入到目標元素內容的前面和後面。

還要注意的是典型的CSS繼承規則適用於插入的元素。例如，你有字體系列黑體，宋體，無襯線字體應用到body元素裏，而後僞元素會像其餘元素同樣繼承這些字體系列。

一樣的，僞元素不會繼承沒有天然繼承自父元素(如 padding and margins)的樣式。

以前或以後是什麼？

你的直覺是：before和：after僞元素多是插入的內容會被注入到目標元素的前或後注入？可是，正如上面提到的，不是這樣的。

注入的內容將是有關聯的目標元素的子元素，content指向的內容會被置於子元素的「前」或「後」。

爲了證實這一點，看看下面的代碼。首先，在HTML：

<p class="box">Other content.</p>

下面是插入僞元素的css：

p.box { width: 300px; border: solid 1px white; padding: 20px; } p.box:before { content: "#"; border: solid 1px white; padding: 2px; margin: 0 10px 0 0; }

在此html裏，你所看的一段文字帶有的是一個類的box，還有這樣的文字「Other content」在裏面（像你所會看到的同樣，若是你看見了首頁的源代碼）。在css中，這段內容被設置了寬度，以及一些padding和可見的邊框

而後咱們有了僞元素。在這個例子中，它是一個散列符號插入到該段內容以前。隨後css給了它一個邊框以及一些padding和margins。

這裏是瀏覽器中查看的結果：

外面的盒子是這個段落。圍繞有散列符號的邊框表示僞元素的邊界。因此，不是插入「before」到段落，而是僞元素被置於到此段落的「Other content」的前面。

插入非文本內容

我簡要的提醒，你能夠把屬性的值置爲空字符串或是插入文本內容。你基本上有屬性的值要包含什麼的兩個額外的選擇

首先，你能夠包含一個指向一個圖像的URL，就像在css裏包含一個背景圖像同樣作你能作的

p:before { content: url(image.jpg); }

注意不能使用引號。若是你將URL用引號括起來，那麼它會變成一個字符串和插入文本「url(image.jpg)」做爲其內容，插入的而不是圖像自己。

固然，你能夠包含一個Data URI代替圖像引用，正如你能夠用css背景同樣。

你還能夠選擇attr(X)中的函數的形式。此功能，根據規範，「把X屬性的值以字符串的形式返回」

下面是一個例子：

a:after { content: attr(href); }

attr（）函數的功能是什麼？它獲得特定屬性的值並把它做爲插入的文本成爲一個僞元素。

上面的代碼會致使頁面上的每個<a>元素的href值當即被放置在每一個各自的<a>元素的後面。在文檔被打印時，它能夠用做一個包含全部URl的打印樣式表。

你也能夠用這個函數去獲取元素的title屬性，或者甚至是microdata的值。固然，並非全部的例子都符合本身的實際，但根據不一樣的狀況，一個特定的屬性值做爲一個僞元素能夠是實際的。

然而，獲取title或者圖像的alt的值並做爲實際的僞元素顯示在頁面上是不可能的。記住僞元素必須是被應用元素的子元素。圖像，這是void(或者是空元素)，沒有子元素，因此它在這個列子中不可用，一樣也適用於其餘空元素，例如：<input>。

可怕的瀏覽器兼容性

任何前端技術的發展勢頭，第一個問題就是瀏覽器的支持。在這種狀況之下，它不是個很大的問題。

瀏覽器支持:before 和 :after 僞元素棧，像這樣：

Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
幾乎全部的移動瀏覽器。

惟一真正的問題是沒有得到支持的（不用奇怪）IE6和IE7。因此，若是你的愛好者是在良好合適的web開發（或者其餘具備較低IE版本的市場），你能夠繼續自由地使用僞元素。

僞元素不是決定性的

幸運的是，缺乏僞元素不會形成大問題。大多數狀況下，僞元素通常修飾（或者幫助）內容，不會給不支持的瀏覽器形成問題。因此，若是你的支持者具備較高的IE版本，你仍然能夠在某種程度上使用它們。

一些提醒

正如前面提到的，僞元素不會出如今DOM中。這些元素不是真正的元素。所以，它們不是可用的。因此，不要使用僞元素生成內容，是您的網頁的可用性和可訪問性的關鍵。

另一件須要記住的是，開發工具，例如火狐，不要用僞元素顯示內容。因此，若是使用了，僞元素會形成難以維護和調試緩慢。

（更新：在評論中提到的，你可使用谷歌的開發工具來查看一個僞元素相關聯的風格，但不會出如今DOM元素裏。同時，火狐在1.8版加入僞元素支持它。）

你所須要用有的理念是用這個技術以創造出實用的東西。與此同時，未來進一步研究CSS僞元素，必定要看看咱們已經連接的一些文章。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。