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

उन सभी तरीकों का एक राउंड-अप जिनसे मीडिया सुविधाएं आपको डिवाइसों और प्राथमिकताएं.

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

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

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

@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 मीडिया फ़ीचर की मदद से, उपयोगकर्ता यह बता सकते हैं कि वे सीमित डेटा वाले कनेक्शन का इस्तेमाल कर रहे हैं, ताकि आप छोटे या कम एसेट भेज सकें.

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

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

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