मीडिया से जुड़ी सुविधाएं

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

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

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

@media all
@media screen
@media print
@media speech

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

व्यूपोर्ट के डाइमेंशन

वेब पर सबसे ज़्यादा इस्तेमाल की जाने वाली मीडिया क्वेरी, व्यूपोर्ट की चौड़ाई से जुड़ी होती हैं. हालांकि, यहां भी आपको विकल्प दिया जाता है. max-width मीडिया फ़ीचर का इस्तेमाल करके, किसी तय चौड़ाई से कम चौड़ाई वाले डिवाइसों पर स्टाइल लागू की जा सकती हैं. इसके अलावा, min-width मीडिया फ़ीचर का इस्तेमाल करके, किसी तय चौड़ाई से ज़्यादा चौड़ाई वाले डिवाइसों पर स्टाइल लागू की जा सकती हैं.

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

मुझे min-width का इस्तेमाल करना पसंद है. मैं लेआउट स्टाइल को एक साथ लागू करता हूं. मैं हर ब्रेकपॉइंट पर लेआउट के नए नियम लागू करता हूं. इसके लिए, पिछले नियमों को हटाने की ज़रूरत नहीं पड़ती.

यह तरीका, ऊंचाई के लिए भी काम करता है. min-height का इस्तेमाल करके, ज़्यादा व्यू पोर्ट हाइट उपलब्ध होने पर ज़्यादा नियम लागू किए जा सकते हैं. उदाहरण के लिए, आपके पास कोई हेडर एलिमेंट हो सकता है. अगर ब्राउज़र विंडो में वर्टिकल स्पेस काफ़ी है, तो आपको उसे सबसे ऊपर ऐंकर करना हो सकता है.

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

हालांकि, अगर आपको max-height मीडिया सुविधा का इस्तेमाल करना है, तो इसका इस्तेमाल किया जा सकता है. यहां हेडर डिफ़ॉल्ट रूप से ऐंकर किया गया है. हालांकि, अगर वर्टिकल स्पेस कम है, तो हेडर को चिपकाकर रखने की सुविधा हटा दी जाती है.

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

min- और max- प्रीफ़िक्स में से किसी एक को चुनने का विकल्प, सिर्फ़ width और height के लिए उपलब्ध नहीं है. aspect-ratio मीडिया फ़ीचर में भी यही विकल्प मिलता है. अगर आपको चौड़ाई और ऊंचाई के सटीक अनुपात में स्टाइल लागू करनी हैं, तो यह बिना प्रीफ़िक्स वाला वर्शन भी उपलब्ध कराता है.

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

अलग-अलग पहलू अनुपात के लिए अलग-अलग स्टाइल उपलब्ध कराने से, काम बहुत बढ़ सकता है. अगर आपको ज़्यादा कंट्रोल की ज़रूरत नहीं है, तो orientation मीडिया सुविधा आपकी ज़रूरतों के हिसाब से बेहतर हो सकती है. इसकी दो वैल्यू हो सकती हैं: portrait या landscape.

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

"पोर्ट्रेट" और "लैंडस्केप" शब्दों का इस्तेमाल, ज़्यादातर मोबाइल डिवाइसों के ओरिएंटेशन के लिए किया जाता है. हालांकि, orientation मीडिया फ़ीचर, डिवाइस के हिसाब से नहीं होती. किसी सामान्य लैपटॉप पर फ़ुल-स्क्रीन ब्राउज़र विंडो की orientation वैल्यू landscape होगी.

डिसप्ले

अलग-अलग डिसप्ले की पिक्सल डेंसिटी अलग-अलग होती है. इसे dpi, डॉट्स पर इंच में मापा जाता है. resolution मीडिया सुविधा का इस्तेमाल करके, अलग-अलग पिक्सल डेंसिटी के लिए स्टाइल में बदलाव किया जा सकता है. aspect-ratio की तरह, resolution भी तीन तरह का होता है: कम से कम, ज़्यादा से ज़्यादा, और सटीक.

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

आपको कभी भी किसी resolution मीडिया क्वेरी का इस्तेमाल करने की ज़रूरत नहीं पड़ सकती. आम तौर पर, पिक्सल डेंसिटी की समस्या सिर्फ़ इमेज में होती है. रिस्पॉन्सिव इमेज, एचटीएमएल में पिक्सल डेंसिटी की समस्या को सीधे तौर पर हल करने का एक तरीका है.

