जब क्रोम के इंस्पेक्टर के सीएसएस नियम को धूसर कर दिया जाता है, तो इसका क्या मतलब है?

Question

मैं h2Google Chrome के तत्व निरीक्षक और कुछ CSS नियमों का उपयोग करते हुए वेब पेज पर एक तत्व का निरीक्षण कर रहा हूं - जो लागू होते दिखाई देते हैं - धूसर हो जाते हैं। ऐसा लगता है कि एक स्ट्राइक-थ्रू इंगित करता है कि एक नियम ओवरराइड किया गया था, लेकिन जब एक शैली को धूसर हो जाता है तो इसका क्या मतलब है?

Answer 1

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

ग्रेयड / डिमेड आउट टेक्स्ट, या तो मतलब कर सकते हैं

1. यह एक डिफ़ॉल्ट नियम / संपत्ति है जो ब्राउज़र लागू होता है, जिसमें डिफ़ॉल्ट रूप से शॉर्ट-हैंड गुण शामिल होते हैं।
2. इसमें वंशानुक्रम शामिल है जो थोड़ा अधिक जटिल है।

विरासत

नोट: क्रोम देव टूल्स "स्टाइल" पैनल एक नियम सेट प्रदर्शित करेगा, क्योंकि सेट से एक या अधिक नियम वर्तमान में चयनित डोम नोड पर लागू किए जा रहे हैं। मुझे लगता है, पूर्णता के लिए, देव उपकरण उस सेट से सभी नियमों को दिखाते हैं, चाहे वे लागू हों या नहीं।

उस स्थिति में जहां वंशानुक्रम के कारण वर्तमान चयनित तत्व पर एक नियम लागू किया जाता है (अर्थात पूर्वज के लिए नियम लागू किया गया था, और चयनित तत्व इसे विरासत में मिला है), क्रोम फिर से पूरे नियम को प्रदर्शित करेगा।

वर्तमान में चयनित तत्व पर लागू होने वाले नियम सामान्य पाठ में दिखाई देते हैं।

यदि कोई नियम उस सेट में मौजूद है, लेकिन लागू नहीं किया गया है क्योंकि यह एक गैर-अंतर्निहित संपत्ति (जैसे पृष्ठभूमि रंग) है, तो यह ग्रे / मंद पाठ के रूप में दिखाई देगा।

यहाँ एक लेख है जो एक अच्छी व्याख्या देता है - (नोट: संबंधित आइटम लेख के निचले भाग पर है - आंकड़ा 21 - दुर्भाग्य से संबंधित अनुभाग में शीर्षक नहीं है) - http://commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033

लेख का अंश

यह [विरासत परिदृश्य] कभी-कभार थोड़ा भ्रम पैदा कर सकता है, क्योंकि डिफ़ॉल्ट रूप से शॉर्ट-हैंड प्रॉपर्टीज; आंकड़ा 21 गैर-विरासत वाले गुणों के साथ फ़ॉन्ट संपत्ति के डिफ़ॉल्ट शॉर्ट-हैंड गुणों को दिखाता है। बस उस संदर्भ से अवगत रहें जो आप तत्वों की जांच करते समय देख रहे हैं।

Comments

बयान "नियम जो विरासत में मिले हैं, लेकिन लागू नहीं हैं , वे ग्रे / मंद पाठ के रूप में दिखाई देंगे" असत्य है। यदि लागू नहीं किया जाता है, तो उनके पास एक स्ट्राइकथ्रू होगा। मैंने स्क्रीनशॉट और लाइव उदाहरण के साथ अपना उत्तर अपडेट किया है।

— रोब सोबर्स

यह सही जवाब है!!! प्रमुख वाक्य है ... "यदि कोई नियम उस सेट में मौजूद है, लेकिन लागू नहीं किया गया है क्योंकि यह एक गैर-अंतर्निहित संपत्ति (जैसे पृष्ठभूमि रंग) है, तो यह ग्रे / मंद पाठ के रूप में दिखाई देगा।"

— निको बेलिक

यह निश्चित रूप से सही उत्तर है। यदि एक ग्रे आउट प्रॉपर्टी एक सेक्शन के भीतर दिखाई देती है जो कहती है कि "[चयनकर्ता] से विरासत में मिला है", तो यह एक गैर-अंतर्निहित संपत्ति है जो वर्तमान तत्व पर लागू नहीं होती है। किसी भी पार की गई संपत्ति को अधिक विशिष्ट शैली द्वारा ओवरराइड किया गया है।

