CSS產生的內容技術

介紹

該content物業是在CSS 2.1引入產生的內容添加到:before和:after虛擬元素。所有主流瀏覽器（Firefox 1.5+，Safari 3.5+，IE 8+，Opera 9.2+，Chrome 0.2+）都支援此功能。此外，歌劇9.5+支援在內容屬性的所有元素，而不僅僅是:before和:after虛擬元素。

在CSS 3產生內容工作草案中，該content屬性已添加了更多功能 - 例如，可以在文檔周圍插入和移動內容以建立腳註，章節附註和部分注釋。但是沒有瀏覽器實現了擴充的功能content。

在本文中，我們將介紹使用產生的內容的基礎知識，然後分析出可以使用它們的具體技術。

幾個警告

在我們深入瞭解這個主題之前，值得指出的是產生的內容

只能在啟用了CSS的現代瀏覽器中工作

不通過DOM可用。這是純粹的表現形式。具體來說，從可訪問性的角度來看，當前的螢幕助讀程式不支援產生的內容。

產生的內容 - 基礎知識

content 是這樣使用的：

h2:before {

content: "some text";

}

這將在頁面上每個元素的開始之前插入“一些文本” h2。

而不是輸入content屬性的文本值，還可以使用屬性值attr()，如下所示：

a:after {

content: attr(href)

}

這將在a元素href結束後插入每個元素的內容。

請注意，在引用它時需要使用不帶引號的屬性名稱attr()。

您也可以使用counter或使用插入映像產生動態數字url(/path/to/file)。我們來看一些例子。

用計數器編號內容

如果要在重複的元素序列中插入增量值，例如問題1，問題2，問題3，則可以使用計數器增加計數器值，然後使用content以下方式顯示計數：

ol {

列表樣式類型：無;

計數器重設：分段計數器

}

li：before {

內容：“章”櫃檯（攤位）;

反增量

}

在第一條規則中，使用該counter-reset屬性將計數器重設為1 。在第二個規則中，每個li元素都有一個列印出來的字串，其中X是計數器的當前值。第二條規則中的最後一個屬性 - 將計數器的值增加1，然後再轉到列表中的下一個元素。Chapter Xsectioncountercounter-incrementsectioncounterli

如果您正在插入計數器的內容，請注意，如果該元素已display:none指定，它們將不會遞增。

當然，在不支援此CSS功能的瀏覽器中，不會顯示編號。這樣會讓您感到困惑，如果您的網頁中的某個地方，請參閱第十章以瞭解更多詳細資料。這是產生內容純粹是裝飾性的或內容的實際部分之間的細微差別，它應該寫在實際的HTML中。

我已經寫了一個示範來說明建立帶有產生內容的計數器。有關此主題的更多細節，請閱讀David Storey關於使用CSS計數器自動編號的優秀文章。

為多語言內容插入正確的引號

不同的語言使用不同的字元進行引號。英文報價將寫為：

“只有有人讓你做到這一點，

挪威語的引用是用這種方式寫的：

«Hvis du forteller meg nok en vits，såskal jegslådeg til jorden»»

而不是在HTML中使用帶有寫入程式碼引號的簡單文本，您可以使用該q元素

<p><q>It’s only work if somebody makes you do it</q></p>

<p><q>Hvis du forteller meg nok en vits, så skal jeg slå deg til jorden.</q></p>

並指定適合您CSS中每種語言的引號

/* Specify quotes for two languages */

:lang(en) > q { quotes: '“' '”' }

:lang(no) > q { quotes: "«" "»"}

/* Insert quotes before and after <q> element content */

q:before { content: open-quote }

q:after { content: close-quote }

您可以將這種技術用於任何元素，而不僅僅是q（儘管這是最明顯和語義的用途）。請注意，Safari 3（及以下）和IE 7（及以下）不支援quotes屬性。

查看我的報價外掛程式示範，看看這個在行動。

用映像替換文本

有幾種圖片替換技術，你可以使用，每個都有自己的優點和缺點。這是使用映像替換文本的另一種方法content。

div.logo {

內容：網址（logo.png）;

}

使用此技術進行映像替換的優點在於它可以真正替代文本。因此，您不必訴諸於使用height和width建立映像的空間，text-indent或padding隱藏原始文本。

但是，有一些缺點：

您不能重複映像，或使用映像精靈

它將僅適用於Opera 9.5+，Safari 4+，Chrome，它支援content所有選取器上的url作為價值的屬性，而不僅僅是:before或:after

沒有辦法使用這種方法來包含替代文本，因此螢幕助讀程式將無法理解您的內容替換映像。

要瞭解更多資訊，請使用內容查看我的映像更換示範。

顯示連結表徵圖

您可以使用內容屬性的屬性選取器根據其所屬的檔案格式或外部檔案格式在連結之後渲染表徵圖。

a[href $='.pdf']:after {

content:url(icon-pdf.png);

}

a[rel="external"]:after { /* You can also use a[href ^="http"]:after */

content:url(icon-external.png);

}

所述第一規則使用與子串匹配一個CSS3選擇- href $='.pdf'意味著href具有屬性.pdf在端部的值的。

由於Regex，^並$分別指字串的開始和結束。使用CSS 3 子字串匹配屬性選取器，[attribute^=value]並[attribute$=value]允許您匹配屬性內容以指定值開始或結束的[attribute*=value]元素，同時選擇該屬性中任何位置的元素。

這是一個在連結上顯示PDF和外部表徵圖的示範。

使用屬性值作為內容

我們已經提到，content: attr(val)允許您在螢幕上顯示元素屬性的值。這可以用很多有用的方式使用 - 這裡有幾個例子。

列印CSS中的URL /縮寫

正如文章中提到要列印在相隔列表，您可以使用產生的內容一旦他們列印出來，可以豐富您的頁面。例如，在列印CSS中列印以下連結的URL：

a:after {

content: "(" attr(href) ")";

}

您可以使用相同的方法來列印abbr元素的擴充。只需將以下內容添加到您的列印樣式表中：

abbr：after {

內容：“（”attr（title）“）”;

}

查看我的列印URL和縮寫擴充示範，瞭解更多資訊。

展望未來：attr()CSS3 強大

的CSS3值和單位草案擴充的範圍attr()表達-在除了返回字串，它也可以傳回值，如單元類型的CSS顏色，CSS整數，長度，角度，時間，頻率，以及其它單元。

除了自訂資料屬性，這可以真正強大的渲染簡單的圖表，圖形和動畫。例如，我們可以根據屬性值設定元素的背景顏色。這可能在在Web上顯示調色盤的應用程式中有用。我們還可以根據自訂資料屬性中設定的值指定元素的大小 - 例如，橫條圖中條形的長度可以由表示條形的元素的屬性設定。不幸的是，這個功能是低優先順序的，不久之後就不會很快完成。

結論

希望這篇文章能夠讓您更好地瞭解該content屬性，以及您可以使用該屬性。鑒於IE 8現在也支援content，所以我們真的很清楚，在我們的生產工作中可以使用這個CSS功能。只需在適當的情況下使用它，並注意所產生的內容仍然具有的可訪問性影響。