स्टाइल इंजेक्शन एचटीएमएल/सीएसएस

से मौजूदा सीएसएस को रोकें मैं एक ऐसे प्रोजेक्ट पर काम कर रहा हूं जो वेब पेजों पर जेएस + सीएसएस + एचटीएमएल इंजेक्ट करता है जिसका मेरा नियंत्रण नहीं है।स्टाइल इंजेक्शन एचटीएमएल/सीएसएस

मैं अपने इंजेक्शन कोड को स्टाइल करने वाले होस्ट पेज के बारे में चिंतित हूं - मैं चाहता हूं कि मेरा इंजेक्शन कोड केवल मेरा स्टाइल का पालन करे, न कि उनके।

फिलहाल ऐसा करने का एकमात्र तरीका मैं सोच सकता हूं कि कंटेनर <div> की कक्षा (प्री-डिफ़ाइंड, ज्ञात ब्राउज़र डिफ़ॉल्ट का उपयोग करके) के लिए हर संभावित टैग को स्पष्ट रूप से निर्दिष्ट करना और उन नियमों के लिए विरासत पर भरोसा करना शामिल है मेरे इंजेक्शन एचटीएमएल के बाकी हिस्सों में। इस सीएसएस को पृष्ठ के <head> टैग के नीचे दिखाई देने की आवश्यकता होगी।

मुझे नहीं लगता कि यह सबसे अच्छा समाधान है, हालांकि, और मैं इसे लागू करने की उम्मीद नहीं करता हूं। निश्चित रूप से बेहतर तरीके हैं।

स्रोत

2009-04-09 Tom Corelis

दूसरों को प्रभावित करने वाले पेज की है, साथ ही करने से अपने सीएसएस को रोकने के लिए बहुत अच्छा तरीके का सुझाव दिया है सुनिश्चित करें कि आपके सीएसएस को प्राथमिकता मिलती है, लेकिन आप पृष्ठ के सीएसएस से आपको सबसे ज्यादा प्रभावित करते हैं - यानी, एक भयानक, अप्रत्याशित शैली (जैसे सभी divs को गुलाबी पृष्ठभूमि बनाना) जोड़ना।

एक ही रास्ता है कि आप अपने इंजेक्शन कोड को प्रभावित करने सैंडबॉक्स के लिए क्या आप एक iframe में इंजेक्शन दिया है, हो सकता है से उनके स्टाइल को रोकने के लिए के लिए मुझे लगता है कि कर सकते हैं। अन्यथा आपको बहुत सी चीजें हैं जिन्हें आपको परिभाषित करना होगा - आपको प्रत्येक शैली को परिभाषित करना होगा (padding, border, margin, background ... सूची * "चयनकर्ता (या बेहतर पर) फिर भी, "#yourid *", इसलिए आप अपनी खुद की सामग्री को ओवरराइड करते हैं), बस इतना है कि आप अपने सीएसएस पर पूर्ण नियंत्रण की गारंटी दे सकते हैं।

संपादित करें: मुझे लगता है कि बाद के समाधान जरूरी नहीं है, भी दर्द हो आप एक आधारभूत करने के लिए सब कुछ रीसेट करने के लिए ओमनी-चयनकर्ता उपयोग कर रहे हैं होगा:

#myid * { 
    somestyle1: default; 
    somestyle2: default; 
    ... 
}

मैं someone who has written up such a solution पाया है। यदि आप पृष्ठ पर काफी नीचे स्क्रॉल करते हैं, तो आप इसे देखेंगे (SuzyUK से)। यह पूरा नहीं दिखता है, लेकिन यह सुनिश्चित करने के लिए एक अच्छी शुरुआत है।

(मुझे भी यह जानने में दिलचस्पी होगी कि इसे रोकने के लिए कोई अच्छा तरीका है या नहीं। मैंने पृष्ठ पर कोड इंजेक्ट करने से पहले Greasemonkey स्क्रिप्ट लिखी हैं, और पृष्ठ के सीएसएस को ओवरराइड करने के लिए सीएसएस लिखना पड़ा है, लेकिन उन मामलों में मुझे पता था कि मेरा लक्ष्य कौन था और सीधे पृष्ठ पर मेरी सीएसएस तैयार कर सकता था।)

