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

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

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

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

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

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

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

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

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

सीएसएस देखें

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

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

स्टाइल टैब में, अलग-अलग जगहों के लिंक अलग-अलग जगहों पर दिखते हैं. इनमें ये शामिल हैं, लेकिन इनके अलावा और भी चीज़ें शामिल हो सकती हैं:

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

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

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

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

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

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

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

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

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

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

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

स्पेसिफ़िसिटी वेट वाली टूलटिप देखने के लिए, किसी सिलेक्टर पर कर्सर घुमाएं.

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

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

अमान्य, बदले गए, इनऐक्टिव, और अन्य सीएसएस देखें

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

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

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

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

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

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

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

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

कैलकुलेट किया गया टैब का इस्तेमाल करें. किसी एलिमेंट पर लागू की गई सीएसएस को ही देखना लेख पढ़ें.

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

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

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

सीएसएस के ऐट-रूल देखना

ऐट-रूल, सीएसएस स्टेटमेंट होते हैं. इनकी मदद से, सीएसएस के व्यवहार को कंट्रोल किया जा सकता है. तत्व > स्टाइल में, अलग-अलग सेक्शन में ये ऐट-रूल दिखते हैं:

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

@property ऐट-नियम देखना

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

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

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

@supports ऐट-नियम देखना

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

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

@scope ऐट-नियम देखना

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

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

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

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

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

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

@font-palette-values ऐट-नियम देखना

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

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

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

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

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

@position-try ऐट-नियम देखना

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

Elements > Styles में जाकर, इन समस्याओं को ठीक किया जा सकता है और इन्हें लिंक किया जा सकता है:

• 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() आर्ग्युमेंट पर क्लिक करें. Elements पैनल, popovertarget एट्रिब्यूट वाले एलिमेंट को चुनता है. साथ ही, Styles टैब, एलिमेंट की सीएसएस दिखाता है.

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

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

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

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

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

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

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

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

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

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

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

1. इनपुट एलिमेंट पर फ़ोकस करें. इसके नीचे कोई दूसरा एलिमेंट दिखता है.
2. DevTools खोलें. अब पेज की बजाय DevTools विंडो पर फ़ोकस किया गया है. इसलिए, एलिमेंट फिर से गायब हो जाता है.
3. Elements > Styles में जाकर, :hov पर क्लिक करें. इसके बाद, check_box Emulate a focused page को चुनें. साथ ही, पक्का करें कि element is selected इनपुट चुना गया हो. अब इसके नीचे मौजूद एलिमेंट की जांच की जा सकती है.

आपको रेंडरिंग पैनल में भी यही विकल्प मिल सकता है.

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

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

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

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

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

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

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

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

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

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

स्यूडो-एलिमेंट की मदद से, एलिमेंट के कुछ हिस्सों को स्टाइल किया जा सकता है. हाइलाइट किए गए सूडो-एलिमेंट, दस्तावेज़ के वे हिस्से होते हैं जिनकी स्थिति "चुना गया" होती है. इन्हें "हाइलाइट किया गया" के तौर पर स्टाइल किया जाता है, ताकि उपयोगकर्ता को इस स्थिति के बारे में पता चल सके. उदाहरण के लिए, इस तरह के सूडो-एलिमेंट ::selection, ::spelling-error, ::grammar-error, और ::highlight हैं.

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

नियमों के इनहेरिटेंस और प्राथमिकता को बेहतर तरीके से समझने के लिए, इनहेरिट किए गए हाइलाइट स्यूडो-एलिमेंट देखें:

1. यहां दिए गए टेक्स्ट की जांच करें.

   मैंने अपने पैरंट के हाइलाइट स्यूडो-एलिमेंट की स्टाइल इनहेरिट की है. मुझे चुनें!

2. ऊपर दिए गए टेक्स्ट का कोई हिस्सा चुनें.

