नई सीएसएस मीडिया क्वेरी रेंज सिंटेक्स

हम इस पर भरोसा करते हैं सीएसएस मीडिया प्रश्न लक्षित स्थिति के आधार पर तत्वों को चुनने और स्टाइल करने के लिए। वह स्थिति सभी प्रकार की हो सकती है, लेकिन आम तौर पर दो शिविरों में आती है: (1) जिस प्रकार के मीडिया का उपयोग किया जा रहा है, और (2) ब्राउज़र, डिवाइस या यहां तक ​​कि उपयोगकर्ता के वातावरण की एक विशिष्ट विशेषता।

तो, मान लीजिए कि हम एक मुद्रित दस्तावेज़ में कुछ सीएसएस स्टाइल लागू करना चाहते हैं:

@media print {
  .element {
    /* Style away! */
  }
}

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

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

नोटिस and वहाँ पर? यह एक ऑपरेटर है जो हमें बयानों को संयोजित करने की अनुमति देता है। उस उदाहरण में, हमने एक शर्त जोड़ दी है कि मीडिया प्रकार a . है screen और वह यह है min-width सुविधा पर सेट है 30em (या ऊपर)। व्यूपोर्ट आकारों की एक श्रृंखला को लक्षित करने के लिए हम वही काम कर सकते हैं:

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

अब वे शैलियाँ एकल चौड़ाई के बजाय व्यूपोर्ट चौड़ाई की स्पष्ट श्रेणी पर लागू होती हैं!

लेकिन मीडिया क्वेरीज़ लेवल 4 विनिर्देश ने सामान्य गणितीय तुलना ऑपरेटरों का उपयोग करके व्यूपोर्ट चौड़ाई की एक श्रृंखला को लक्षित करने के लिए एक नया सिंटैक्स पेश किया है - जैसे चीजें <, >, तथा = - जो कम कोड लिखते समय वाक्यात्मक रूप से अधिक समझ में आता है।

आइए जानें कि यह कैसे काम करता है।

नए तुलना ऑपरेटर

वह अंतिम उदाहरण इस बात का एक अच्छा उदाहरण है कि कैसे हमने "नकली" श्रेणियों का उपयोग करके शर्तों को मिलाकर किया है and ऑपरेटर। मीडिया क्वेरीज़ स्तर 4 विनिर्देश में बड़ा परिवर्तन यह है कि हमारे पास नए ऑपरेटर हैं जो मूल्यों को संयोजित करने के बजाय तुलना करते हैं:

• < मूल्यांकन करता है कि क्या कोई मान है की तुलना में कम एक और मूल्य
• > मूल्यांकन करता है कि क्या कोई मान है से अधिक से अधिक एक और मूल्य
• = मूल्यांकन करता है कि क्या कोई मान है बराबर दूसरे मूल्य के लिए
• <= मूल्यांकन करता है कि क्या कोई मान है t . से कम या बराबरओ एक और मूल्य
• >= मूल्यांकन करता है कि क्या कोई मान है t . से बड़ा या बराबरओ एक और मूल्य

यहां बताया गया है कि हम एक मीडिया क्वेरी कैसे लिख सकते हैं जो ब्राउजर होने पर शैलियों को लागू करती है 600px चौड़ा या बड़ा:

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

यहां बताया गया है कि यह एक तुलना ऑपरेटर का उपयोग करके एक ही चीज़ को कैसे लिखता है:

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

व्यूपोर्ट चौड़ाई की एक श्रृंखला को लक्षित करना

अक्सर जब हम CSS मीडिया क्वेरीज़ लिखते हैं, तो हम वह बना रहे होते हैं जिसे a . कहा जाता है ब्रेकपाइंट - एक ऐसी स्थिति जहां डिजाइन "टूट जाता है" और इसे ठीक करने के लिए शैलियों का एक सेट लागू किया जाता है। एक डिज़ाइन में ब्रेकप्वाइंट का एक गुच्छा हो सकता है! और वे आम तौर पर दो चौड़ाई के बीच होने वाले व्यूपोर्ट पर आधारित होते हैं: जहां ब्रेकपॉइंट शुरू होता है और जहां ब्रेकपॉइंट समाप्त होता है।

