CSS मीडिया क्वेरी के लिए IE8 समर्थन

Question

IE8 निम्नलिखित सीएसएस मीडिया क्वेरी का समर्थन नहीं करता है:

@import url("desktop.css") screen and (min-width: 768px);

यदि नहीं, तो लेखन का वैकल्पिक तरीका क्या है? फ़ायरफ़ॉक्स में ठीक काम करता है।

नीचे दिए गए कोड के साथ कोई समस्या?

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);

Comments

उन लोगों के लिए जो मीडिया के साथ इनलाइन css आज़माना चाहते हैं और (.min) .js प्रतिक्रिया का उपयोग इस स्थिति में नहीं करते हैं - ऐसा लगता है कि यह .css फ़ाइलों के लिए काम करता है

— NoWomenNoCry

Answer 1

IE9 से पहले इंटरनेट एक्सप्लोरर संस्करण मीडिया के प्रश्नों का समर्थन नहीं करते हैं ।

यदि आप IE8 उपयोगकर्ताओं के लिए डिज़ाइन को नीचा दिखाना चाहते हैं, तो आपको IE की सशर्त टिप्पणी उपयोगी लग सकती है। इसका उपयोग करके, आप IE 8/7/6 विशिष्ट शैली पत्रक निर्दिष्ट कर सकते हैं जो पिछले नियमों को लिखता है।

उदाहरण के लिए:

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

यह IE8 में एक उत्तरदायी डिजाइन की अनुमति नहीं देगा, लेकिन एक जेएस प्लगइन का उपयोग करने की तुलना में एक सरल और अधिक सुलभ समाधान हो सकता है।

Comments

मैं नहीं देखता कि सशर्त स्टाइलशीट एक उत्तरदायी डिजाइन समस्या को कैसे हल करेगा।

— जेम्स वेस्टगेट

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

— क्लिकरको

मुझे लगता है कि सही उत्तर यह है कि IE8 मीडिया प्रश्नों का समर्थन नहीं करता है । इस उत्तर का कहना है कि यह पहली नज़र में पूरी तरह स्पष्ट नहीं है। बावजूद, मुझे लगा कि इसका समर्थन है और इस जवाब ने मुझे अन्यथा महसूस करने में मदद की।

— जेसन

यह सच है कि यह उत्तर एक संवेदनशील समाधान नहीं है लेकिन मेरे लिए यह एक बहुत बड़ा "BUT" है, तथ्य यह है कि IE8 का उपयोग iPad, या एंड्रॉइड टैबलेट पर नहीं किया जाता है। IE8 का उपयोग XP / Vista पीसी पर ज्यादातर 2003 से 2009 तक किया जा सकता है, मुख्यतः 1024px चौड़ी स्क्रीन। विंडोज़ मोबाइल IE6 + के अंतर्गत है, और IE9 + के तहत Windows Pone। यहां सच्चा सवाल यह है कि क्या IE8 के लिए उत्तरदायी बनाने से खुद को पूछना है कि क्या यह वास्तव में उपयोगी है?

— ग्रीगोएयर डी।

@GregoireD। हाँ यही है। क्योंकि ऐसे लोग हैं जो ज़ूम के साथ वेब पेज देखते हैं। मेरी कंपनी में हम accxibility के लिए 800x600 में 4x ज़ूम के बाद से पृष्ठों को प्रारूपित करते हैं। जो 400px चौड़ाई जैसी स्क्रीन बनाता है। मीडिया-क्वेरी वास्तव में उसके लिए उपयोगी है, आपके द्वारा चुने गए ब्राउज़र के बावजूद (और IE8 शामिल है)।

— अरकाना

Answer 2

css3-mediaqueries-js शायद वही है जो आप ढूंढ रहे हैं: यह स्क्रिप्ट मीडिया के प्रश्नों का अनुकरण करती है। हालाँकि (स्क्रिप्ट की साइट से) यह " @importएड स्टाइलशीट पर काम नहीं करता है (जो आपको प्रदर्शन के कारणों के लिए वैसे भी उपयोग नहीं करना चाहिए)। <link>और <style>तत्वों और तत्वों की मीडिया विशेषता को भी नहीं सुनेंगे "।

एक ही नस में आपके पास सरल रिस्पोंड्स.जेएस है , जो केवल min-widthऔर max-widthमीडिया प्रश्नों को सक्षम करता है।

Comments

इसका जवाब क्यों नहीं दिया गया? मेरे लिए बिल्कुल सही है धन्यवाद। वैसे आपको ओवरहेड के कारण आयात सीएसएस प्रश्नों का उपयोग नहीं करना चाहिए।

— रिचवुन

बिल्कुल सही, मैं क्या देख रहा था!

— सोमदेव

धन्यवाद!! इस जवाब, और response.js, ने मुझे एक समय के लिए 8 में मीडियाक्वायर्स के लिए वर्कअराउंड करने की कोशिश कर बचाया।

— इनगुस्मत

कोई बात नहीं -> .js को .css फ़ाइलों के बाद शामिल किया जाना चाहिए ... xD

— kaljak