3. स्टाइल टैब में, नीचे की ओर स्क्रोल करके Inherited from ::selection pseudo of... सेक्शन पर जाएं.

कैस्केड लेयर देखना

कैस्केड लेयर की मदद से, अपनी सीएसएस फ़ाइलों को ज़्यादा बेहतर तरीके से कंट्रोल किया जा सकता है. इससे स्टाइल-स्पेसिफ़िसिटी से जुड़ी समस्याएं नहीं होती हैं. यह बड़े कोडबेस, डिज़ाइन सिस्टम, और ऐप्लिकेशन में तीसरे पक्ष की स्टाइल मैनेज करने के लिए मददगार है.

कैस्केड लेयर देखने के लिए, अगले एलिमेंट की जांच करें और Elements > Styles खोलें.

स्टाइल टैब में जाकर, तीन कैस्केड लेयर और उनकी स्टाइल देखें: page, component, और base.

लेयर का क्रम देखने के लिए, लेयर के नाम या सीएसएस लेयर व्यू टॉगल करें बटन पर क्लिक करें.

page लेयर की प्राथमिकता सबसे ज़्यादा है. इसलिए, एलिमेंट का बैकग्राउंड हरा है.

पेज को प्रिंट मोड में देखना

पेज को प्रिंट मोड में देखने के लिए:

1. कमांड मेन्यू खोलें.
2. Rendering टाइप करना शुरू करें और Show Rendering चुनें.
3. सीएसएस मीडिया को एम्युलेट करें ड्रॉप-डाउन के लिए, प्रिंट करें को चुनें.

कवरेज टैब की मदद से, इस्तेमाल की गई और इस्तेमाल न की गई सीएसएस देखें

कवरेज टैब से पता चलता है कि कोई पेज कौनसी सीएसएस का इस्तेमाल करता है.

1. कमांड मेन्यू खोलने के लिए, DevTools पर फ़ोकस करते समय Command+Shift+P (Mac) या Control+Shift+P (Windows, Linux, ChromeOS) दबाएं.

2. टाइप करना शुरू करें coverage.

   

3. कवरेज दिखाएं को चुनें. कवरेज टैब दिखता है.

   

4. फिर से लोड करें पर क्लिक करें. पेज फिर से लोड होता है. साथ ही, कवरेज टैब में यह जानकारी मिलती है कि ब्राउज़र ने लोड की गई हर फ़ाइल से कितनी सीएसएस (और JavaScript) का इस्तेमाल किया है.

   

   हरा रंग, इस्तेमाल की गई सीएसएस को दिखाता है. लाल रंग, इस्तेमाल न किए गए सीएसएस को दिखाता है.

5. किसी सीएसएस फ़ाइल पर क्लिक करके, यह देखा जा सकता है कि ऊपर दी गई झलक में कौनसी सीएसएस का इस्तेमाल किया गया है.

   

   स्क्रीनशॉट में, devsite-google-blue.css की लाइनें 55 से 57 और 65 से 67 का इस्तेमाल नहीं किया गया है. वहीं, लाइनें 59 से 63 का इस्तेमाल किया गया है.

प्रिंट प्रीव्यू मोड को ज़बरदस्ती चालू करें

DevTools को प्रिंट की झलक वाले मोड में ले जाना लेख पढ़ें.

सीएसएस कॉपी करें

स्टाइल टैब में मौजूद एक ड्रॉप-डाउन मेन्यू से, अलग-अलग सीएसएस नियम, एलान, प्रॉपर्टी, वैल्यू कॉपी की जा सकती हैं

इसके अलावा, JavaScript सिंटैक्स में सीएसएस प्रॉपर्टी कॉपी की जा सकती हैं. अगर CSS-in-JS लाइब्रेरी का इस्तेमाल किया जा रहा है, तो यह विकल्प काम का है.

सीएसएस कॉपी करने के लिए:

1. कोई एलिमेंट चुनें.
2. Elements > Styles टैब में, किसी सीएसएस प्रॉपर्टी पर राइट क्लिक करें.

