सीएसएस सामग्री संपत्ति: क्या पाठ के बजाय HTML सम्मिलित करना संभव है?

Question

बस अगर यह संभव है कि किसी तरह से सीएसएस contentसंपत्ति डालने के बजाय html कोड को स्ट्रिंग पर :beforeया :afterएक तत्व जैसे:

.header:before{
  content: '<a href="#top">Back</a>';
}

यह काफी आसान होगा ... यह जावास्क्रिप्ट के माध्यम से किया जा सकता है, लेकिन इसके लिए सीएसएस का उपयोग करना वास्तव में जीवन को आसान बना देगा :)

Comments

@ कैइडो ओएमजी ... यह नहीं है, प्रश्न की तारीख की जांच नहीं की, मैंने आपके उत्तर का उल्लेख किया है ... वास्तव में क्षमा करें, इन दोनों टिप्पणियों को हटा देगा :)

— असॉन

Answer 1

दुर्भाग्य से, यह संभव नहीं है। प्रति कल्पना :

जेनरेट की गई सामग्री दस्तावेज़ ट्री में परिवर्तन नहीं करती है। विशेष रूप से, इसे दस्तावेज़ भाषा प्रोसेसर को वापस नहीं खिलाया जाता है (उदाहरण के लिए, पुनरावर्ती के लिए)।

दूसरे शब्दों में, स्ट्रिंग मानों के लिए इसका अर्थ है कि मूल्य का शाब्दिक रूप से व्यवहार किया जाता है। यह कभी भी मार्कअप के रूप में व्याख्या नहीं की जाती है, भले ही उपयोग में दस्तावेज भाषा हो।

एक उदाहरण के रूप में, निम्न HTML के साथ दिए गए CSS का उपयोग करना:

<h1 class="header">Title</h1>

... निम्नलिखित उत्पादन में परिणाम होगा:

<a href="#top"> बैक </a> शीर्षक

Comments

सहमत, लेकिन अगर आप कल्पना करते हैं कि इसमें पहले से ही urlविशेषताओं के साथ छवियों के लिए समर्थन है , तो एक लिंक जोड़ना इस परिप्रेक्ष्य में अलग नहीं होगा।

— ज़ानोना

@ludicco: ऐसा इसलिए है क्योंकि छवियां स्वयं DOM तत्व नहीं हैं (गिनती नहीं <img>), वे केवल मौजूदा तत्वों पर खींची जा रही हैं, इसलिए पृष्ठभूमि या सूची छवियों को लागू करके आप वास्तव में DOM को संशोधित नहीं कर रहे हैं।

— BoltClock

धन्यवाद मिल गया, इसलिए मुझे लगता है कि मुझे यह विचार पास करना होगा और सीधे js, चीयर्स पर जाना होगा

— zanona

@ludicco: अच्छा सवाल है। यहां तक ​​कि मैं एसओ के माध्यम से खोज कर रहा था उम्मीद है कि यह संभव था।

— रॉबिन माबेन सेप

@ वॉटसन: बस दूसरे प्रश्न के लिए आपका उत्तर देखा। आप सही हे; मुझे शायद अपने जवाब में स्पष्ट करना चाहिए कि आप मनमानी मार्कअप नहीं जोड़ सकते हैं - आपको url()इसके बजाय किसी अन्य छवि के साथ एक बाहरी फ़ाइल निर्दिष्ट करना होगा ।

— BoltClock

Answer 2

जैसा कि आधुनिक ब्राउज़र में @ BoltClock के जवाब में टिप्पणियों में लगभग उल्लेख किया गया है , आप वास्तव url()में svg के <foreignObject>तत्व के साथ संयोजन में ( ) का उपयोग करके छद्म तत्वों में कुछ html मार्कअप जोड़ सकते हैं ।

आप या तो एक वास्तविक svg फ़ाइल की ओर इशारा करते हुए एक URL निर्दिष्ट कर सकते हैं, या एक dataURI संस्करण के साथ बना सकते हैं ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))

लेकिन ध्यान दें कि यह ज्यादातर एक हैक है और इसमें बहुत सी सीमाएँ हैं:

• आप इस मार्कअप (कोई सीएसएस, कोई चित्र, कोई मीडिया आदि) से किसी भी बाहरी संसाधनों को लोड नहीं कर सकते ।
• आप स्क्रिप्ट निष्पादित नहीं कर सकते।
• चूंकि यह DOM का हिस्सा नहीं होगा, इसलिए इसे बदलने का एकमात्र तरीका है, मार्कअप को डेटारी के रूप में पास करना, और इस डेटायूआरआई को संपादित करना document.styleSheets। इस भाग के लिए, DOMParserऔर मददXMLSerializer कर सकता है ।
• जबकि एक ही ऑपरेशन हमें <img>टैग में url- एन्कोडेड मीडिया को लोड करने की अनुमति देता है , यह छद्म तत्वों में काम नहीं करेगा (कम से कम आज के रूप में, मुझे नहीं पता कि यह कहीं भी निर्दिष्ट है कि यह नहीं होना चाहिए, इसलिए यह हो सकता है एक अभी तक कार्यान्वित सुविधा नहीं है)।