स्रोत

2009-04-09 04:17:55

यहां एक और हालिया तत्व-लक्ष्यीकरण सीएसएस रीसेट है: https://github.com/premasagar/cleanslate – Griffin

आपको अपने सीएसएस चयनकर्ताओं के साथ बहुत specific होना होगा। यह मेजबान पृष्ठ के सीएसएस नियमों की तुलना में कहीं अधिक विशिष्ट है। आप अपने एचटीएमएल को रीसेट करने के लिए संशोधित एक प्रकार का वैश्विक सीएसएस रीसेट भी जोड़ना चाहते हैं। इसके द्वारा, मेरा मतलब कुछ ऐसा है जो सभी रंगों, पृष्ठभूमि, फोंट, पैडिंग इत्यादि को एक मानक पर वापस रीसेट करता है। वहां से आप अपनी खुद की शैलियों का निर्माण कर सकते हैं।

स्रोत

2009-04-09 04:12:17 nickf

+1: 0; मार्जिन: 0} – alex

सीएसएस रीसेट सीएसएस स्टाइलशीट में नहीं, ब्राउज़र में मानकीकरण के लिए है। –

हाँ, लेकिन एक सीएसएस रीसेट (मेजबान सीएसएस की तुलना में अधिक विशिष्टता के साथ) ओवरराइड पहले से निर्धारित होगा नियम (फैशनेबल गुलाबी पृष्ठभूमि को दूर करने और की तरह) – nickf

, इस तरह के

<div class="my-super-specialized-unique-wrapper"><!--contents--></div>

फिर अपने सीएसएस में

के रूप में एक विशेष रूप से वर्गीकृत <div> के साथ अपने इंजेक्शन एचटीएमएल लपेटें, .my-super-specialized-unique-wrapper साथ सभी नियमों का उपसर्ग और हर नियम पर !important का उपयोग करें। इससे क्लाइंट ब्राउज़र को किसी भी तत्व के लिए सर्वोच्च के रूप में अपने नियम का इलाज करने का निर्देश मिलेगा, चाहे उन्हें लक्षित करने वाली किसी अन्य शैलियों की परवाह किए बिना - भले ही आपके नियंत्रण के बाहर अन्य नियम अधिक विशिष्ट हों।

स्रोत

2009-04-09 04:12:37

आपके उत्तर के लिए धन्यवाद! मैं पहले से ही है, सब कुछ के लिए सुपर-विशिष्ट वर्ग के नाम का उपयोग कर रहा है, ताकि किया है और किया है। :-) मेरे पास कुछ प्रश्न हैं हालांकि: - तत्व नाम निर्दिष्ट करके सीएसएस नियम (उदा। 'Div layer table {} ', आदि) ओवरराइड करें! महत्वपूर्ण - क्या मुझे निर्दिष्ट करने की आवश्यकता है! प्रत्येक नियम के लिए महत्वपूर्ण है? –

! महत्वपूर्ण ओवरराइड * सब कुछ * अन्य, कोई फर्क नहीं पड़ता कि, कहां या कैसे निर्दिष्ट किया गया है। आपको प्रत्येक नियम पर प्रत्येक शैली के लिए इसे निर्दिष्ट करने की आवश्यकता है जहां आपको चिंता है कि शैली को आपके नियंत्रण के बाहर किसी अन्य व्यक्ति द्वारा ओवरराइड किया जा सकता है। –

बेशक, संभावित रूप से एक अतिरिक्त चिंता है यदि स्टाइलशीट जो आप नियंत्रित नहीं करते हैं, भी नियोजित करते हैं! महत्वपूर्ण। तब मेरा मानना है कि यह एक मामला है! महत्वपूर्ण घोषित किया गया है। –

