सीएसएस की सुविधाओं का रेफ़रंस

सीएसएस देखने और उसमें बदलाव करने से जुड़ी Chrome DevTools की सुविधाओं के बारे में इस पूरी जानकारी वाले रेफ़रंस में, नए वर्कफ़्लो खोजें.

बुनियादी बातें जानने के लिए, सीएसएस देखना और बदलना लेख पढ़ें.

कोई एलिमेंट चुनें

DevTools के एलिमेंट पैनल की मदद से, एक बार में एक एलिमेंट की सीएसएस देखी या बदली जा सकती है.

स्क्रीनशॉट में, DOM ट्री में नीले रंग से हाइलाइट किया गया h1 एलिमेंट, चुना गया एलिमेंट है. दाईं ओर, स्टाइल टैब में एलिमेंट की स्टाइल दिखती हैं. बाईं ओर, एलिमेंट को व्यूपोर्ट में हाइलाइट किया गया है. ऐसा सिर्फ़ इसलिए किया गया है, क्योंकि माउस को डीओएम ट्री में उसके ऊपर घुमाया जा रहा है.

ट्यूटोरियल के लिए, किसी एलिमेंट की सीएसएस देखना लेख पढ़ें.

किसी एलिमेंट को चुनने के कई तरीके हैं:

• अपने व्यूपोर्ट में, एलिमेंट पर राइट क्लिक करें और जांच करें को चुनें.
• DevTools में, कोई एलिमेंट चुनें पर क्लिक करें या Command+Shift+C (Mac) या Control+Shift+C (Windows, Linux) दबाएं. इसके बाद, व्यूपोर्ट में मौजूद एलिमेंट पर क्लिक करें.
• DevTools में, डीओएम ट्री में मौजूद एलिमेंट पर क्लिक करें.
• DevTools में, कंसोल में document.querySelector('p') जैसी कोई क्वेरी चलाएं. इसके बाद, नतीजे पर राइट क्लिक करें और एलिमेंट पैनल में दिखाएं को चुनें.

सीएसएस देखना

सीएसएस नियम देखने और सीएसएस से जुड़ी समस्याओं का पता लगाने के लिए, एलिमेंट > स्टाइल और कंप्यूट किए गए टैब का इस्तेमाल करें.

लिंक की मदद से नेविगेट करना

स्टाइल टैब में, अलग-अलग जगहों पर मौजूद लिंक दिखते हैं. इनमें ये शामिल हैं:

• सीएसएस नियमों के बगल में, स्टाइल शीट और सीएसएस सोर्स पर जाएं. इस तरह के लिंक, सोर्स पैनल खोलते हैं. अगर स्टाइल शीट को छोटा किया गया है, तो छोटी की गई फ़ाइल को पढ़ने लायक बनाएं लेख पढ़ें.
• इनहेरिट किया गया ... सेक्शन में, पैरंट एलिमेंट पर जाएं.
• var() में, कस्टम प्रॉपर्टी के एलान के लिए कॉल.
• animation शॉर्टहैंड प्रॉपर्टी में, @keyframes पर.
• दस्तावेज़ के टूलटिप में मौजूद ज़्यादा जानें लिंक.
• और ज़्यादा.

यहां उनमें से कुछ को हाइलाइट किया गया है:

लिंक की स्टाइल अलग-अलग हो सकती है. अगर आपको नहीं पता कि कोई चीज़ लिंक है या नहीं, तो यह पता करने के लिए उस पर क्लिक करें.

सीएसएस दस्तावेज़, खास जानकारी, और कस्टम प्रॉपर्टी वैल्यू के साथ टूलटिप देखना

एलिमेंट > स्टाइल में, किसी खास एलिमेंट पर कर्सर घुमाने पर, काम की जानकारी वाले टूलटिप दिखते हैं.

सीएसएस दस्तावेज़ देखना

सीएसएस के बारे में कम शब्दों में जानकारी देने वाला टूलटिप देखने के लिए, स्टाइल टैब में प्रॉपर्टी के नाम पर कर्सर घुमाएं.

