सीएसएस की खास जानकारी: सीएसएस में किए जा सकने वाले सुधारों का पता लगाना

जेसेलिन येन
जेसेलिन येन
Twitter GitHub होम पेज

अपने पेज की सीएसएस को बेहतर तरीके से समझने और संभावित सुधारों की पहचान करने के लिए, सीएसएस की खास जानकारी पैनल का इस्तेमाल करें.

सीएसएस की खास जानकारी वाला पैनल खोलें

  1. कोई भी वेब पेज खोलें, जैसे कि यह पेज.
  2. DevTools खोलें.

  3. ज़्यादा दिखाएँ। DevTools को पसंद के मुताबिक बनाएं और कंट्रोल करें > ज़्यादा टूल > सीएसएस की खास जानकारी चुनें.

    मेन्यू में सीएसएस की खास जानकारी.

    इसके अलावा, सीएसएस की खास जानकारी पैनल खोलने के लिए, कमांड मेन्यू का इस्तेमाल भी किया जा सकता है.

    कमांड मेन्यू में, सीएसएस की खास जानकारी वाला कमांड दिखाएं.

सीएसएस की खास जानकारी वाली रिपोर्ट चलाना और फिर से चलाना

  1. अपने पेज की सीएसएस की खास जानकारी वाली रिपोर्ट जनरेट करने के लिए, खास जानकारी कैप्चर करें बटन पर क्लिक करें.

    सीएसएस की खास जानकारी कैप्चर करें.

  2. सीएसएस की खास जानकारी को फिर से चलाने के लिए, आसान. खास जानकारी मिटाएं आइकॉन पर क्लिक करें और पहला चरण दोहराएं.

    खास जानकारी मिटाएं.

सीएसएस की खास जानकारी वाली रिपोर्ट को समझना

इस रिपोर्ट में पांच सेक्शन होते हैं:

  1. खास जानकारी. आपके पेज की सीएसएस की खास जानकारी. खास जानकारी.

  2. रंग. आपके पेज पर मौजूद सभी रंग. रंगों को टाइप के हिसाब से ग्रुप में रखा जाता है, जैसे कि बैकग्राउंड के रंग, टेक्स्ट के रंग वगैरह. इस सेक्शन में वे टेक्स्ट भी दिखते हैं जिनमें कंट्रास्ट कम हो.

    रंग.

    हर रंग पर क्लिक किया जा सकता है. उदाहरण के लिए, मान लें कि #DADCE0 के बॉर्डर का रंग, आपकी साइट की कलर स्कीम से मेल नहीं खाता. इस रंग का इस्तेमाल करने वाले एलिमेंट की सूची पाने के लिए, रंग पर क्लिक करें.

    रंग का इस्तेमाल करने वाले एलिमेंट की सूची.

    पेज पर एलिमेंट को हाइलाइट करने के लिए, सूची में मौजूद एलिमेंट पर कर्सर घुमाएं.

    पेज पर मौजूद किसी एलिमेंट को हाइलाइट करने के लिए, उस पर कर्सर घुमाएं.

    एलिमेंट पैनल में एलिमेंट खोलने के लिए, सूची में मौजूद एलिमेंट पर क्लिक करें.

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

    फ़ॉन्ट की जानकारी.

  4. इस्तेमाल नहीं किए गए एलान. कोई असर न डालने वाली सभी स्टाइल, वजह के हिसाब से ग्रुप में रखी गई हैं.

    ऐसे एलान जो इस्तेमाल नहीं किए गए हैं.

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

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

    मीडिया क्वेरी.