सीएसएस सैंडबॉक्स कैसे करें/वर्तमान पृष्ठ में एक संपूर्ण डीआईवी क्षेत्र रीसेट करें?

हम एक बुकमार्कलेट विकसित कर रहे हैं, और जब बुकमार्कलेट विभिन्न वेबसाइटों पर लोड होता है, उदाहरण के लिए: cnn.com, bbc.co.uk, yahoo.com यह विभिन्न शैलियों में प्रदर्शित होता है और हमारे पास इन शैलियों को रीसेट करने के लिए संघर्ष है।सीएसएस सैंडबॉक्स कैसे करें/वर्तमान पृष्ठ में एक संपूर्ण डीआईवी क्षेत्र रीसेट करें?

बुकमार्कलेट सामग्री वर्तमान पृष्ठ डीओएम में है और आईफ्रेम में नहीं है (क्योंकि हमें कुकीज़ और डीओएम तक पहुंच की आवश्यकता है)।

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

क्या कोई तरीका है कि हम वर्तमान पृष्ठ में इस डीवी क्षेत्र को पूरी तरह से अलग करने के लिए पूरी तरह से अलग कर सकते हैं?

स्रोत

2012-07-23 Pentium10

क्यों इसे एक अद्वितीय आईडी न दें और इसे अपनी पसंद के अनुसार डिजाइन करें? – Tomer

हमने ऐसा करने की कोशिश की, लेकिन समस्या यह है कि हमें प्रत्येक सीएसएस संपत्ति मूल्यों को परिभाषित करने की आवश्यकता है। और मुझे लगता है कि अतिसंवेदनशील है। – Pentium10

आपके पास वास्तव में कोई विकल्प नहीं है, यदि आप मौजूदा div में मौजूदा div में अपने div को मौजूदा स्टाइल शीट के साथ एम्बेड करते हैं, तो उन स्टाइल को ओवरराइड करने का कोई तरीका नहीं है बल्कि स्वयं लिखना है। – Tomer

हम एक चरम सीएसएस रीसेट स्टाइलशीट का उपयोग कर https://github.com/premasagar/cleanslate

CleanSlate है अंत। इसका उपयोग एचटीएमएल तत्व और उसके सभी बच्चों की स्टाइल को रीसेट करने के लिए किया जाता है, जो डिफ़ॉल्ट सीएसएस मानों पर वापस आ जाता है। यह विशेष रूप से महत्वपूर्ण नियमों से बना है, जो अन्य सभी प्रकार के नियमों को ओवरराइड करते हैं।

स्रोत

2013-02-10 21:27:43 Pentium10

... और आप का उपयोग करते हैं! उनको ओवरराइड करने के लिए महत्वपूर्ण है, ऐसा लगता है। – cHao

का उपयोग करना! महत्वपूर्ण कभी भी एक अच्छा विचार नहीं है! – redaxmedia

ठीक है, आप या तो अद्वितीय आईडी का उपयोग कर सकते हैं और जोड़ सकते हैं! बाद में प्रत्येक संपत्ति के लिए महत्वपूर्ण - डीओएम में जेनरेट किए गए तत्व को रीसेट करने के लिए - या आप "HTML5" में नए स्कोप्ड विशेषता का उपयोग कर सकते हैं।

लेकिन इसके परिणामस्वरूप उस तत्व या माता-पिता पर सभी स्पष्ट "उत्तराधिकारी" मूल्यवान शैलियों के साथ समस्या हो सकती है। उदाहरण के लिए, सापेक्ष फ़ॉन्ट आकार के परिणामस्वरूप भी समस्याएं आती हैं।

इसलिए शैली अनुभाग पर प्रयोगात्मक स्कॉप्ड विशेषता है, लेकिन पिछली बार मैंने कोशिश की कि क्रोम/क्रोमियम ने इसका समर्थन किया है, फ़ायरफ़ॉक्स ने हाल ही में इसके लिए भी समर्थन दिया होगा - क्योंकि मेलिंग सूची पर एक बड़ी चर्चा हुई थी।

http://updates.html5rocks.com/2012/03/A-New-Experimental-Feature-style-scoped

संपादित करें:

एक अन्य समाधान है कि डिफ़ॉल्ट रूप से डोम में नहीं है एक कस्टम तत्व का उपयोग हो सकता है। document.createElement ("thisisfrommyapp") की तरह कुछ; आप उन्हें अन्य तत्वों की तरह स्टाइल कर सकते हैं, लेकिन उन्हें प्रदर्शन लागू करना होगा: ब्लॉक या जो भी व्यवहार उनके लिए चाहते हैं।