इस प्रॉपर्टी पर MDN CSS रेफ़रंस पर जाने के लिए, ज़्यादा जानें पर क्लिक करें.

टूलटिप बंद करने के लिए, न दिखाएं को चुनें.

इन्हें फिर से चालू करने के लिए, सेटिंग > प्राथमिकताएं > एलिमेंट > सीएसएस दस्तावेज़ टूलटिप दिखाएं पर जाएं.

सिलेक्टर की खास जानकारी देखना

किसी सिलेक्टर पर कर्सर घुमाकर, उसके खास वेट के साथ टूलटिप देखें.

कस्टम प्रॉपर्टी की वैल्यू देखना

टूलटिप में उसकी वैल्यू देखने के लिए, --custom-property पर कर्सर घुमाएं.

अमान्य, बदली गई, बंद, और अन्य सीएसएस देखना

स्टाइल टैब, सीएसएस से जुड़ी कई तरह की समस्याओं का पता लगाता है और उन्हें अलग-अलग तरीकों से हाइलाइट करता है.

स्टाइल टैब में सीएसएस को समझना लेख पढ़ें.

सिर्फ़ उस सीएसएस को देखें जो किसी एलिमेंट पर लागू की गई है

स्टाइल टैब में, आपको किसी एलिमेंट पर लागू होने वाले सभी नियम दिखते हैं. इनमें, बदले गए एलिमेंट भी शामिल हैं. अगर आपको ओवरराइड किए गए एलिमेंट में बदलाव नहीं करना है, तो सिर्फ़ उस सीएसएस को देखने के लिए कंप्यूट की गई टैब का इस्तेमाल करें जो किसी एलिमेंट पर लागू की जा रही है.

1. कोई एलिमेंट चुनें.
2. एलिमेंट पैनल में, कंप्यूट किए गए टैब पर जाएं.

सभी प्रॉपर्टी देखने के लिए, सभी दिखाएं चेकबॉक्स को चुनें.

'आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किए गए फ़ील्ड' टैब में CSS को समझना लेख पढ़ें.

सीएसएस प्रॉपर्टी को वर्णमाला के क्रम में देखना

कंप्यूट किया गया टैब का इस्तेमाल करें. सिर्फ़ उस सीएसएस को देखें जो किसी एलिमेंट पर लागू है देखें.

इनहेरिट की गई सीएसएस प्रॉपर्टी देखना

कंप्यूट किया गया टैब में, सभी दिखाएं चेकबॉक्स को चुनें. सिर्फ़ उस सीएसएस को देखें जो किसी एलिमेंट पर लागू की गई है देखें.

इसके अलावा, स्टाइल टैब को स्क्रोल करके, Inherited from <element_name> नाम वाले सेक्शन ढूंढें.

सीएसएस के at-rules देखना

At-rules, सीएसएस स्टेटमेंट होते हैं. इनकी मदद से, सीएसएस के काम करने के तरीके को कंट्रोल किया जा सकता है. एलिमेंट > स्टाइल में, खास सेक्शन में ये at-rules दिखते हैं:

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

@property at-rules देखना

@property सीएसएस at-rule की मदद से, सीएसएस कस्टम प्रॉपर्टी को साफ़ तौर पर तय किया जा सकता है. साथ ही, किसी भी JavaScript को चलाए बिना उन्हें स्टाइल शीट में रजिस्टर किया जा सकता है.

स्टाइल टैब में, ऐसी प्रॉपर्टी के नाम पर कर्सर घुमाएं. इससे, प्रॉपर्टी की वैल्यू, डिस्क्रिप्टर, और स्टाइल टैब के सबसे नीचे मौजूद, छोटा किया जा सकने वाले @property सेक्शन में, उसके रजिस्ट्रेशन का लिंक वाला टूलटिप दिखेगा.

@property नियम में बदलाव करने के लिए, उसके नाम या वैल्यू पर दो बार क्लिक करें.

@supports at-rules देखना

स्टाइल टैब में, @supports सीएसएस at-rules दिखते हैं. हालांकि, ऐसा तब ही होता है, जब वे किसी एलिमेंट पर लागू हों. उदाहरण के लिए, इस एलिमेंट की जांच करें:

