CSS產生的內容技術
- 巴扎黑原創
- 2017-06-28 14:14:401291瀏覽
介紹
該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元素
< q>It's only work if somebody makes you do it
Hvis du forteller meg nok en vits, så s;q>Hvis du forteller meg nok en vits, så s;q>Hvis du forteller meg nok en vits, 可能
並指定適合您CSS中每種語言的引號
/* Specify quotes for two languages */
:lang (en) > q { quotes: '“' '”' }
:lang(no) > q { quotes: "«" "»"}
/* Insert quotes before and after element content */
q:before { content: open-quote }
q:after { content: close-quote }
您這種技術可以用於任何元素，而不僅僅是q（儘管這是最明顯和語義的用途）。
#查看我的報價插件演示，看看這個在行動。優點和缺點。##使用此技術進行圖像替換的優點在於它可以真正替代文字。 。
它將只適用於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在端部的值的。
由於正規表示式，^並$分別指字串的開始和結束。使用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功能。只需在適當的情況下使用它，並注意所產生的內容仍然具有的可訪問性影響。以上是CSS產生的內容技術的詳細內容。更多資訊請關注PHP中文網其他相關文章！