इसके अलावा, आईई उनका उपयोग करने की अनुमति देता है, लेकिन आपको वास्तव में उन्हें पहले ट्रिडेंट्स पार्सर में डालने की आवश्यकता है। यदि आप उन्हें HTML में उपयोग करना चाहते हैं, तो आपको DOM को पार्स करने से पहले createElement() करना होगा (इसलिए यह आपके दस्तावेज़ के शीर्ष के अंदर सबसे अधिक संभावना है)।

<html> 
<head><script>document.createElement('customelement');</script></head> 
<body><customelement>is stylable in IE8, too</customelement></body> 
</html>

आप केवल, ट्राइडेंट के लिए createElement सामान करने के लिए क्योंकि अन्यथा आप उनके प्रदर्शन की वजह से अजीब पार्स व्यवहार में परिणाम होगा है: इनलाइन-ब्लॉक डिफॉल्ट की मॉडल :)

आप पर एक्सएचटीएमएल उपयोग कर रहे हैं जो भी बेवकूफ कारणों के लिए वेबसाइट (एचटीएमएल पर एक्सएचटीएमएल का उपयोग करने के लिए कोई वैध कारण नहीं है, किसी भी तरह से एक्सएमएल टैग को अलग करने वाले पार्सर्स के कारण), आपको इसके लिए कस्टम नेमस्पेस का उपयोग करना चाहिए।

~ चीयर्स

स्रोत

2012-07-23 09:29:31

प्रायोगिक दायरा विशेषता वास्तव में काम कर सकती है, लेकिन यह एक भविष्य की इच्छा है। शायद सभी प्रमुख ब्राउज़र अगले 10 वर्षों में अपनाए जाएंगे। – Pentium10

संपादित, कस्टम तत्व टैग के साथ एक नया विचार है :) –

मैंने लिंक किए गए आलेख को पढ़ा है, लेकिन फिर भी सबसे बड़ी समस्या INPUT टैग है। आप उन्हें कैसे बदल देंगे? – Pentium10

कैसे कुछ अस्पष्ट तत्व यह है कि अपने पृष्ठों पर होने की संभावना नहीं है के साथ अपने div बदलने का प्रयास करने के बारे में।

उदाहरण के लिए। b या em या i या शायद नए HTML5 तत्वों में से एक यदि आप ब्राउज़र समर्थन के बारे में चिंतित नहीं हैं।

और उन्हें display: block पर div जैसे कार्य करने के लिए स्टाइल करना जो एक ब्लॉक तत्व है।

आपका परिणामी HTML मान्य या सुंदर नहीं होगा, लेकिन यह एक बुकमार्क है, तो हाँ।

उस से कम, वास्तव में एक अच्छा रीसेट है जो आपको चाहिए।

या आपको बस अपने स्टाइल में थोड़े अंतर के साथ रहना होगा।

स्रोत

2012-07-23 09:37:44

यह genial है लेकिन INPUT और अन्य सामान को प्रतिस्थापित नहीं किया जा सकता है। – Pentium10

यहां मेरे उत्तर का एक और उन्नत संस्करण देखें: http://stackoverflow.com/questions/3019277/how-can-i-reset-styles-for-a-given-html-element –

इसके अलावा, लोग बस ' * {फ़ॉन्ट-परिवार: 'कॉमिक सैन्स एमएस'! महत्वपूर्ण;} 'इसलिए अस्पष्ट तत्वों का उपयोग करने से यहां भी मदद नहीं मिलेगी। – m90

एक कंटेनर को सैंडबॉक्स में इस 2 चरणों का पालन करें।

<div class="namespace-box"> 
    <h1 class="namespace-title">Title</h1> 
    <p class="namespace-text">Text</p> 
</div>

अनसेट कंटेनर की नाम स्थान के सभी गुण, all: unset; सिर्फ एक प्लेसहोल्डर है:

 
[class*="namespace-"], 
[class*="namespace-"]:after, 
[class*="namespace-"]:before, 
[class*="namespace-"]:hover:after, 
[class*="namespace-"]:hover:before { 
    all: unset; 
    // properties to be unset 
}

एक ग्रंट या Gulp कार्य का प्रयोग करें आपके मूल सीएसएस में विशेषता चयनकर्ता। यह झरना बढ़ जाती है और सेट किए बिना हैक द्वारा ओवरराइड होने से बचाता है:

 
[class*="namespace-"].namespace-box, 
[class*="namespace-"].namespace-title, 
[class*="namespace-"].namespace-text { 
    // original properties 
}

आप postcss-increase-specificity कार्य के साथ विनिर्देश स्वचालित कर सकते हैं।

अपने बुलेटप्रूफ कंटेनर का आनंद लें।

स्रोत

2016-02-03 09:54:41 redaxmedia

सीएसएस सैंडबॉक्स कैसे करें/वर्तमान पृष्ठ में एक संपूर्ण डीआईवी क्षेत्र रीसेट करें?

उत्तर

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