अब, छद्म तत्व में कुछ html मार्कअप का एक छोटा डेमो:

/* 
**  original svg code :
*
*<svg width="200" height="60"
*     xmlns="http://www.w3.org/2000/svg">
*
* <foreignObject width="100%" height="100%" x="0" y="0">
*	<div xmlns="http://www.w3.org/1999/xhtml" style="color: blue">
*		I am <pre>HTML</pre>
*	</div>
* </foreignObject>
*</svg>
*
*/

#log::after {
  content: url('data:image/svg+xml;%20charset=utf8,%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2260%22%20width%3D%22200%22%3E%0A%0A%20%20%3CforeignObject%20y%3D%220%22%20x%3D%220%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%0A%09%3Cdiv%20style%3D%22color%3A%20blue%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%09%09I%20am%20%3Cpre%3EHTML%3C%2Fpre%3E%0A%09%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E');
}

<p id="log">hi</p>

Comments

मैं आपके उत्तर पर आया हूं, और यह मेरे अपने कुछ मुद्दों का समाधान है। क्या आप बता सकते हैं कि किसी फ़ाइल की ओर इशारा करने वाले URL को कैसे प्रारूपित करें? मैंने कोशिश की url('/relativePathToMySvg/mySvg.svg')और यह काम नहीं किया

— फ्रैंक

@ फ्रेंक, प्रति चश्मा, एक रिश्तेदार पथ का उपयोग करना आपकी सीएसएस फ़ाइल के पथ के सापेक्ष होगा अर्थात, यदि आपने अपनी सीएसएस फ़ाइल प्राप्त कर ली है /root/css/yourFile.css, तो एक रिश्तेदार फंकीरी की तरह yourFile.svgइशारा कर देगा /root/css/yourFile.svg/। लेकिन, मुझे लगता है कि मुझे याद है कि कुछ पहले यूए में बग था और इसे दस्तावेज़ के आधार के सापेक्ष बनाया गया था। इसलिए सुरक्षित रास्ता सिर्फ निरपेक्ष पथ का उपयोग करना है।

— काइदो

@ बॉलकॉक, सच में? मैं इसके बारे में वास्तव में माफी चाहता हूँ। मैं इस 6 साल पुराने सवाल पर एक दूसरे से आया और मुझे लगा कि मुझे इसे अपडेट के रूप में पोस्ट करना है, लेकिन शायद मुझे और भी स्पष्ट होना चाहिए कि आपका उत्तर अच्छा है, और 6 साल पहले निश्चित रूप से सही था? या यदि आपके पास कुछ अच्छे शब्द हैं जो हेडर के रूप में फिट हो सकते हैं, तो मेरे उत्तर को संपादित करने के लिए स्वतंत्र महसूस करें।

— काइदो

अच्छा लगा। मैंने इस्तेमाल किया: content: url('../../images/como-funciona.svg');और यह ठीक काम करता है

— एलियट इसलास

यहाँ एक पहले की पोस्ट है, जिसमें मेरा एक उत्तर है, जो इस विषय में थोड़ी गहराई से गोता लगाती है: यह-यह संभव-से-प्रदर्शन-एक-html-दस्तावेज़-या-html-टुकड़ा-पर-सीएसएस-सामग्री है

— आसन

Answer 3

CSS3 के पृष्ठांकित मीडिया में इसका उपयोग करना संभव है position: running()और content: element()।

Paged Media मॉड्यूल ड्राफ्ट के लिए CSS जेनरेट की गई सामग्री से उदाहरण :

@top-center {
  content: element(heading); 
}

.runner { 
  position: running(heading);
}

.runner किसी भी तत्व हो सकता है और headingस्लॉट के लिए एक मनमाना नाम है।

संपादित करें: स्पष्ट करने के लिए, मूल रूप से कोई ब्राउज़र समर्थन नहीं है, इसलिए यह अधिकतर भविष्य के संदर्भ के लिए था / पहले से दिए गए 'व्यावहारिक जवाब' के अलावा।

Comments

अरे, क्या आप इसे थोड़ा और समझा सकते हैं। मुझे आपकी थ्योरी में दिलचस्पी है लेकिन इसे अंजाम देने के लिए ऐसा प्रतीत नहीं हो सकता। मैं कैसे कहूंगा, इस विधि या div का उपयोग कर एक एंकर टैग शामिल है।

— नील

समस्या यह है कि वर्तमान में मूल रूप से कोई ब्राउज़र समर्थन नहीं है, लेकिन समर्पित HTML रेंडरर्स इसे कल्पना के अनुसार लागू करते हैं। अगली नहीं तो अच्छी खबर यह है कि एक अच्छा खुला स्रोत कार्यान्वयन नहीं लगता है; अधिकांश princexml.com जैसे सास उत्पाद हैं ।

— सोल