3. ड्रॉप-डाउन मेन्यू से, इनमें से कोई एक विकल्प चुनें:

   • एलान कॉपी करें. यह सीएसएस सिंटैक्स में प्रॉपर्टी और उसकी वैल्यू को कॉपी करता है: css property: value;
   • प्रॉपर्टी कॉपी करें. सिर्फ़ property का नाम कॉपी करता है.
   • वैल्यू कॉपी करें. सिर्फ़ value को कॉपी करता है.
   • नियम कॉपी करें. यह पूरे सीएसएस नियम को कॉपी करता है: css selector[, selector] { property: value; property: value; ... }
   • एलान को JS के तौर पर कॉपी करें. यह प्रॉपर्टी और उसकी वैल्यू को JavaScript सिंटैक्स में कॉपी करता है: js propertyInCamelCase: 'value'
   • सभी एलान कॉपी करें. यह सीएसएस नियम में मौजूद सभी प्रॉपर्टी और उनकी वैल्यू कॉपी करता है: css property: value; property: value; ...

   • सभी एलान को JS के तौर पर कॉपी करें. यह JavaScript सिंटैक्स में सभी प्रॉपर्टी और उनकी वैल्यू कॉपी करता है: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • सीएसएस में हुए सभी बदलावों को कॉपी करें. बदलावों को कॉपी करता है. ये बदलाव, स्टाइल टैब में किए जाते हैं और सभी कानूनी दस्तावेज़ों पर लागू होते हैं.

   • कंप्यूटेड वैल्यू देखें. इससे आपको कैलकुलेट किया गया टैब पर ले जाया जाता है.

सीएसएस बदलना

इस सेक्शन में, Elements > Styles में जाकर सीएसएस बदलने के सभी तरीके बताए गए हैं.

इसके अलावा, ये काम भी किए जा सकते हैं:

• पेज लोड होने पर सीएसएस को बदलें.
• बदलाव किए गए सीएसएस को किसी फ़ाइल फ़ोल्डर में मौजूद अपने लोकल सोर्स में सेव करें.

कोड पूरा होने की सुविधा की मदद से सीएसएस बदलना

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

किसी एलिमेंट में सीएसएस डिक्लेरेशन जोड़ना

डिक्लेरेशन के क्रम से, एलिमेंट की स्टाइल पर असर पड़ता है. इसलिए, डिक्लेरेशन को अलग-अलग तरीकों से जोड़ा जा सकता है:

• इनलाइन एलान जोड़ें. यह एलिमेंट के एचटीएमएल में style एट्रिब्यूट जोड़ने के बराबर है.
• स्टाइल के नियम में कोई एलान जोड़ें.

आपको कौनसा वर्कफ़्लो इस्तेमाल करना चाहिए? ज़्यादातर स्थितियों में, आपको इनलाइन डिक्लेरेशन वर्कफ़्लो का इस्तेमाल करना चाहिए. इनलाइन एलान, बाहरी एलान की तुलना में ज़्यादा खास होते हैं. इसलिए, इनलाइन वर्कफ़्लो यह पक्का करता है कि बदलाव, एलिमेंट में आपकी उम्मीद के मुताबिक लागू हों. ज़्यादा जानकारी के लिए, Selector Types देखें.

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

इनलाइन एलान जोड़ना

इनलाइन एलान जोड़ने के लिए:

1. कोई एलिमेंट चुनें.
2. स्टाइल टैब में, element.style सेक्शन के ब्रैकेट के बीच क्लिक करें. कर्सर फ़ोकस करता है, ताकि टेक्स्ट डाला जा सके.
3. प्रॉपर्टी का नाम डालें और Enter दबाएं.