दूसरी ओर, सीएसएस में ऐनिमेशन और ट्रांज़िशन तय किए जाते हैं. update मीडिया सुविधा का इस्तेमाल करके, अलग-अलग रीफ़्रेश रेट के हिसाब से उन ऐनिमेशन और ट्रांज़िशन में बदलाव किया जा सकता है. यह मीडिया सुविधा, तीन वैल्यू में से किसी एक की रिपोर्ट करती है: none, slow, और fast.

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

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

update की वैल्यू fast होने का मतलब है कि डिसप्ले इतनी तेज़ी से रीफ़्रेश होता है कि ऐनिमेशन और ट्रांज़िशन को हैंडल कर सकता है.

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

डिसप्ले के सभी पहलू, हार्डवेयर की क्षमताओं से जुड़े नहीं होते. आपने थीमिंग वाले मॉड्यूल में देखा कि वेब ऐप्लिकेशन मेनिफ़ेस्ट फ़ाइल में प्रॉपर्टी कैसे तय की जाती हैं. इनमें से एक प्रॉपर्टी को display कहा जाता है. इसकी वैल्यू fullscreen, standalone, minimum-ui या browser हो सकती है. display-mode मीडिया फ़ीचर की मदद से, इन अलग-अलग विकल्पों के लिए अपनी स्टाइल तय की जा सकती हैं.

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

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

रंग

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

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

इसके लिए, color मीडिया फ़ीचर उपलब्ध है.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

कलर स्क्रीन के लिए, मीडिया सुविधाओं color-gamut, color-index या dynamic-range का इस्तेमाल करके क्वेरी लिखी जा सकती हैं. इन सभी से, स्क्रीन पर दिखने वाले रंगों की जानकारी मिलती है.

इस उदाहरण में, dynamic-range मीडिया फ़ीचर के जवाब में रंग की वैल्यू अपडेट होती हैं. यह फ़ीचर, डिसप्ले की ज़्यादा से ज़्यादा चमक, रंग की गहराई, और कंट्रास्ट रेशियो के कॉम्बिनेशन की जानकारी देती है. standard या high को वैल्यू के तौर पर इस्तेमाल किया जा सकता है. हाई-डेफ़िनिशन स्क्रीन, dynamic-range की high वैल्यू दिखाती है. इसे नई सीएसएस color() फ़ंक्शन का इस्तेमाल करके, अलग कलर स्पेस दिया जाता है.

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

बातचीत

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

उपयोगकर्ता की पसंद के हिसाब से क्वेरी

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

गहरे और हल्के रंग वाला मोड

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

यूज़र इंटरफ़ेस (यूआई) एलिमेंट के लिए कलर स्कीम सेट करनाx

ब्राउज़र, स्क्रोलबार और फ़ॉर्म एलिमेंट जैसी चीज़ों के लिए डिफ़ॉल्ट कलर उपलब्ध कराता है. आपके पास यह तय करने का विकल्प होता है कि color-scheme: light वाले लोगों के लिए हल्के रंग वाली थीम का इस्तेमाल करना है या color-scheme: dark वाले लोगों के लिए गहरे रंग वाली थीम का इस्तेमाल करना है. color-scheme: light dark का इस्तेमाल करके, यह भी बताया जा सकता है कि पेज पर दोनों सुविधाएं काम करती हैं. इसे :root या html एलिमेंट पर सेट किया जा सकता है, ताकि पूरे पेज के लिए स्कीम सेट की जा सके. इसके अलावा, इसे कुछ एलिमेंट के लिए बदला भी जा सकता है.

स्टाइल लोड होने से पहले पेज की स्कीम सेट करने के लिए, meta के लिए color-scheme टैग भी सेट किया जा सकता है. अगर आपने पेज के किसी एलिमेंट पर color-scheme: normal सेट किया है, तो यह उस color-scheme वैल्यू का इस्तेमाल करेगा जिसे आपने इस मेटा टैग में सेट किया है.

<meta name="color-scheme" content="dark light">

prefers-color-scheme मीडिया सुविधा

prefers-color-scheme के लिए मीडिया क्वेरी का इस्तेमाल करके, उपयोगकर्ता की चुनी गई कलर थीम के हिसाब से स्टाइल तय की जा सकती हैं.

light-dark

