सीएसएस सामग्री, एटीआर और यूआरएल एक ही वाक्य में

Question

मैंने लंबे समय से सामग्री विशेषता का उपयोग किया है, और आज मैं कुछ नया करने की कोशिश करना चाहता था। एक छवि टूलटिप प्रदर्शित करने के लिए जेएस का उपयोग करने के बजाय मैं जानना चाहता था कि सीएसएस के साथ गतिशील रूप से ऐसा करना संभव था या नहीं।

तो मैं करने की कोशिश की:

.TableLine:hover:after{ 
    content: url("../Img/Photo/"attr(id)".jpg"); 
} 

जहां attr(id) चित्र (अल्फान्यूमेरिक) की आईडी जो भी चित्र का नाम है वापस जाने के लिए माना जाता है।

यह बिल्कुल काम नहीं करता है, इसका कोई प्रभाव नहीं पड़ता है। मुझे लगता है कि ब्लॉक ने पार्स नहीं किया क्योंकि ब्लॉक में सीमा या पृष्ठभूमि जोड़ने से कोई प्रभाव नहीं पड़ता है।

जब मैं केवल यूआरएल चीज़ के बिना attr(id) का उपयोग करता हूं, तो यह पूरी तरह से काम करता है। यह तब भी काम करता है जब मैं चित्र के वास्तविक नाम के साथ attr(id) को प्रतिस्थापित करता हूं।

वेब पर कुछ समय खोजने के बाद मुझे कुछ भी प्रासंगिक नहीं मिला है, इसलिए मैं यहां हूं। क्या यह एक ज्ञात बग या सिर्फ मेरी गलती है? :)

Answer 1

यह न तो एक बग और न ही गलती है। वर्तमान में समर्थित वाक्य रचना (CSS2.1) सामग्री के लिए है:

content: normal | none | 
     [ <string> | <uri> | <counter> | attr() | 
      open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit 

Ie:

• शाब्दिक normal, none या inherit

• या इन लगातार के किसी भी संख्या:

  • एक स्ट्रिंग - "hello"
  • एक (निरंतर) यूआरआई - url("image.jpg")
  • एक काउंटर - counter(section)
  • एक विशेषता - attr(id)
  • open-quote, close-quote, no-open-quote, no-close-quote

specs उनके लिए अनुमति न दें करने के लिए "नेस्ट" हो, वे केवल एक दूसरे को, उदा .:

content: "Photo: " url("../Img/Photo.jpg") attr(id); 
/* Which is not what you want */ 

वर्तमान CSS3 के ड्राफ्ट या तो इसके लिए अनुमति नहीं देते पालन कर सकते हैं। संभवतः - यदि इस पर चर्चा की गई है - क्योंकि अधिकांश उपयोग मामलों में प्रस्तुति के साथ बहुत कुछ नहीं होगा और वास्तविक सामग्री के साथ अधिक कुछ करना होगा।

Answer 2

डब्ल्यू 3 सी उम्मीदवार की सिफारिश 28 अगस्त 2012 के अनुसार, attr() द्वारा दिए गए प्रकार को निर्दिष्ट करने के लिए वाक्यविन्यास है।

यह here वर्णित है।

लंबी कहानी संक्षेप में, निम्नलिखित काम करेगा:

content: attr(id url); 

लेकिन यह अभी भी नहीं लगता है जैसे आप को श्रेणीबद्ध करने के लिए है कि अन्य तार, जो कष्टप्रद है साथ में सक्षम होगा।

किसी भी तरह, यह अभी भी कहीं भी लागू नहीं प्रतीत होता है।

चेक Browser compatibility