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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    रंग.

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

    उन एलिमेंट की सूची जो रंग का इस्तेमाल करते हैं.

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

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

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

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

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

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

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

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

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

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