अगर आपके ब्राउज़र में lab() फ़ंक्शन काम करता है, तो एलिमेंट हरा दिखता है. अगर नहीं, तो यह बैंगनी दिखता है.

@scope at-rules देखना

स्टाइल टैब में, सीएसएस @scope at-rules दिखते हैं. हालांकि, ऐसा तब ही होता है, जब वे किसी एलिमेंट पर लागू हों.

नए @scope at-rules, सीएसएस कैस्केडिंग और इनहेरिटेंस लेवल 6 स्पेसिफ़िकेशन का हिस्सा हैं. इन नियमों की मदद से, सीएसएस स्टाइल का दायरा तय किया जा सकता है. दूसरे शब्दों में, खास एलिमेंट पर स्टाइल साफ़ तौर पर लागू की जा सकती हैं.

@scope नियम की झलक यहां देखें:

1. झलक में कार्ड पर मौजूद टेक्स्ट की जांच करें.
2. स्टाइल टैब में, @scope नियम ढूंढें.

इस उदाहरण में, @scope नियम, card क्लास वाले एलिमेंट के अंदर मौजूद सभी <p> एलिमेंट के लिए, ग्लोबल सीएसएस background-color एलिमेंट को बदल देता है.

@scope नियम में बदलाव करने के लिए, उस पर दो बार क्लिक करें.

@font-palette-values at-rules देखना

@font-palette-values सीएसएस at-rule की मदद से, font-palette प्रॉपर्टी की डिफ़ॉल्ट वैल्यू को पसंद के मुताबिक बनाया जा सकता है. एलिमेंट > स्टाइल, इस at-rule को खास सेक्शन में दिखाता है.

अगली झलक में @font-palette-values सेक्शन देखें:

1. झलक में, टेक्स्ट की दूसरी लाइन की जांच करें.
2. स्टाइल में, @font-palette-values सेक्शन ढूंढें.

इस उदाहरण में, --New फ़ॉन्ट पैलेट की वैल्यू, रंगीन फ़ॉन्ट की डिफ़ॉल्ट वैल्यू को बदल देती हैं.

अपनी कस्टम वैल्यू में बदलाव करने के लिए, उन पर दो बार क्लिक करें.

@position-try at-rules देखना

position-try-options प्रॉपर्टी के साथ @position-try सीएसएस नियम का इस्तेमाल करके, एलिमेंट के लिए वैकल्पिक ऐंकर पोज़िशन तय की जा सकती हैं. ज़्यादा जानने के लिए, CSS ऐंकर पोज़िशनिंग एपीआई का परिचय देखें.

एलिमेंट > स्टाइल, इन चीज़ों को हल और लिंक करता है:

• position-try-options प्रॉपर्टी की वैल्यू को खास @position-try --name सेक्शन में ले जाएं.
• position-anchor प्रॉपर्टी की वैल्यू और popovertarget एट्रिब्यूट वाले एलिमेंट के लिए anchor() आर्ग्युमेंट.

अगले झलक में, position-try-options वैल्यू और @position-try सेक्शन की जांच करें:

1. झलक में, सबमेन्यू खोलें. इसके लिए, आपका खाता पर क्लिक करें. इसके बाद, स्टोरफ़्रंट पर क्लिक करें.
2. झलक में id="submenu" का इस्तेमाल करके, एलिमेंट की जांच करें.
3. स्टाइल में, position-try-options प्रॉपर्टी ढूंढें और उसकी --bottom वैल्यू पर क्लिक करें. स्टाइल टैब, आपको उससे जुड़े @position-try सेक्शन पर ले जाता है.
4. position-anchor वैल्यू लिंक या एक जैसे anchor() आर्ग्युमेंट पर क्लिक करें. एलिमेंट पैनल, उससे जुड़े popovertarget एट्रिब्यूट वाले एलिमेंट को चुनता है. साथ ही, स्टाइल टैब, एलिमेंट की सीएसएस दिखाता है.

वैल्यू में बदलाव करने के लिए, उन पर दो बार क्लिक करें.

किसी एलिमेंट का बॉक्स मॉडल देखना

