सीएसएस 2/सीएसएस 3

Question

में "सामग्री:" संपत्ति के विभिन्न संभावित उपयोग मैं सीएसएस में content: संपत्ति के लिए विभिन्न संभावित उपयोगों के बारे में कुछ अपरिवर्तनीय जानकारी ढूंढने की कोशिश कर रहा हूं लेकिन 2004 के बाद से वेब डेटिंग के पूर्वजों के काल में केवल सामान ढूंढता हूं इसलिए मैंने सोचा कि मैं फिर से 2011 में यह पूछने के लिए: गलती से इस सवाल का जो बहुत रचनात्मक एक द्वारा उत्तर दिया गया था पर

p:before { 
content: url(dingdong.png); 
} 

p:before { 
content: "some text "; 
} 

मैं बहुत दोनों :before चयनकर्ता के साथ-साथ content: संपत्ति के लिए नए और इसके बारे में सुना कर रहा हूँ सुंदर महिला:

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

केवल पता लगाने के लिए कि कुछ समस्याओं सामग्री की वास्तविक एन्कोडिंग के विषय में हो सकता है:

li:before{ content: "■"; } How to Encode this Special Character as a Bullit in an Email Stationery?

और इसलिए मेरी ठोस सवाल यह है: url() और "text" के अलावा, वहाँ अन्य संभावनाएं हैं?
आपके सुझावों और विचारों के लिए बहुत बहुत धन्यवाद।

Answer 1

ओह, भी कई सूची।सबसे आम मामलों से कुछ हैं:

• विशेष नंबर, counter() समारोह के साथ, counter-reset और counter-increment गुणों के साथ

• शुद्ध सीएसएस clearfix के साथ:

  .foo:after { 
      content: ""; 
      display: block; 
      clear: both; 
  } 
  

• प्रदर्शन विशेषताओं , उदाहरण के लिए प्रिंट स्टाइलशीट

  a[href]:after { 
      content: ' (' attr(href) ') '; 
  } 
  

  में हाइपरलिंक्स के लिए यूआरएल प्रिंट करने के लिए

• टाइपोग्राफ़िक गहने जोड़ें जो HTML में नहीं होना चाहिए क्योंकि वे प्रस्तुतिशील हैं। उदाहरण के लिए, मेरे blog में, मैंने इसे पोस्ट या साइडबार लिंक के बीच गहने के लिए उपयोग किया है।

  .bubble { 
      position: relative; 
      background: silver; 
  } 
  
  .bubble:after { 
      content: ""; 
      border:10px solid transparent; 
      border-top-color:silver; 
      position: absolute; 
      bottom:-20px 
  } 
  

और बहुत से,:

माउस हाइपरलिंक करने के लिए वे जहां बात पर निर्भर करता है, की तरह

a[href^="http://twitter.com/"]:before { 
    content: url('twitter-icon.png'); 
} 

एक सीएसएस-केवल स्पीच बबल बनाने के लिए एक सूचक को जोड़ने से जोड़ें, अन्य कई।

बस सावधान रहें: यदि कुछ प्रस्तुतिकरण नहीं है, तो यह शायद आपके HTML में होना चाहिए। उपयोगकर्ता सीएसएस जेनरेट की गई सामग्री का चयन नहीं कर पाएंगे, और स्क्रीन पाठक इसे अनदेखा करेंगे।

Answer 2

आप काउंटर का भी उपयोग कर सकते हैं। http://www.w3schools.com/css/tryit.asp?filename=trycss_content_counter

आप चयनित तत्व की एक निश्चित विशेषता भी प्रदर्शित कर सकते हैं। http://jsfiddle.net/EcnM2/

आप खोलने और समापन उद्धरण भी जोड़ या निकाल सकते हैं।

w3schools सामग्री संपत्ति सूची: http://www.w3schools.com/css/pr_gen_content.asp

Answer 3

जेनरेट किए गए सामग्री स्क्रीन रीडर द्वारा कथित नहीं किया जाएगा तो उपयोग से संबंधित समस्याओं से सावधान।
content बहुत उपयोगी है लेकिन ऐसे मामले हैं जहां यह टेक्स्ट HTML कोड में होना चाहिए क्योंकि यह जानकारी व्यक्त करता है और न केवल सजावटी है (सीएसएस बनाम सूचनात्मक img में पृष्ठभूमि छवियों की तरह एक गैर-खाली alt विशेषता के साथ)

• : के बाद और सामग्री बिना किसी अतिरिक्त div
• के साथ एक clearfix रूप में इस्तेमाल किया जा सकता है: पहले और: एकाधिक पृष्ठभूमि ब्राउज़रों कि CSS3 सुविधा समझ में नहीं आता के लिए (/ तत्व में ही डब्ल्यू 3 तक) लाने के बाद।

संपादित करें: एक सूची के अलावा के बारे में printing the href attribute of links सामग्री की मदद से उनके पाठ के साथ में एरिक मेयेर के लेख के बारे में भूल (यह एक JS improvement के बाद किया गया, FYI)