छद्म बदलें: सीएसएस एटीआर()

Question

का उपयोग कर पृष्ठभूमि रंग से पहले मैं एक छद्म :before तत्व के पृष्ठभूमि रंग को बदलने के लिए सीएसएस attr() का उपयोग करने की कोशिश कर रहा हूं।

<ul> 
    <li data-color="#ff0000">R</li> 
    <li data-color="#00ff00">G</li> 
    <li data-color="#0000ff">B</li> 
</ul> 

यहाँ सीएसएस

ul { 
    list-style: none; 
} 
li:before { 
    background-color: attr(data-color, color); 
    content: ""; 
    display: inline-block; 
    height: 10px; 
    width: 10px; 
} 

है लेकिन इससे पहले कि तत्व data-color विशेषता के अनुसार पृष्ठभूमि रंग नहीं दिखाती है।

लेकिन जब मैं इस सीएसएस

li:after { 
    content: attr(data-color); 
} 

जोड़ने :after तत्व सामग्री के रूप में data-color विशेषता सामग्री दिखाता है।

यहाँ जे एस बेला http://jsfiddle.net/b7Rve/

मैं क्या किया गलत क्या है?

अद्यतन

मैं सिर्फ color के बारे में Mozilla developer docs में पुन: पढ़ने। यह कहता है कि color प्रकार प्रयोगात्मक है। मुझे लगता है कि मुझे अभी भी रिलीज़ होने तक इंतजार करना होगा।

Answer 1

कृपया, इस अन्य धागे को देखें Setting width with CSS attr()।

संक्षेप में: "मोज़िला डेवलपर नेटवर्क के दस्तावेज़ के अनुसार, सीएसएस सामग्री संपत्ति [...] के साथ ही संगत है, लेकिन (अभी तक) अन्य संपत्तियों के लिए मूल्यों उत्पन्न करने के लिए इस्तेमाल किया जा सकता।"

---

अद्यतन कर सकते हैं 16, वर्ष 2016:

:

Mozilla Developer Network's documentation को देखते हुए अब संभव हो लेकिन सावधानी के साथ है

एटीआर() फ़ंक्शन का उपयोग किसी भी सीएसएस संपत्ति के साथ किया जा सकता है, लेकिन सामग्री के अलावा गुणों के लिए समर्थन प्रायोगिक है।

तो, वास्तव में आप इसका उपयोग कर सकते हैं लेकिन निश्चित रूप से ब्राउज़र के समर्थन, अतीत की तुलना में काफी बेहतर, अभी भी दुर्लभ और प्रयोगात्मक है।

Answer 2

You can set color attributes with conditions like this one 

http://jsfiddle.net/vijay1989/kwvokxsx/6/