4. उस प्रॉपर्टी के लिए कोई मान्य वैल्यू डालें और Enter दबाएं. DOM ट्री में, आपको दिखेगा कि एलिमेंट में style एट्रिब्यूट जोड़ा गया है.

   

   स्क्रीनशॉट में, चुने गए एलिमेंट पर margin-top और background-color प्रॉपर्टी लागू की गई हैं. डीओएम ट्री में, आपको एलिमेंट के style एट्रिब्यूट में दिखने वाले एलान दिख सकते हैं.

स्टाइल के नियम में कोई एलान जोड़ना

किसी मौजूदा स्टाइल के नियम में एलान जोड़ने के लिए:

1. कोई एलिमेंट चुनें.
2. स्टाइल टैब में, स्टाइल के उस नियम के ब्रैकेट के बीच में क्लिक करें जिसमें आपको एलान जोड़ना है. कर्सर पर फ़ोकस किया जाता है, ताकि टेक्स्ट डाला जा सके.
3. प्रॉपर्टी का नाम डालें और Enter दबाएं.
4. उस प्रॉपर्टी के लिए कोई मान्य वैल्यू डालें और Enter दबाएं.

स्क्रीनशॉट में, स्टाइल के नियम को नया border-bottom-style:groove एलान मिलता है.

किसी एलान का नाम या वैल्यू बदलना

किसी एलान के नाम या वैल्यू में बदलाव करने के लिए, उस पर दो बार क्लिक करें. किसी वैल्यू को 0.1, 1, 10 या 100 यूनिट से तुरंत बढ़ाने या घटाने के लिए, कीबोर्ड शॉर्टकट की मदद से, गिनती की जा सकने वाली वैल्यू बदलना लेख पढ़ें.

कीबोर्ड शॉर्टकट की मदद से, गिने जा सकने वाली वैल्यू बदलना

किसी डेक्लेरेशन की गिनती की जा सकने वाली वैल्यू में बदलाव करते समय, जैसे कि font-size, वैल्यू को तय की गई संख्या से बढ़ाने के लिए, इन कीबोर्ड शॉर्टकट का इस्तेमाल किया जा सकता है:

• 0.1 बढ़ाने के लिए, Option+Up (Mac) या Alt+Up (Windows, Linux) दबाएं.
• वैल्यू को 1 से बदलने के लिए बढ़ाएं या अगर मौजूदा वैल्यू -1 और 1 के बीच है, तो वैल्यू को 0.1 से बदलें.
• 10 बढ़ाने के लिए, Shift+Up दबाएं.
• वैल्यू को 100 से बढ़ाने के लिए, Shift+Command+Up (Mac) या Control+Shift+Page Up (Windows, Linux) दबाएं.

वैल्यू को घटाया भी जा सकता है. पहले बताए गए Up के हर इंस्टेंस को Down से बदलें.

लंबाई की वैल्यू बदलना

पॉइंटर का इस्तेमाल करके, लंबाई वाली किसी भी प्रॉपर्टी को बदला जा सकता है. जैसे, चौड़ाई, ऊंचाई, पैडिंग, मार्जिन या बॉर्डर.

लंबाई की इकाई बदलने के लिए:

1. यूनिट के नाम पर कर्सर घुमाएं और देखें कि उसके नीचे लाइन खींची गई है.

2. ड्रॉप-डाउन से कोई यूनिट चुनने के लिए, यूनिट के नाम पर क्लिक करें.

लंबाई की वैल्यू बदलने के लिए:

1. यूनिट वैल्यू पर कर्सर घुमाएं और देखें कि आपका पॉइंटर, हॉरिज़ॉन्टल डबल-हेडेड ऐरो में बदल गया है.

2. वैल्यू बढ़ाने या घटाने के लिए, हॉरिज़ॉन्टल तरीके से खींचें और छोड़ें.

वैल्यू को 10 से अडजस्ट करने के लिए, खींचते समय Shift दबाकर रखें.

किसी एलिमेंट में क्लास जोड़ना

किसी एलिमेंट में क्लास जोड़ने के लिए:

