सीएसएस विरासत को तोड़ने के लिए कैसे?

Question

मैंने एक वेब विजेट बनाया है। कि मेरे ग्राहक ने अपनी वेबसाइटों में डाल दिया। असल में लोड पर यह webservice को कॉल करता है और क्लाइंट को विशिष्ट डेटा लोड करता है।

नतीजतन ऐसा लगता है कि:

<div class="widget"> 
    <div class="container"> 
    </div> 
</div> 

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

समस्या तब होती है जब ग्राहक अनुप्रयोग शैलियों शैली को ओवरराइट करता है जिसे मैंने रन टाइम लागू किया था।

उदाहरण के लिए यदि ग्राहक है, यह मेरी शैली अधिलेखित कर देता है:

body { 
    margin: 0 auto; 
    padding: 0; 
    width: 90%; 
    font: 70%/1.4 Verdana, Georgia, Times, "Times New Roman"; 
} 

वहाँ किसी भी तरह से विरासत को तोड़ने के लिए है? बस क्लास विजेट शैलियों के साथ जो कुछ भी div है, उसे मूल शैलियों का वारिस नहीं मिला है।

Answer 1

मुझे नहीं लगता कि आप प्रति सीएसएस विरासत तोड़ सकते हैं, लेकिन आप सीएसएस विशिष्टता के नियमों का पालन करके इसे रोकने की कोशिश कर सकते हैं।

एक अच्छा विशिष्टता लेख

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

विजेट में शैलियों के !important जोड़ने यह डिफ़ॉल्ट शैलियों की तुलना में अधिक विशिष्टता देने की कोशिश।

#myWidget{ 
    font: 100%/1 "Times New Roman", Serif !important; 
} 

संपादित

ग्राहक भी !important उपयोग कर रहा है यह समस्या पैदा कर सकता है। यदि आप उदाहरण के साथ jsFiddle.com सेट कर सकते हैं, तो हम समस्या को ढूंढने में मदद कर सकते हैं।

मुझे उम्मीद है कि इससे मदद मिलती है! के रूप में यह शैली नियमों की 'तुरुप का पत्ता' है

EDIT2

ध्यान दें, !important जोड़ने का मार्ग जा रहा एक अंतिम उपाय होना चाहिए।

Answer 2

आप शैली विरासत को तोड़ नहीं सकते हैं, लेकिन आप यह सुनिश्चित कर सकते हैं कि आपकी शैलियों या तो अधिक महत्वपूर्ण हैं या सही क्रम में लोड हो गई हैं, इसलिए आपका शीर्ष पर आता है।

!important टैग पर एक नज़र डालें।

वैकल्पिक रूप से यदि आप अपनी स्टाइलशीट लोड करते हैं तो उनके बाद आपका उदाहरण लेंगे (जब तक कि इनलाइन नहीं है)। शरीर लोड होने के बाद आप अपनी शैलियों को लोड करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं (लेकिन फिर आपको "झिलमिलाहट" प्रभाव मिलेगा)।

Answer 3

आप तत्वों को पैरेंट शैलियों का वारिस नहीं करने के लिए मजबूर नहीं कर सकते हैं।

हालांकि आप सभी संभावित शैलियों को ओवरराइड कर सकते हैं जिन्हें आप बदलना नहीं चाहते हैं। यदि आपकी सीएसएस विशिष्टता ग्राहकों की विशिष्टता से अधिक है तो आपकी शैलियों को पृष्ठ पर हावी/व्यक्त किया जाएगा।

देखें: अपने उदाहरण प्रति

CSS Specificity via css-tricks.com

का उपयोग कर नीचे कोड body घोषणा की तुलना में अधिक विशिष्ट हो सकता है और इस प्रकार ओवरराइड होगा:

.widget .container { 
    font-family: Arial; 
} 

Answer 4

तुम भी inline styling की कोशिश कर सकते। इनलाइन स्टाइल की सर्वोच्च प्राथमिकता है। यह क्लाइंट ओवरराइड आयातित स्टाइलशीट का उपयोग करने पर काम करेगा।

अन्य लोगों की तरह उल्लेख किया गया है, दूसरा विकल्प !important है।

आप http://www.w3.org/TR/CSS2/cascade.html पर प्रासंगिक चश्मे भी पढ़ सकते हैं जहां वे वर्णन करते हैं कि वे कैसा महसूस करते हैं। यदि ऊपर उल्लिखित चाल काम नहीं करती हैं, तो शायद चश्मे आपको एक सुराग देंगे या आप निश्चित रूप से जान लेंगे कि यह संभव नहीं है।

Answer 5

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

एक कम दखल दृष्टिकोण एक आईडी के साथ अपने विजेट परिसीमित करने के लिए है, और अपने स्टाइलशीट में, इस तरह के रूप में "सार्वभौमिक" चयनकर्ता का उपयोग करके सबसे महत्वपूर्ण शैली घोषणाओं में से कुछ, पुनर्स्थापित करने के लिए:

#myWidget *{ 
    margin: 0; 
    padding: 0; 
    background: none; 
    border: none; 
} 

उदाहरण के लिए

। फिर, विशेष रूप से अपने ओवरराइड को परिभाषित करें।