— केवल

यदि नियम गैर-अंतर्निहित होने पर प्राप्त होते हैं, तो मेरे div तत्व ने 'चौड़ाई' नियम क्यों निकाला है? चौड़ाई सहज नहीं है? मैं इसे गंभीरता से पूछ रहा हूं, वैसे।

— मोसफेटेचर

... इसलिए यदि आप क्रोम नियमों को देखते हुए क्रोम ग्रेइंग करते हैं जो बहुत अधिक लागू होते हैं - जहाँ आप उन्हें अनचेक कर सकते हैं (या उनके मान बदल सकते हैं) और पेज पर संबंधित परिवर्तन देख सकते हैं - यह हो सकता है कि नियम तत्व को प्रभावित करता हो लेकिन उस तत्व पर विशेष रूप से लागू नहीं किया जाता है, लेकिन माता-पिता के लिए।

— बेन व्हीलर

Answer 2

इसका मतलब है कि नियम विरासत में मिला है, लेकिन चयनित तत्व पर लागू नहीं है:

http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style

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

लाइव उदाहरण: पाठ वाले तत्व का निरीक्षण करें "हैलो, दुनिया!"

div { 
  margin: 0;
}

div#foo { 
  margin-top: 10px; 
}

<div id="foo">Hello, world!</div>

Comments

@ रब सटीक होने के लिए, जब किसी शैली को बाहर निकाल दिया जाता है, तो इसका मतलब है कि यह किसी अन्य शामिल तत्व से विरासत में मिला है, लेकिन चयनित तत्व पर लागू नहीं है । प्रलेखन से: "फलक में केवल उन नियमों के गुण होते हैं जो सीधे चयनित तत्व पर लागू होते हैं। विरासत में मिली संपत्तियों को प्रदर्शित करने के लिए, विरासत में मिला चेकबॉक्स सक्षम करें। इस तरह के गुणों को मंद फ़ॉन्ट में प्रदर्शित किया जाएगा।"

— drkvogel

@RobSobers दुर्भाग्य से, मुझे नहीं लगता कि आपका उदाहरण वंशानुक्रम प्रदर्शित करता है। पूर्वज माता-पिता कहां से तलाक प्राप्त कर रहे हैं? यदि आप क्रोम में स्टाइल्स फलक में नीचे स्क्रॉल करते हैं, तो आपको "इनहेरिटेड फ्रॉम ..." शीर्षक वाले सेक्शन दिखाई देंगे? क्या आप इसे एक उदाहरण में शामिल कर सकते हैं?

— निको बेलिक

मुझे समझ में नहीं आता कि यह उत्तर क्यों है। सबसे अच्छा जवाब और बी के रूप में चिह्नित। इतने अपवित्र हैं। यह स्पष्ट रूप से गलत है। मार्जिन अंतर्निहित गुण नहीं हैं ( stackoverflow.com/a/5612360/24267 ) माइकल कोलमैन का उत्तर सही है। ओह, आप का मतलब पूर्वज तत्व से विरासत में नहीं मिला है, आपका मतलब है ... मुझे यकीन नहीं है कि आप वास्तव में क्या मतलब है। किसी भी दर पर, यह जवाब क्रोम 46 के साथ 2015 में सही नहीं है।

— mhenry1384

स्पष्ट रूप से वोट तीर के साथ कुछ एमएस पेंट जादू के लिए हैं, और यह बुलबुला छाया प्रभाव है। गलत माना गया।

— डेविड

@ mhenry1384 "a" आसानी से समझा जा सकता है: क्योंकि यह प्रश्न पूछने वाले व्यक्ति द्वारा लिखा गया है।

— एंड्रयू ग्रिम

Answer 3

माइकल कोलमैन का सही जवाब है। मैं बस इसके साथ जाने के लिए एक साधारण छवि जोड़ना चाहता हूं। वह जो लिंक शामिल करता है, उसका यह सरल उदाहरण है: http://commandlinefanatic.com/art033ex4.html

HTML / DOM ऐसा दिखता है ...

Chrome में शैलियाँ फलक ऐसा दिखता है जब आप p तत्व का चयन करते हैं ...

जैसा कि आप देख सकते हैं, पी तत्व अपने पूर्वजों (divs) से विरासत में मिला है। तो शैली को background-color: blueधूसर क्यों किया जाता है? क्योंकि यह एक नियम-सेट का हिस्सा है जिसमें कम से कम एक शैली है जो अंतर्निहित है। वह सहज शैली हैtext-indent: 1em