1. DOM ट्री में एलिमेंट चुनें.
2. .cls पर क्लिक करें.
3. नई क्लास जोड़ें बॉक्स में, क्लास का नाम डालें.
4. Enter दबाएं.

हल्के और गहरे रंग वाली थीम की प्राथमिकताओं को एम्युलेट करना और गहरे रंग वाले मोड के अपने-आप चालू होने की सुविधा चालू करना

गहरे रंग वाला मोड अपने-आप चालू होने की सुविधा को टॉगल करने या हल्के या गहरे रंग वाली थीम के लिए उपयोगकर्ता की पसंद के मुताबिक थीम सेट करने के लिए:

1. तत्व > स्टाइल टैब में जाकर, रेंडरिंग के सामान्य एम्युलेशन को टॉगल करें पर क्लिक करें.

2. ड्रॉप-डाउन सूची से इनमें से कोई एक चुनें:

   • prefers-color-scheme: light. इससे पता चलता है कि उपयोगकर्ता को हल्के रंग वाली थीम पसंद है.
   • prefers-color-scheme: dark. इससे पता चलता है कि उपयोगकर्ता को गहरे रंग वाली थीम पसंद है.
   • गहरे रंग वाला मोड अपने-आप चालू होने की सुविधा. यह आपके पेज को डार्क मोड में दिखाता है, भले ही आपने इसे लागू न किया हो. इसके अलावा, यह prefers-color-scheme को अपने-आप dark पर सेट कर देता है.

यह ड्रॉप-डाउन, रेंडरिंग टैब के सीएसएस मीडिया फ़ीचर prefers-color-scheme और डार्क मोड अपने-आप चालू होने की सुविधा विकल्पों का शॉर्टकट है.

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

किसी एलिमेंट पर क्लास को चालू या बंद करने के लिए:

1. DOM ट्री में एलिमेंट चुनें.
2. Element Classes सेक्शन खोलें. किसी एलिमेंट में क्लास जोड़ना लेख पढ़ें. नई क्लास जोड़ें बॉक्स के नीचे, वे सभी क्लास दिखती हैं जो इस एलिमेंट पर लागू की जा रही हैं.
3. आपको जिस क्लास को चालू या बंद करना है उसके बगल में मौजूद चेकबॉक्स को टॉगल करें.

स्टाइल का नियम जोड़ना

स्टाइल का नया नियम जोड़ने के लिए:

1. कोई एलिमेंट चुनें.
2. New Style Rule पर क्लिक करें. DevTools, element.style नियम के नीचे एक नया नियम डालता है.

स्क्रीनशॉट में दिखाया गया है कि New Style Rule पर क्लिक करने के बाद, DevTools ने h1.devsite-page-title स्टाइल का नियम जोड़ दिया है.

वह स्टाइल शीट चुनें जिसमें आपको कोई नियम जोड़ना है

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

किसी एलान को टॉगल करना

किसी एक एलान को चालू या बंद करने के लिए:

1. कोई एलिमेंट चुनें.
2. स्टाइल टैब में, उस नियम पर कर्सर घुमाएं जो एलान को तय करता है. हर एलान के बगल में चेकबॉक्स दिखते हैं.
3. डिक्लेरेशन के बगल में मौजूद चेकबॉक्स पर सही का निशान लगाएं या हटाएं. किसी एलान को हटाने पर, DevTools उसे काट देता है. इससे पता चलता है कि वह अब चालू नहीं है.

स्क्रीनशॉट में, फ़िलहाल चुने गए एलिमेंट के लिए color प्रॉपर्टी को टॉगल करके बंद किया गया है.

ऐनिमेशन के दौरान ::view-transition छद्म-तत्वों में बदलाव करना

ऐनिमेशन में इससे जुड़ा सेक्शन देखें.

ज़्यादा जानकारी के लिए, View Transitions API की मदद से, ट्रांज़िशन को आसान और बेहतर बनाना लेख पढ़ें.

