基於HTML5數據屬性的樣式化內容

我讀到過，基於HTML5數據屬性對內容進行樣式設計是不好的做法。從html5doctor.com基於HTML5數據屬性的樣式化內容

引用：

的存在/不存在一個特定的數據屬性的不應該被用來作爲CSS鉤任何樣式。這樣做會暗示您正在存儲的數據對用戶而言非常重要，應該以更具語義和可訪問性的方式標記爲。

有人可以在這個陳述上多說一點，或者舉出一些爲什麼這會對用戶體驗產生負面影響的例子嗎？

作爲一個非常簡單的例子，說我使用的元素data-attribute-error="404"提供反饋給一個腳本，而不必同時每個元素添加error-404，error-500等類的一些補充的造型，我能不能只這些樣式如下：

.error { color: red; } 
.error[data-attribute-error]:after { content: attr(data-attribute-error); } 
.error[data-attribute-error=404] { color: grey; } 
.error[data-attribute-error=404]:after { color: red; } 
/* etc */

這可能不是最好的例子，我並不擔心瀏覽器的支持。我只是想更好地理解整體概念。

似乎會有很多很酷的東西，我們可以用CSS3和自定義屬性來對基於內容的事物進行樣式化，讓我們的「真實」類更通用，以處理不基於內容的純樣式。

這只是一個一般的指導方針，在某些情況下可以忽略，還是可怕的客戶端罪？

謝謝！

來源

2012-03-15 Adam

基本上他們建議的是，如果錯誤信息，狀態或數量足夠重要，以向用戶呈現，那麼它應該以可訪問的方式呈現。 WCAG Guideline 1.4.1說：

使用顏色的：顏色不被用作輸送信息，指示動作，提示的響應，或區分可視元素的唯一的視覺裝置。（Level A）

另一件需要注意的是CSS創建的內容不適用於屏幕閱讀器和其他輔助技術。

來源

2012-03-16 00:47:57 robertc

基於HTML5數據屬性的樣式化內容

回答

相關問題