अगर आपको अपने उपयोगकर्ताओं को हल्के और गहरे रंग वाली थीम, दोनों में से किसी एक को चुनने का विकल्प देना है, तो आपको मीडिया क्वेरी में हर रंग को सेट करने में ज़्यादा समय लग सकता है. light-dark() की मदद से, दोनों को एक ही प्रॉपर्टी में बताया जा सकता है.

इसे चालू करने के लिए, आपको एलिमेंट या उसके किसी पूर्वज पर color-scheme: light dark सेट करना होगा. सबसे पहले, आपको लाइट मोड में इस्तेमाल करने के लिए कोई रंग सेट करना होता है. इसके बाद, डार्क मोड में इस्तेमाल करने के लिए कोई रंग सेट करना होता है.

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

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

कंट्रास्ट की सेटिंग

आपके उपयोगकर्ताओं को ज़्यादा या कम कंट्रास्ट वाला कॉन्टेंट पढ़ने में आसानी हो सकती है. वे अपने सिस्टम को इस तरह से सेट अप कर सकते हैं कि आपकी थीम को बदलकर, अपनी पसंद की थीम का इस्तेमाल किया जा सके. आपकी भूमिका यह पक्का करना है कि आपकी साइट अब भी उनकी प्राथमिकताओं के हिसाब से काम करती हो.

आपको कैस्केड मॉड्यूल में यह याद होगा कि !important लोकल यूज़र स्टाइल, वेब पेज पर मौजूद ऑथर्ड स्टाइल को बदल सकती हैं. इससे उपयोगकर्ताओं को ऐसे स्टाइल इस्तेमाल करने की सुविधा मिलती है जो उनके लिए ज़्यादा बेहतर हैं.

फ़ोर्स किए गए रंग

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

कभी-कभी, आपको अपनी स्टाइल में बदलाव करने पड़ सकते हैं. उदाहरण के लिए, अगर आपने एलिमेंट का इस्तेमाल सामान्य तरीके से नहीं किया है. जब कोई उपयोगकर्ता फ़ोर्स्ड कलर मोड चालू करता है, तब स्टाइल लागू करने के लिए @media (forced-colors: active) मीडिया क्वेरी का इस्तेमाल किया जा सकता है.

कुछ मामलों में, साइट की स्टाइल से कॉन्टेंट को समझने में मदद मिलती है. उदाहरण के लिए, कलर पिकर या रंग के हिसाब से जानकारी देने वाला ग्राफ़. फ़ोर्स किए गए रंगों के मोड से ऑप्ट आउट करने के लिए, किसी एलिमेंट पर forced-color-adjust: none; सेट किया जा सकता है. सिर्फ़ कुछ एलिमेंट के लिए ऑप्ट आउट करें. साथ ही, यह भी देखें कि फ़ोर्स किए गए रंगों वाले मोड में कॉन्टेंट अब भी ऐक्सेस किया जा सकता है.

हाई कंट्रास्ट

कुछ लोग, अपने सिस्टम को ज़्यादा कंट्रास्ट का अनुरोध करने के लिए भी सेट कर सकते हैं. prefers-contrast: more मीडिया क्वेरी की मदद से, जवाब में अपनी स्टाइल में बदलाव किया जा सकता है.

हलचल कम करें

उपयोगकर्ता की मोशन कम करने की प्राथमिकता के हिसाब से, prefers-reduced-motion मीडिया क्वेरी का इस्तेमाल करके जवाब दिया जा सकता है. इसका इस्तेमाल अक्सर ऐसे वैकल्पिक ऐनिमेशन उपलब्ध कराने के लिए किया जाता है जिनमें बड़े मूवमेंट नहीं होते. ये मूवमेंट, मिर्गी, वेस्टिबुलर मोशन डिसऑर्डर या माइग्रेन की समस्या वाले लोगों के लिए ट्रिगर हो सकते हैं. ऐनिमेशन का इस्तेमाल करते समय ध्यान रखने वाली बातें लेख में इसके बारे में ज़्यादा पढ़ें.

स्क्रिप्ट तैयार करना

ऐसा हो सकता है कि आपके उपयोगकर्ता, JavaScript बंद करके आपकी साइट पर आएं. ऐसे में, scripting मीडिया क्वेरी का इस्तेमाल करके, अपनी सीएसएस में बदलाव करें, ताकि वे अब भी आपके कॉन्टेंट को ऐक्सेस कर सकें.

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

देखें कि आपको कितना समझ आया

मीडिया फ़ीचर के बारे में अपनी जानकारी की जांच करना