background-color:bluetext-indent: 1emअंतर्निहित नहीं है, लेकिन यह नियम-सेट का हिस्सा है जिसमें शामिल है जो कि अप्राप्य है और नियम-सेट प्रदर्शित करते समय क्रोम के डेवलपर्स पूर्ण होना चाहते थे। हालांकि, नियम-सेट में शैलियों के बीच अंतर करने के लिए जो शैलियों से अंतर्निहित हैं जो शैली नहीं हैं, जो शैली अमानवीय नहीं हैं, उन्हें धूसर कर दिया जाता है।

Comments

यह सबसे अच्छा जवाब है, क्योंकि यह एक सरल डेमो देता है। उस URL को एक नए टैब में खोलें और विभिन्न divs का चयन करने के लिए Chrome डेवलपर टूल का उपयोग करें और p। आप देखेंगे कि background-colorइसके लिए ग्रे नहीं किया गया है div#two। लेकिन के background-colorलिए div#threeऔर बाहर धूसर है p।

— बुद्धिशीलता

महान विवरण

— डिर्क बोअर

Answer 4

यह तब भी होता है जब आप निरीक्षक के माध्यम से एक शैली जोड़ते हैं, लेकिन वह नई शैली उस तत्व पर लागू नहीं होती है जिसे आपने चुना है। आमतौर पर दिखाई गई शैलियाँ केवल चयनित तत्व के लिए ही होती हैं, इसलिए ग्रे इंगित करता है कि आपके द्वारा जोड़ी गई शैली उस तत्व का चयन नहीं करती है, जिसका डोम नेवीगेटर में फोकस है।

Comments

यह मेरा मुद्दा था। धन्यवाद!

— चक ले बट

Answer 5

इसका मतलब है कि नियम को उच्च प्राथमिकता वाले दूसरे नियम से बदल दिया गया है। उदाहरण के लिए स्टाइलशीट के साथ:

h2 {
  color: red;
}
h2 {
  color: blue;
}

निरीक्षक नियम को color:red;धूसर और color:blue;सामान्य रूप से दिखाएगा ।

जानने के लिए सीएसएस इनहेरिटेंस पर पढ़ें कि कौन से नियम विरासत में मिले / उच्च प्राथमिकता वाले हैं।

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

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

Comments

मैंने अभी इसका परीक्षण किया है और मुझे लगता है कि यह गलत है। उस मामले में जहां एक नियम ओवरराइड किया जाता है, वहां एक स्ट्राइक-थ्रू (जैसा कि मेरा प्रश्न इंगित करता है) होगा। देखें: yfrog.com/f/j3fooep

— Rob

@ रोब: चूंकि मिक्सअप शुरू नहीं हुआ था। मैंने इसे चलाया, और अपने उत्तर को अपने साथ संपादित किया परीक्षित उत्तर के किया ।

— tococ

मुझे पूरी तरह से यकीन नहीं है कि यह सही है; फीके नियम वे हैं जिन्हें मैंने अपनी स्वयं की स्टाइल शीट (जैसे font-size: 20px;) में सेट किया है

— रॉब सोबर्स

Answer 6

वेबपैक का उपयोग करते समय, स्रोत कोड में परिवर्तित किए गए किसी भी सीएसएस नियम या संपत्ति को पृष्ठ के पुनर्निर्माण के बाद लोड होने पर धूसर कर दिया जाता है। यह वास्तव में कष्टप्रद है और मुझे हर बार पृष्ठ को फिर से लोड करने के लिए मजबूर किया गया।

Answer 7

क्रोम डेवलपर का नया संस्करण दिखाता है कि यह कहाँ से विरासत में मिला है।

Answer 8

मैं लंबे समय से इस सवाल का जवाब दे रहा हूं क्योंकि पहले से ही कई सही जवाब हैं क्योंकि मुझे सीएसएस कोड के एक अलग मामले का सामना करना पड़ा है और चोम देवतुल्स में बाहर निकलना मुश्किल है: प्रश्न में ब्लॉक में U + 200B शून्य WIDTH अंतरिक्ष वर्ण शामिल थे । एक बार जब मैंने उन्हें ढूंढ लिया और उन्हें हटा दिया, तो मैं फिर से Chrome DevTools में ब्लॉक को संपादित कर सकता था। संभवत: यह अन्य गैर-अस्की पात्रों के साथ भी हो सकता है, मैंने यह पता लगाने की कोशिश नहीं की है।