यहां बताया गया है कि हमने इसका उपयोग कैसे किया है and दो ब्रेकपॉइंट मानों को संयोजित करने के लिए ऑपरेटर:

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

जब हम बूलियन को हटाते हैं तो मीडिया क्वेरी लिखना कितना छोटा और आसान होता है, इसका आपको अच्छा अंदाज़ा होने लगता है and नई श्रेणी तुलना सिंटैक्स के पक्ष में ऑपरेटर:

@media (400px <= width <= 1000px) {
  /* etc. */
}

बहुत आसान है, है ना? और यह बिल्कुल स्पष्ट है कि यह मीडिया क्वेरी क्या कर रही है।

ब्राउज़र समर्थन

यह बेहतर मीडिया क्वेरी सिंटैक्स अभी भी इस लेखन के समय अपने शुरुआती दिनों में है और इस समय व्यापक रूप से समर्थित नहीं है क्योंकि यह दृष्टिकोण जोड़ता है min-width और max-width. हम करीब आ रहे हैं, यद्यपि! इस बिंदु पर सफारी एकमात्र प्रमुख होल्डआउट है, लेकिन इसके लिए एक खुला टिकट है जिसका आप अनुसरण कर सकते हैं।

आइए एक उदाहरण देखें

इसके लिए यहां एक लेआउट दिया गया है जो बड़ी स्क्रीन के लिए उपयुक्त है, जैसे डेस्कटॉप:

इस लेआउट में आधार शैलियाँ हैं जो सभी ब्रेकप्वाइंट के लिए सामान्य हैं। लेकिन जैसे-जैसे स्क्रीन संकरी होती जाती है, हम उन शैलियों को लागू करना शुरू करते हैं जो सशर्त रूप से विभिन्न छोटे ब्रेकप्वाइंट पर लागू होती हैं जो आदर्श रूप से मोबाइल फोन तक सभी तरह से टैबलेट के लिए उपयुक्त हैं:

यह देखने के लिए कि क्या हो रहा है, यहां बताया गया है कि दो छोटे ब्रेकप्वाइंट के बीच लेआउट कैसे प्रतिक्रिया करता है। छिपी हुई एनएवी सूची प्रदर्शित होने के साथ-साथ title में main में बढ़ जाता है font-size.

यह परिवर्तन तब शुरू होता है जब व्यूपोर्ट के परिवर्तन एक मीडिया की शर्तों से दूसरे मीडिया की स्थितियों से मेल खाते हैं:

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

हमने कुछ अवधारणाओं को जोड़ा है जिन्हें हमने कवर किया है! हम a . वाले उपकरणों को लक्षित कर रहे हैं screen मीडिया प्रकार, यह मूल्यांकन करना कि क्या व्यूपोर्ट की चौड़ाई न्यू मीडिया फीचर रेंज सिंटैक्स का उपयोग करके एक विशिष्ट मूल्य से अधिक या बराबर है, और दो स्थितियों को एक साथ जोड़ना and ऑपरेटर.

ठीक है, तो यह नीचे दिए गए मोबाइल उपकरणों के लिए बहुत अच्छा है 768px और के बराबर या उससे अधिक के अन्य उपकरणों के लिए 768px. लेकिन उस डेस्कटॉप लेआउट के बारे में क्या... हम वहां कैसे पहुंचें?

जहाँ तक लेआउट जाता है:

• RSI main तत्व 12-स्तंभ ग्रिड बन जाता है।
• छवि पर एक बटन प्रदर्शित होता है।
• का आकार .title तत्व का फ़ॉन्ट छवि को बढ़ाता है और ओवरलैप करता है।

यह मानते हुए कि हमने अपना होमवर्क कर लिया है और यह निर्धारित किया है कि वे परिवर्तन कहाँ होने चाहिए, हम उन शैलियों को लागू कर सकते हैं जब व्यूपोर्ट मेल खाता है width उस विराम बिंदु के लिए शर्त। हम यह कहने जा रहे हैं कि ब्रेकप्वाइंट पर है 1000px:

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

इसके साथ एक नाटक करें:

नए सिंटैक्स को समझना क्यों आसान है

निचली पंक्ति: तुलना ऑपरेटर को अलग करना आसान है (उदाहरण के लिए width >= 320px) की तुलना में इसके बीच अंतर बताना है min-width और max-width का उपयोग and ऑपरेटर। बीच की बारीकियों को हटाकर min- और max-, हमारे पास एक सिंगल है width साथ काम करने के लिए पैरामीटर और ऑपरेटर हमें बाकी बताते हैं।

उन वाक्यविन्यासों के दृश्य अंतरों से परे, वे कुछ अलग चीजें भी कर रहे हैं। का उपयोग करते हुए min- और max- गणितीय तुलना ऑपरेटरों का उपयोग करने के बराबर है:

• max-width के बराबर है <= ऑपरेटर (जैसे (max-width: 320px) के समान है (width <= 320px)).
• min-width के बराबर है >= ऑपरेटर (जैसे (min-width: 320px) के समान है (width >= 320px)).

ध्यान दें कि न तो के बराबर है > or < ऑपरेटरों।

आइए सीधे मीडिया क्वेरीज़ लेवल 4 विनिर्देश से एक उदाहरण लेते हैं जहां हम ब्रेकपॉइंट के आधार पर विभिन्न शैलियों को परिभाषित करते हैं 320px व्यूपोर्ट चौड़ाई में . का उपयोग कर min-width और max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

दोनों मीडिया क्वेरी उस स्थिति से मेल खाती हैं जब व्यूपोर्ट की चौड़ाई बराबर होती है 320px. यह ठीक वैसा नहीं है जैसा हम चाहते हैं। हम चाहते हैं भी एक ही समय में दोनों के बजाय उन स्थितियों में से एक। उस निहित परिवर्तन से बचने के लिए, हम क्वेरी के आधार पर एक पिक्सेल जोड़ सकते हैं min-width:

@media (max-width: 320px){ /* styles for viewports = 321px */ }

हालांकि यह सुनिश्चित करता है कि व्यूपोर्ट की चौड़ाई होने पर शैलियों के दो सेट एक साथ लागू नहीं होते हैं 320px, किसी भी व्यूपोर्ट की चौड़ाई जो बीच में आती है 320px और 321px एक सुपर छोटे क्षेत्र में परिणाम होगा जहां किसी भी क्वेरी में कोई भी शैली लागू नहीं होती है - एक अजीब "अस्थिर सामग्री का फ्लैश" स्थिति।

एक समाधान दूसरे तुलना पैमाने के मान (दशमलव बिंदु के बाद की संख्या) को तक बढ़ाना है 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

लेकिन यह मूर्खतापूर्ण और अत्यधिक जटिल होता जा रहा है। इसलिए न्यू मीडिया फीचर रेंज सिंटैक्स एक अधिक उपयुक्त तरीका है:

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

ऊपर लपेटकर

ओह, हमने सीएसएस मीडिया क्वेरीज़ में व्यूपोर्ट चौड़ाई रेंज को लक्षित करने के लिए नए सिंटैक्स पर बहुत सारी जमीन को कवर किया है। अब जबकि मीडिया क्वेरीज़ स्तर 4 विनिर्देशन ने सिंटैक्स पेश कर दिया है और इसे फ़ायरफ़ॉक्स और क्रोमियम ब्राउज़रों में अपनाया गया है, हम नए तुलना ऑपरेटरों का उपयोग करने में सक्षम होने के करीब पहुंच रहे हैं और उन्हें अन्य रेंज मीडिया सुविधाओं के साथ जोड़ रहे हैं। width, जैसे height और aspect-ratio

और यह उन नई विशेषताओं में से एक है जिसे स्तर 4 विनिर्देशन के साथ पेश किया गया है उपयोगकर्ता वरीयताओं के आधार पर हम प्रश्नों का समूह बना सकते हैं. बात यहीं खत्म नहीं होती! इसकी जाँच पड़ताल करो सीएसएस मीडिया प्रश्नों के लिए पूरी गाइड की एक झलक पाने के लिए मीडिया प्रश्न स्तर 5 में क्या शामिल किया जा सकता है.