इनलाइन इस तरह स्वरूपण के साथ क्यों इंजेक्शन नहीं HTML तत्वों:

<p style="color:red">This to be injected</p>

इनलाइन स्टाइल किसी अन्य नियम पर पूर्वता लेता है, और आप पहले से ही क्रम डालने के लिए मार्कअप बना रहे हैं।

अन्य समाधान अपने तत्वों पर बहुत विशिष्ट डोम आईडी के उपयोग करने के लिए किया जाएगा और फिर उन्हें अपने जोड़े गए सीएसएस पर स्टाइल

स्रोत

2009-04-09 04:14:06

यह होस्ट नहीं करेगा यदि होस्ट सीएसएस शैलियों को अन्य तरीकों से बदलता है, उदाहरण के लिए: पी {फ़ॉन्ट-वेट: बोल्ड} ... आप लाल और बोल्ड पैराग्राफ के साथ समाप्त हो जाएंगे। – nickf

सच है। मैंने माना कि वह सभी शैली विशेषताओं को रेखांकित करता है, न केवल रंग। यह सिर्फ एक उदाहरण था। –

यदि आप मोज़िला ब्राउज़र का उपयोग कर रहे हैं तो आप वास्तव में (यदि अवैध रूप से) < html> तत्व के लिए दृश्यमान DOM सामग्री जोड़ सकते हैं < शरीर> तत्व। यह किसी भी शैलियों से बच जाएगा जो शरीर से मेल खाता है और आपकी सामग्री द्वारा विरासत में मिलता है। यह संभव हो सकता है कि कुछ शैलियों HTML पर मेल खाते हैं, जो इस तकनीक को पराजित करेंगे, लेकिन मुझे यह उपयोगी लगता है।

उदाहरण के लिए। jQuery का उपयोग कर:। $ ('एचटीएमएल') संलग्न ('< div id = "mycontent"> ऐसा ऐसा </div>');

एक लोकप्रिय लाइब्रेरी का उपयोग करना अपने आप में एक चुनौती है जब आप पुस्तकालय के अपने उदाहरण के पुस्तकालय पृष्ठों अपने द्वारा संशोधित द्वारा परिभाषित का उपयोग करता है के साथ हस्तक्षेप नहीं करना चाहती है। Greasemonkey की '@require' मेरे लिए काम नहीं किया। मैं यह आवश्यक है (लेकिन संभव!), दो या तीन वैश्विक jQuery स्क्रिप्ट द्वारा आवंटित नामों में से किसी भी मौजूदा मूल्यों को बचाने के डोम में पुस्तकालय की मेरी उदाहरण डालने, रुको यह लोड करने के लिए के लिए के लिए मिला (एक टाइमर का इस्तेमाल किया था, यह कष्टप्रद है लेकिन मैं इसके चारों ओर एक रास्ता नहीं देख सका), अपने स्वयं के उपयोग के लिए अपने नामस्थान के भीतर ग्लोबल्स को दिए गए मानों को कैश करें, और सहेजे गए लोगों को पुनर्स्थापित करें।

स्रोत

2009-04-23 06:57:26

मुझे यकीन है कि यह कैसे इस के लिए ब्राउज़र समर्थन का प्रयोग किया जाना चाहिए नहीं कर रहा हूँ, लेकिन यह मुख्य कारणों में से एक का उपयोग करने के लिए है http://www.w3.org/TR/shadow-dom/

विचार आप एक वेब घटक सम्मिलित कर सकता है, वह यह है कि पूरी तरह से स्टाइल किया जा सकता है और विशिष्ट घटनाएं हैं जो केवल छाया-डीओएम को प्रभावित करती हैं (इसलिए आपका मॉड्यूल शेष पृष्ठ को प्रभावित नहीं करेगा)।

एरिक मेयेर के लिए रीसेट और नहीं खूंखार * {padding

स्रोत

2015-05-03 21:38:57 eloyesp

स्टाइल इंजेक्शन एचटीएमएल/सीएसएस

उत्तर

संबंधित मुद्दे