तत्व टैब में Chrome के devtools का उपयोग करते हुए एक तत्व का निरीक्षण करते समय, दाईं ओर 'स्टाइल्स' बार संबंधित सीएसएस गुण दिखाता है। कई बार, इनमें से कुछ प्रॉपर्टीज़ के ज़रिए मारा जाता है। इन गुणों का क्या अर्थ है?
जवाबों:
जब सीएसएस संपत्ति हिट-थ्रू के रूप में दिखाई देती है, तो इसका मतलब है कि क्रॉस-आउट स्टाइल लागू किया गया था, लेकिन फिर एक अधिक विशिष्ट चयनकर्ता, एक अधिक स्थानीय नियम, या एक ही नियम के भीतर बाद की संपत्ति द्वारा ओवरराइड किया गया।
(विशेष मामले: एक शैली भी हिट-थ्रू के रूप में दिखाई जाएगी यदि कोई शैली मिलान नियम में मौजूद है, लेकिन बाहर टिप्पणी की गई है, या यदि आपने इसे क्रोम डेवलपर टूल के भीतर अनचेक करके मैन्युअल रूप से अक्षम कर दिया है, तो इसे पार के रूप में भी दिखाया जाएगा। बाहर, लेकिन एक त्रुटि आइकन के साथ, अगर शैली में एक सिंटैक्स त्रुटि है।)
उदाहरण के लिए, यदि एक पृष्ठभूमि रंग सभी divएस पर लागू किया गया था , लेकिन एक divनिश्चित आईडी के साथ एक अलग पृष्ठभूमि का रंग लागू किया गया था , पहला रंग दिखाई देगा, लेकिन इसे पार किया जाएगा, क्योंकि दूसरे रंग ने इसे बदल दिया है (संपत्ति में) divउस आईडी के साथ सूची )।
border-colorतो बस border-colorफ़िल्टर में टाइप करें। यह उस संपत्ति वाले सभी नियमों को दिखाएगा, जिसमें संपत्ति पीले रंग में उजागर हुई है। यह सुविधा फ़ायरफ़ॉक्स में भी उपलब्ध है।
!important।
एक और बात। आप उपयोग कर रहे हैं @media प्रश्नों (जैसे @media screen (max-width:500px)) @media क्वेरी को लागू करने के लिए विशेष ध्यान देना करने के बाद आप सामान्य शैली के साथ किया जाता है। चूँकि @media क्वेरी को पार किया जाएगा (भले ही यह अधिक विशिष्ट हो) यदि css द्वारा अनुसरण किया जाता है जो समान तत्वों में हेरफेर करता है। उदाहरण:
@media (max-width:750px){
#buy-box {width: 300px;}
}
#buy-box{
width:500px;
}
** width will be 500px and 300px will be crossed out in Developer Tools. **
#buy-box{
width:500px;
}
@media (max-width:750px){
#buy-box {width: 300px;}
}
** width will be 300px and 500px will be crossed out **उपर्युक्त उत्तर के अलावा मैं हड़ताली संपत्ति के एक मामले को उजागर करना चाहता हूं जिसने वास्तव में मुझे आश्चर्यचकित किया।
यदि आप एक पृष्ठभूमि छवि को div में जोड़ रहे हैं:
<div class = "myBackground">
</div>आप छवि को div के आयामों में फिट करने के लिए स्केल करना चाहते हैं ताकि यह आपकी सामान्य श्रेणी की परिभाषा हो।
.myBackground {
height:100px;
width:100px;
background: url("/img/bck/myImage.jpg") no-repeat;
background-size: contain;
}लेकिन अगर आप ऑर्डर को इस रूप में बदलते हैं: -
.myBackground {
height:100px;
width:100px;
background-size: contain; //before the background
background: url("/img/bck/myImage.jpg") no-repeat;
}फिर क्रोम में आपको स्ट्राइक आउट के रूप में बैकग्राउंड-साइज़ दिखाई देगा। मुझे यकीन नहीं है कि यह क्यों है, लेकिन हाँ आप इसके साथ गड़बड़ नहीं करना चाहते हैं।
यदि आप स्टोक-ट्रॉट संकेत प्राप्त करने के बाद भी शैली को लागू करना चाहते हैं, तो आप "!important"शैली को लागू करने के लिए उपयोग कर सकते हैं । यह एक सही समाधान नहीं है, लेकिन समस्या का समाधान हो सकता है।
कुछ ऐसे मामले होते हैं जब आप CSS कोड को कहीं पर कॉपी और पेस्ट करते हैं और यह प्रारूप को तोड़ देता है इसलिए Chrome पीला चेतावनी दिखाता है। आपको सीएसएस कोड को फिर से सुधारने की कोशिश करनी चाहिए और यह ठीक होना चाहिए।