ग्रिड एडिटर की मदद से, ग्रिड आइटम और उनके कॉन्टेंट को अलाइन करना

सीएसएस ग्रिड की जांच करें में इससे जुड़ा सेक्शन देखें.

कलर पिकर की मदद से रंग बदलना

कलर पिकर की मदद से, एचडी और नॉन-एचडी रंगों की जांच करना और उन्हें डीबग करना लेख पढ़ें.

Angle Clock की मदद से, कोण की वैल्यू बदलना

ऐंगल क्लॉक, सीएसएस प्रॉपर्टी की वैल्यू में <angle> बदलने के लिए जीयूआई उपलब्ध कराता है.

ऐंगल क्लॉक खोलने के लिए:

1. ऐंगल के बारे में जानकारी देने वाला कोई एलिमेंट चुनें.

2. स्टाइल टैब में, वह transform या background एलान ढूंढें जिसमें आपको बदलाव करना है. ऐंगल की वैल्यू के बगल में मौजूद, ऐंगल की झलक बॉक्स पर क्लिक करें.

   

   -5deg और 0.25turn के बाईं ओर मौजूद छोटी घड़ियां, ऐंगल की झलकियां हैं.

3. ऐंगल क्लॉक खोलने के लिए, झलक पर क्लिक करें.

   

4. ऐंगल क्लॉक सर्कल पर क्लिक करके ऐंगल की वैल्यू बदलें या अपने माउस को स्क्रोल करके, ऐंगल की वैल्यू को 1 से बढ़ाएं / घटाएं.

5. इसमें ऐंगल की वैल्यू बदलने के लिए, ज़्यादा कीबोर्ड शॉर्टकट होते हैं. स्टाइल पैनल के कीबोर्ड शॉर्टकट में इसके बारे में ज़्यादा जानें.

शैडो एडिटर की मदद से, बॉक्स और टेक्स्ट की परछाई बदलें

शैडो एडिटर, text-shadow और box-shadow सीएसएस के एलान में बदलाव करने के लिए, जीयूआई उपलब्ध कराता है.

शैडो एडिटर की मदद से शैडो बदलने के लिए:

1. शैडो डेक्लेरेशन वाला कोई एलिमेंट चुनें. उदाहरण के लिए, अगला एलिमेंट चुनें.

2. स्टाइल टैब में, text-shadow या box-shadow डिक्लेरेशन के बगल में मौजूद शैडो आइकॉन ढूंढें.

   

3. शैडो एडिटर खोलने के लिए, शैडो आइकॉन पर क्लिक करें.

   

4. शैडो की प्रॉपर्टी बदलें:

   • टाइप (सिर्फ़ box-shadow के लिए). आउटसेट या इनसेट चुनें.
   • X और Y ऑफ़सेट. नीले बिंदु को खींचें या वैल्यू डालें.
   • धुंधला करें. स्लाइडर को खींचें और छोड़ें या कोई वैल्यू डालें.
   • स्प्रेड (सिर्फ़ box-shadow के लिए). स्लाइडर को खींचें और छोड़ें या कोई वैल्यू डालें.

5. तत्व में किए गए बदलावों को देखें.

ईज़िंग एडिटर की मदद से, ऐनिमेशन और ट्रांज़िशन की टाइमिंग में बदलाव करना

ईज़िंग एडिटर, transition-timing-function और animation-timing-function की वैल्यू बदलने के लिए, जीयूआई उपलब्ध कराता है.

ईज़िंग एडिटर खोलने के लिए:

1. टाइमिंग फ़ंक्शन के एलान वाला कोई एलिमेंट चुनें. जैसे, इस पेज पर मौजूद <body> एलिमेंट.
2. स्टाइल टैब में, transition-timing-function, animation-timing-function एलान या transition शॉर्टहैंड प्रॉपर्टी के बगल में मौजूद, बैंगनी रंग का आइकॉन ढूंढें.
3. ईज़िंग एडिटर खोलने के लिए, आइकॉन पर क्लिक करें:

समय में बदलाव करने के लिए, प्रीसेट का इस्तेमाल करना

एक क्लिक से टाइमिंग में बदलाव करने के लिए, ईज़िंग एडिटर में मौजूद प्रीसेट का इस्तेमाल करें:

1. ईज़िंग एडिटर में, कीवर्ड वैल्यू सेट करने के लिए, पिकर बटन में से किसी एक पर क्लिक करें:
   • linear
   • ease-in-out
   • ease-in
   • ease-out

2. प्रीसेट स्विचर में, या बटन पर क्लिक करके, इनमें से कोई एक प्रीसेट चुनें:

   • लीनियर प्रीसेट: elastic, bounce या emphasized.
   • क्यूबिक बेज़ियर प्रीसेट:

टाइमिंग कीवर्ड	प्रीसेट	क्यूबिक बेज़ियर
ease-in-out	इन आउट, साइन	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	इन आउट, क्वाड्रेटिक	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	इन आउट, क्यूबिक	cubic-bezier(0.65, 0.05, 0.36, 1)
	तेज़ी से कम होना, धीरे-धीरे बढ़ना	cubic-bezier(0.4, 0, 0.2, 1)
	In Out, Back	cubic-bezier(0.68, -0.55, 0.27, 1.55)
ease-in	इन, साइन	cubic-bezier(0.47, 0, 0.75, 0.72)
	इन, क्वाड्रेटिक	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	In, Back	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	तेज़ी से कम होना, धीरे-धीरे बढ़ना	cubic-bezier(0.4, 0, 1, 1)
ease-out	आउट, साइन	cubic-bezier(0.39, 0.58, 0.57, 1)
	आउट, क्वाड्रेटिक	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	आउट, क्यूबिक	cubic-bezier(0.22, 0.61, 0.36, 1)
	लीनियर आउट, स्लो इन	cubic-bezier(0, 0, 0.2, 1)
	आउट, बैक	cubic-bezier(0.18, 0.89, 0.32, 1.28)

अपनी पसंद के मुताबिक़ समय कॉन्फ़िगर करना

टाइमिंग फ़ंक्शन के लिए कस्टम वैल्यू सेट करने के लिए, लाइनों पर मौजूद कंट्रोल पॉइंट का इस्तेमाल करें:

• लीनियर फ़ंक्शन के लिए, कंट्रोल पॉइंट जोड़ने के लिए लाइन पर कहीं भी क्लिक करें और उसे खींचें. पॉइंट हटाने के लिए, उस पर दो बार क्लिक करें.

  

• क्यूबिक बेज़ियर फ़ंक्शन के लिए, किसी एक कंट्रोल पॉइंट को खींचें और छोड़ें.

  

किसी भी बदलाव से, एडिटर में सबसे ऊपर मौजूद झलक में बॉल ऐनिमेशन ट्रिगर होता है.

(एक्सपेरिमेंट के तौर पर उपलब्ध) सीएसएस में किए गए बदलावों को कॉपी करें

इस एक्सपेरिमेंट को चालू करने पर, स्टाइल टैब में सीएसएस में किए गए बदलाव हरे रंग में हाइलाइट होते हैं.

सीएसएस के किसी एक बदलाव को कॉपी करने के लिए, हाइलाइट किए गए बदलाव पर कर्सर घुमाएं. इसके बाद, कॉपी करें बटन पर क्लिक करें.

सभी एलान में सीएसएस में हुए सभी बदलावों को एक साथ कॉपी करने के लिए, किसी भी एलान पर राइट क्लिक करें और सीएसएस में हुए सभी बदलावों को कॉपी करें को चुनें.

इसके अलावा, बदलाव टैब की मदद से किए गए बदलावों को ट्रैक किया जा सकता है.