किसी एलिमेंट का बॉक्स मॉडल देखने के लिए, स्टाइल टैब पर जाएं और ऐक्शन बार में साइडबार दिखाएं बटन पर क्लिक करें.

किसी वैल्यू को बदलने के लिए, उस पर दो बार क्लिक करें.

किसी एलिमेंट की सीएसएस खोजना और फ़िल्टर करना

किसी खास सीएसएस प्रॉपर्टी या वैल्यू को खोजने के लिए, स्टाइल और कंप्यूट की गई टैब पर मौजूद फ़िल्टर बॉक्स का इस्तेमाल करें.

कंप्यूट की गई टैब में, इनहेरिट की गई प्रॉपर्टी भी खोजने के लिए, सभी दिखाएं चेकबॉक्स को चुनें.

कंप्यूट की गई टैब पर जाने के लिए, ग्रुप करें को चुनकर, फ़िल्टर की गई प्रॉपर्टी को छोटा किया जा सकने वाली कैटगरी में ग्रुप करें.

फ़ोकस किए गए पेज को एम्युलेट करना

अगर फ़ोकस को पेज से DevTools पर स्विच किया जाता है, तो फ़ोकस से ट्रिगर होने पर कुछ ओवरले एलिमेंट अपने-आप छिप जाते हैं. उदाहरण के लिए, ड्रॉप-डाउन सूचियां, मेन्यू या तारीख चुनने वाले टूल. check_box फ़ोकस किए गए पेज को एम्युलेट करें विकल्प की मदद से, ऐसे एलिमेंट को डीबग किया जा सकता है जैसे वह फ़ोकस में हो.

इस डेमो पेज पर, फ़ोकस किए गए पेज को एम्युलेट करने की कोशिश करें:

1. इनपुट एलिमेंट पर फ़ोकस करें. इसके नीचे एक और एलिमेंट दिखता है.
2. DevTools खोलें. अब पेज के बजाय DevTools विंडो पर फ़ोकस है, इसलिए एलिमेंट फिर से गायब हो जाता है.
3. एलिमेंट > स्टाइल में जाकर, :hov पर क्लिक करें. इसके बाद, check_box फ़ोकस किए गए पेज को एमुलेट करें पर सही का निशान लगाएं. साथ ही, पक्का करें कि इनपुट एलिमेंट चुना गया हो. अब इसके नीचे मौजूद एलिमेंट की जांच की जा सकती है.

रेंडरिंग पैनल पर भी यही विकल्प दिखेगा.

किसी एलिमेंट को फ़्रीज़ करने के अन्य तरीके जानने के लिए, स्क्रीन को फ़्रीज़ करना और गायब होने वाले एलिमेंट की जांच करना लेख पढ़ें.

किसी सूडो-क्लास को टॉगल करना

किसी स्यूडो-क्लास को टॉगल करने के लिए:

1. कोई एलिमेंट चुनें.
2. एलिमेंट पैनल में, स्टाइल टैब पर जाएं.
3. :hov पर क्लिक करें.
4. उस स्यूडो-क्लास को चुनें जिसे आपको चालू करना है.

इस उदाहरण में, देखा जा सकता है कि DevTools, एलिमेंट पर background-color एलान लागू करता है. भले ही, एलिमेंट पर कर्सर घुमाया न गया हो.

स्टाइल टैब में, सभी एलिमेंट के लिए ये स्यूडो-क्लास दिखते हैं:

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

इसके अलावा, कुछ एलिमेंट में अपनी सूडो-क्लास हो सकती हैं. ऐसा एलिमेंट चुनने पर, स्टाइल टैब में चुने गए एलिमेंट की स्थिति को ज़बरदस्ती लागू करें सेक्शन दिखता है. इसे बड़ा करके, एलिमेंट के हिसाब से सूडो-क्लास चालू किए जा सकते हैं.

इंटरैक्टिव ट्यूटोरियल के लिए, किसी क्लास में सूडोस्टेट जोड़ना लेख पढ़ें.

इनहेरिट किए गए हाइलाइट के स्यूडो-एलिमेंट देखना