रिस्पोंड ने काम किया, लेकिन css3-mediaqueries ने नहीं किया। मुझे लगता है कि इसका कारण यह है कि रिस्पोंड स्वयं सम्‍मिलित है, लेकिन css3-Mediaqueries कुछ jQuery फ़ंक्शंस पर निर्भर करती है जैसे उपयोगकर्ता-एजेंट का पता लगाना और यह फ़ंक्शंस को हटा दिया गया था और (jQuery डॉक्स देखें)।

— एंटोन बोरिट्सकी

Answer 3

सबसे अच्छा समाधान जो मैंने पाया है वह है Respond.js विशेष रूप से यदि आपकी मुख्य चिंता यह सुनिश्चित कर रही है कि IE8 में आपका उत्तरदायी डिज़ाइन काम करता है। मिनट / gzipped होने पर यह 1kb पर बहुत हल्का है और आप केवल IE8 ग्राहकों को इसे लोड करने के लिए सुनिश्चित कर सकते हैं:

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं तो यह अनुशंसित विधि भी है: http://getbootstrap.com/getting-started/#support-ie8-ie9

Answer 4

3.5 के पूर्व IE8 (और निचले संस्करण) और फ़ायरफ़ॉक्स मीडिया क्वेरी का समर्थन नहीं करते हैं। सफारी 3.2 आंशिक रूप से इसका समर्थन करता है।

इन ब्राउज़र में मीडिया क्वेरी समर्थन को जोड़ने के लिए जावास्क्रिप्ट का उपयोग करने वाले कुछ वर्कअराउंड हैं। इन्हें कोशिश करें:

मीडिया क्वेरी jQuery प्लगइन (केवल अधिकतम / मिनट की चौड़ाई से संबंधित है)

css3-mediaqueries-js - एक पुस्तकालय जिसका उद्देश्य गैर-सहायक ब्राउज़रों के लिए मीडिया क्वेरी समर्थन जोड़ना है

Comments

ओके..मैंने सिर्फ css3-mediaqueries.js को अपने पेज में शामिल किया है। फिर भी यह IE में काम नहीं करता है। मीडिया क्वेरी "@import url (" desktop.css ") केवल स्क्रीन और (डिवाइस-चौड़ाई) नहीं है: 768px); " साथ ही "@import url (" desktop.css ") स्क्रीन नहीं और (डिवाइस-चौड़ाई: 768px);"

— Testndtv

यकीन नहीं होता है कि अगर मुझे कुछ अतिरिक्त करने की जरूरत है .. तो स्क्रिप्ट सहित ..

— testndtv

कृपया ध्यान दें कि यह आयातित सीएसएस पर काम नहीं करता है। इसे आज़माएँ: <लिंक rel = "स्टाइलशीट" टाइप = "टेक्स्ट / सीएसएस" मीडिया = "न कि स्क्रीन और (डिवाइस-चौड़ाई: 768px)" href = "desktop.css" />

— फ़राज़ केलहनी

ओह, अच्छा। तो ऐसी बात है। वास्तव में उस मामले में, यह मेरी मदद नहीं कर सकता है, जैसा कि मैं पृष्ठ पर कुछ भी किए बिना कुछ देख रहा हूं..मैं केवल बाहरी रूप से CSS में

— हूं

