अपने पेज की सीएसएस को बेहतर तरीके से समझने और संभावित सुधारों की पहचान करने के लिए, सीएसएस की खास जानकारी पैनल का इस्तेमाल करें.
सीएसएस की खास जानकारी वाला पैनल खोलें
- कोई भी वेब पेज खोलें, जैसे कि यह पेज.
- DevTools खोलें.
DevTools को पसंद के मुताबिक बनाएं और कंट्रोल करें > ज़्यादा टूल > सीएसएस की खास जानकारी चुनें.
इसके अलावा, सीएसएस की खास जानकारी पैनल खोलने के लिए, कमांड मेन्यू का इस्तेमाल भी किया जा सकता है.
सीएसएस की खास जानकारी वाली रिपोर्ट चलाना और फिर से चलाना
अपने पेज की सीएसएस की खास जानकारी वाली रिपोर्ट जनरेट करने के लिए, खास जानकारी कैप्चर करें बटन पर क्लिक करें.
सीएसएस की खास जानकारी को फिर से चलाने के लिए, खास जानकारी मिटाएं आइकॉन पर क्लिक करें और पहला चरण दोहराएं.
सीएसएस की खास जानकारी वाली रिपोर्ट को समझना
इस रिपोर्ट में पांच सेक्शन होते हैं:
- खास जानकारी. आपके पेज की सीएसएस की खास जानकारी.
रंग. आपके पेज पर मौजूद सभी रंग. रंगों को टाइप के हिसाब से ग्रुप में रखा जाता है, जैसे कि बैकग्राउंड के रंग, टेक्स्ट के रंग वगैरह. इस सेक्शन में वे टेक्स्ट भी दिखते हैं जिनमें कंट्रास्ट कम हो.
हर रंग पर क्लिक किया जा सकता है. उदाहरण के लिए, मान लें कि
#DADCE0
के बॉर्डर का रंग, आपकी साइट की कलर स्कीम से मेल नहीं खाता. इस रंग का इस्तेमाल करने वाले एलिमेंट की सूची पाने के लिए, रंग पर क्लिक करें.पेज पर एलिमेंट को हाइलाइट करने के लिए, सूची में मौजूद एलिमेंट पर कर्सर घुमाएं.
एलिमेंट पैनल में एलिमेंट खोलने के लिए, सूची में मौजूद एलिमेंट पर क्लिक करें.
फ़ॉन्ट की जानकारी. आपके पेज पर मौजूद सभी फ़ॉन्ट और उन फ़ॉन्ट को अलग-अलग साइज़, फ़ॉन्ट की मोटाई, और लाइन की ऊंचाई के हिसाब से ग्रुप में बांटा गया है. रंग सेक्शन की तरह, जिन एलिमेंट पर असर पड़ा है उनकी सूची देखने के लिए, उनके दोहराव पर क्लिक करें.
इस्तेमाल नहीं किए गए एलान. कोई असर न डालने वाली सभी स्टाइल, वजह के हिसाब से ग्रुप में रखी गई हैं.
उदाहरण के लिए, ऊपर दिए गए दो एलानों का इस्तेमाल नहीं किया गया है, क्योंकि कॉन्टेंट में किसी इनलाइन एलिमेंट की ऊंचाई और चौड़ाई तय की गई है. उनसे जुड़े एलिमेंट देखने के लिए, इवेंट पर क्लिक करें.
मीडिया क्वेरी. आपके पेज पर बताई गई सभी मीडिया क्वेरी, जिन्हें घटते क्रम में लगाया गया है. जिन एलिमेंट पर असर पड़ा है उनकी सूची देखने के लिए, उनके दोहराव पर क्लिक करें.