सीएसएस मीडिया सुविधाओं को एम्युलेट करें

Sofia Emelianova
Sofia Emelianova

रेंडरिंग टैब पर, एम्युलेट किए गए विकल्पों के इस रेफ़रंस की मदद से, सीएसएस मीडिया की कई सुविधाओं को एम्युलेट करें.

सीएसएस मीडिया फ़ीचर prefers-color-scheme को एम्युलेट करना

prefers-color-scheme सीएसएस मीडिया सुविधा से पता चलता है कि उपयोगकर्ता को हल्के या गहरे रंग की कलर स्कीम पसंद है या नहीं.

इस स्थिति को एमुलेट करने के लिए:

  1. prefers-color-scheme पेज पर, रेंडरिंग टैब खोलें.
  2. सीएसएस मीडिया की सुविधा prefers-color-scheme में जाकर, ड्रॉप-डाउन सूची में से इनमें से कोई एक चुनें:

    • कोई एम्युलेशन नहीं
    • prefers-color-scheme:light
    • prefers-color-scheme:dark
  3. पेज को फिर से लोड करें. उदाहरण के लिए:

एम्युलेट की गई prefers-color-scheme:dark

सीएसएस मीडिया टाइप को एम्युलेट करें (प्रिंट प्रीव्यू की सुविधा चालू करें)

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

अपने पेज को प्रिंट प्रीव्यू मोड में दिखाने के लिए:

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

    प्रिंट की झलक देखने का मोड

  2. यहां से, किसी भी दूसरे वेब पेज की तरह ही अपनी सीएसएस देखी और बदली जा सकती है. सीएसएस देखना और बदलना लेख पढ़ें.

सीएसएस मीडिया फ़ीचर forced-colors को एम्युलेट करना

forced-colors सीएसएस मीडिया फ़ीचर से पता चलता है कि उपयोगकर्ता एजेंट ने फ़ोर्स्ड कलर मोड चालू किया है या नहीं. Windows हाई कंट्रास्ट, फ़ोर्स किए गए कलर मोड का एक उदाहरण है.

इस स्थिति को एम्युलेट करने के लिए:

  1. रेंडरिंग टैब खोलें.
  2. सीएसएस मीडिया फ़ीचर forced-colors को एम्युलेट करें में जाकर, ड्रॉप-डाउन सूची से इनमें से कोई एक विकल्प चुनें:

    • कोई एम्युलेशन नहीं
    • forced-colors:active
    • forced-colors:none

forced-colors:active को एम्युलेट किए जाने पर:

forced-colors:active

सीएसएस मीडिया फ़ीचर prefers-contrast को एम्युलेट करें

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

इस स्थिति को एमुलेट करने के लिए:

  1. रेंडरिंग टैब खोलें.
  2. सीएसएस मीडिया फ़ीचर prefers-contrast को एम्युलेट करें में जाकर, ड्रॉप-डाउन सूची से इनमें से कोई एक विकल्प चुनें:

    • कोई एम्युलेशन नहीं
    • prefers-contrast:more
    • prefers-contrast:less
    • prefers-contrast:custom

सीएसएस मीडिया फ़ीचर prefers-reduced-motion को एम्युलेट करना

prefers-reduced-motion सीएसएस मीडिया फ़ीचर से पता चलता है कि उपयोगकर्ता ने किसी पेज पर मोशन को कम करने का अनुरोध किया है या नहीं.

इस स्थिति को एम्युलेट करने के लिए:

  1. इस डेमो पर, रेंडरिंग टैब खोलें और अलग-अलग ऐनिमेशन देखने के लिए स्क्रोल करें.
  2. सीएसएस मीडिया फ़ीचर prefers-reduced-motion को एम्युलेट करें में जाकर, prefers-reduced-motion:reduce चुनें.
  3. फिर से स्क्रोल करें.

सीएसएस मीडिया फ़ीचर prefers-reduced-transparency को एम्युलेट करना

prefers-reduced-transparency सीएसएस मीडिया फ़ीचर से पता चलता है कि उपयोगकर्ता ने डिवाइस पर इस्तेमाल होने वाले पारदर्शी या ट्रांसलूसेंट लेयर इफ़ेक्ट को कम करने का अनुरोध किया है या नहीं.

prefers-reduced-transparency सुविधा Chrome 118 से उपलब्ध है. इसकी मदद से, ओएस में पारदर्शिता को कम करने के लिए, उपयोगकर्ता की चुनी गई प्राथमिकता के हिसाब से वेब कॉन्टेंट में बदलाव किया जा सकता है. जैसे, macOS पर पारदर्शिता कम करें सेटिंग.

इस स्थिति को एम्युलेट करने के लिए:

  1. रेंडरिंग टैब खोलें.
  2. सीएसएस मीडिया की सुविधा prefers-reduced-transparency को बेहतर बनाएं में जाकर, prefers-reduced-transparency: reduce चुनें.
  3. देखें कि आपका पेज सही तरीके से दिख रहा है या नहीं.

सीएसएस मीडिया फ़ीचर color-gamut को एम्युलेट करें

color-gamut सीएसएस मीडिया फ़ीचर से पता चलता है कि उपयोगकर्ता एजेंट और आउटपुट डिवाइस पर कौनसे रंगों की सुविधा काम करती है.

इस स्थिति को एम्युलेट करने के लिए:

  1. रेंडरिंग टैब खोलें.
  2. सीएसएस मीडिया फ़ीचर color-gamut को एम्युलेट करें में जाकर, ड्रॉप-डाउन सूची से इनमें से कोई एक विकल्प चुनें:

    • कोई एम्युलेशन नहीं
    • color-gamut:srgb—करीब sRGB गामट या इससे ज़्यादा
    • color-gamut:p3—यह Display P3 कलर स्पेस में बताए गए गैमट के बराबर या उससे ज़्यादा है
    • color-gamut:rec2020Rec. 2020 या इससे ज़्यादा में बताया गया गैमट