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

मीडिया की सुविधाओं की मदद से, डिवाइसों और प्राथमिकताओं के हिसाब से जवाब देने के लिए उपलब्ध सभी तरीकों की जानकारी.

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

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

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

@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.

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

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

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

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

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

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

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 हो सकती हैं. high की dynamic-range वैल्यू वाली हाई-डेफ़िनिशन स्क्रीन को नए सीएसएस 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. ज़्यादा जानकारी के लिए, इंटरैक्शन पर मॉड्यूल देखें.

प्राथमिकताएं

अलग-अलग तरह की मीडिया क्वेरी मौजूद होती हैं, जिनकी मदद से आप उपयोगकर्ता की पसंद का जवाब दे सकते हैं: prefers-color-scheme, prefers-contrast, और prefers-reduced-motion. ज़्यादा जानकारी के लिए, थीम और सुलभता के मॉड्यूल देखें.

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

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

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

आने वाले समय में मीडिया से जुड़ी और सुविधाएं आने वाली हैं.

मीडिया की forced-colors और inverted-colors सुविधाएं, यह रिपोर्ट करेंगी कि डिवाइस में पाबंदी वाले रंग पटल का इस्तेमाल किया जा रहा है या इन्वर्टेड कलर पटल.

scripting मीडिया की सुविधा का इस्तेमाल करके, JavaScript की उपलब्धता के आधार पर सीएसएस में बदलाव किया जा सकता है.

prefers-reduced-data मीडिया की सुविधा से, उपयोगकर्ताओं को यह बताने की सुविधा मिलती है कि वे सीमित डेटा वाले कनेक्शन का इस्तेमाल कर रहे हैं. इससे, आपके पास छोटी या कम ऐसेट भेजने का विकल्प होगा.

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

जांचें कि आपको कितना समझ आया

मीडिया की सुविधाओं के बारे में अपनी जानकारी को परखें