वह googletrunk css3 js स्क्रिप्ट निर्दिष्ट करती है कि यह केवल सीएसएस स्टाइलशीट के अंदर इस्तेमाल होने वाले मीडियाक्वायरी के साथ काम करता है, बजाय बाहरी रूप से 'केवल स्क्रीन और ....' के। इसका मतलब है कि आपको अपनी स्टाइलशीट को एक में एकीकृत करना होगा और उनके अंदर वही करना होगा जो आप बाहरी रूप से करना चाहते थे: @मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 980px) {

— Capagris

Answer 5

Css3mediaqueries.js परियोजना पृष्ठ से लिया गया।

नोट: @ import'ed स्टाइलशीट पर काम नहीं करता है (जो आपको प्रदर्शन कारणों से वैसे भी उपयोग नहीं करना चाहिए)। तत्वों <link>और <style>तत्वों की मीडिया विशेषता को भी नहीं सुनेंगे ।

Comments

+1 मुझे यह बताने के लिए कि @ आयात स्टाइलशीट पर काम नहीं करता है! मेरे WP बच्चे विषय पर मुझे बहुत समय बचाएं।

— विनीसियस गार्सिया

Answer 6

Css3-mediaqueries-js का उपयोग करने का एक आसान तरीका समापन बॉडी टैग से पहले निम्नलिखित को शामिल करना है:

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script 
   src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->

Answer 7

संपादित उत्तर: IE केवल स्क्रीन को समझता है और आयात मीडिया के रूप में प्रिंट करता है। आयात कथन के साथ आपूर्ति किए गए अन्य सभी CSS के कारण IE8 आयात कथन की अनदेखी करता है। सफारी या मोज़िला जैसे गेको ब्राउज़र में यह समस्या नहीं थी।

Comments

मेरा IE संगतता मोड में नहीं है..इसलिए भी IE के लिए कोई अन्य विकल्प नहीं है। आमतौर पर मैं केवल 768px स्क्रीन डिवाइस को छोड़कर सब कुछ चुनना चाहता हूं ..

— testndtv

आपके द्वारा दिए गए लिंक पर भी चर्चा किए जाने के बाद, मैंने doctype को <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" " w3.org/TR/xhtml1-DTD/xhtml1-transitional के रूप में सेट करने का प्रयास किया। dtd "> ... फिर भी काम नहीं करता है ..

— testndtv

मैं श्योर नहीं हूँ अगर मैं तुम्हें सही कर पाया। स्क्रीन रिज़ॉल्यूशन का पता लगाने के लिए आप जावास्क्रिप्ट का उपयोग कर सकते हैं? CSS के साथ कोई और तरीका नहीं है। क्या आपको लगता है कि आपके पास कोई संबंधित त्रुटि नहीं है, जिसके कारण मंत्री को ओवरराइड करने या अनदेखा करने का कारण है। एक मिला टिप डेवलपर टूलबार है। इसके साथ ही आप pagereloads बिना जीना परीक्षण कर सकते हैं

— एसआरए

बहुत तेजी से क्विक मोड पर स्विच कर रहा है, क्या आपने इसकी जाँच की है? जिससे अवांछित परिणाम भी हो सकते हैं। Quirkmode आपके सिद्धांत को अधिलेखित कर देगा। यह परीक्षण करने के लिए कि आप एक सुपर टिनी प्रोजेक्ट में क्या चाहते हैं, यह जांचने के लिए भी ईश्वर अभ्यास है कि यह संबंधित त्रुटि / परिणाम नहीं है

— sra

ठीक है, कैसे मैंने अब अपडेट किया है ... मेरे पास आम है। और इसके अंदर मैं कहता हूं; ... @import url ("desktop.css") स्क्रीन; @import url ("ipad.css") केवल स्क्रीन और (डिवाइस-चौड़ाई: 768px); सुनिश्चित नहीं है कि यह दृष्टिकोण सही है, लेकिन डेस्कटॉप (IE / FF) के साथ-साथ iPad के लिए भी काम करता है। क्या इस दृष्टिकोण के साथ कुछ समस्या हो सकती है?

— testndtv

Answer 8

IE8 और उसके नीचे मीडिया के प्रश्नों का समर्थन नहीं किया जाता है।

---

एक जावास्क्रिप्ट आधारित वर्कअराउंड

IE8 के लिए समर्थन जोड़ने के लिए, आप कई जेएस समाधानों में से एक का उपयोग कर सकते हैं। उदाहरण के लिए, जवाब केवल निम्न कोड के साथ IE8 के लिए मीडिया क्वेरी समर्थन जोड़ने के लिए जोड़ा जा सकता है:

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries एक अन्य लाइब्रेरी है जो समान कार्य करती है। अपने HTML में उस लाइब्रेरी को जोड़ने के लिए कोड समान होगा:

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

---

वैकल्पिक

यदि आपको JS आधारित समाधान पसंद नहीं है, तो आपको IE <9 केवल स्टाइलशीट जोड़ने पर भी विचार करना चाहिए, जहाँ आप अपने स्टाइलिंग को IE <9 में समायोजित करते हैं। उसके लिए, आपको अपने कोड में निम्न HTML जोड़ना चाहिए:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

---

ध्यान दें :

तकनीकी रूप से यह एक और विकल्प है: IE <9 को लक्षित करने के लिए सीएसएस हैक का उपयोग करना। इसका प्रभाव IE <9 केवल स्टाइलशीट के समान है, लेकिन आपको इसके लिए अलग शैली पत्रक की आवश्यकता नहीं है। मैं इस विकल्प की अनुशंसा नहीं करता हूं, हालांकि, जैसा कि वे अमान्य सीएसएस कोड का उत्पादन करते हैं (जो कि कई कारणों में से एक है, क्योंकि सीएसएस हैक का उपयोग आम तौर पर आज के समय में डूब जाता है)।

Answer 9

Internet Explorer 8 से पहले मीडिया के प्रश्नों का कोई समर्थन नहीं था। लेकिन आपके मामले के आधार पर आप केवल इंटरनेट एक्सप्लोरर 8 और निम्न को लक्षित करने के लिए सशर्त टिप्पणियों का उपयोग करने का प्रयास कर सकते हैं। आपको बस एक उचित सीएसएस फ़ाइलें वास्तुकला का उपयोग करना होगा।

Answer 10

http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

मैंने इस्तेमाल किया @media \0screen {}और यह मेरे लिए वास्तविक IE8 में ठीक काम करता है।

Comments

उस ब्लॉक में परिभाषित शैली नियम केवल IE8 में लागू किए जाएंगे, अन्य ब्राउज़र उन्हें अनदेखा करेंगे ।

— लुका

@ लूका इसके अलावा, यह एक मिनट-चौड़ाई, अधिकतम-चौड़ाई, आदि को निर्दिष्ट करने की अनुमति नहीं देता है

— जॉन सलेगर्स

Answer 11

IE IE9 तक मीडिया क्वेरी समर्थन नहीं जोड़ा। तो IE8 के साथ आप भाग्य से बाहर हैं।