पुराने ब्राउज़र पर 'पृष्ठभूमि-आकार' संपत्ति का समर्थन करें?

Question

क्या कोई तरीका है कि मैं CSS3 'पृष्ठभूमि-आकार' प्रॉपर्टी का उपयोग कर सकता हूं और फिर यह सुनिश्चित करने के लिए कि आधुनिक ब्राउज़र में समर्थित है (विशेष रूप से मैं 'पृष्ठभूमि-आकार: कवर' विकल्प) का उपयोग करना चाहता हूं, तो Modernizr जैसे कुछ का उपयोग करें?

मैंने सीएसएसएफएक्स पर एक नज़र डाली, जिसे मॉडर्निजर वेबसाइट से उल्लिखित किया गया है, लेकिन यह केवल ब्राउज़र के लिए विक्रेता उपसर्ग जोड़ना प्रतीत होता है, जिसके लिए उन्हें आईई 8 जैसे ब्राउजर आकार की संपत्ति का समर्थन करने की बजाय संपत्ति का उपयोग करने की आवश्यकता होती है ।

ने भी CSS3Pie को देखा, लेकिन ऐसा लगता है कि वर्तमान में पृष्ठभूमि-आकार की संपत्ति का समर्थन नहीं करता है।

[2011/11/10 - पुराने ब्राउज़र मैं IE7/8 के मुख्य रूप से सोच रहा हूँ, लेकिन आदर्श मैं FF3.6 कवर करने के लिए चाहते हैं के द्वारा, आदि]

Answer 1

मुझे लगता है कि आप शायद modernizr उपयोग करना चाहते हैं यह जांचने के लिए कि वर्तमान ब्राउज़र में संपत्ति समर्थित है या नहीं। यदि नहीं, तो अपनी साइट/एप्लिकेशन का वैकल्पिक प्रदर्शन पता लगाने का प्रयास करें जो पृष्ठभूमि-आकार की संपत्ति की आवश्यकता के बिना अभी भी अच्छा दिखता है।

बेशक, आप एक और दृष्टिकोण भी आज़मा सकते हैं जिसमें इस संपत्ति को अंतर्निहित div जैसे चित्र (जिसमें आप आकार दे सकते हैं) और इस div को ओवरलैप करने वाली सामग्री शामिल नहीं है। सौभाग्य।

Answer 2

आप सही हैं कि background-size कई पुराने ब्राउज़रों पर समर्थित नहीं है।

इसका सामान्य समाधान उस अतिरिक्त तत्व के पीछे एक अतिरिक्त <div> या <img> तत्व का उपयोग करके अनुकरण करना है जिसे आप पृष्ठभूमि रखना चाहते हैं।

यह अतिरिक्त मार्कअप का उपयोग करके हासिल किया जा सकता है, लेकिन इस समाधान का अर्थ यह है कि आप background-size संपत्ति के बजाय सभी ब्राउज़रों के लिए इसका उपयोग करेंगे। दूसरे शब्दों में, इसका मतलब है पुराने ब्राउज़र के लिए जानबूझ कर अपने कोड को खराब करना, जो आदर्श नहीं है।

यदि आप इसका समर्थन करने वाले ब्राउज़र के लिए सीएसएस प्रॉपर्टी का उपयोग करना चाहते हैं, तो आप ऊपर दिए गए मार्कअप को उत्पन्न करने के लिए कुछ जावास्क्रिप्ट का उपयोग कर सकते हैं, लेकिन केवल तभी आवश्यक हो। इसका मतलब है कि आधुनिक ब्राउज़र खुशी से background-size का उपयोग कर सकते हैं, और केवल पुराने ब्राउज़र ही फ़ॉलबैक का उपयोग करेंगे।

वेब पर उपलब्ध इस के लिए कई जावास्क्रिप्ट समाधान हैं (एक त्वरित Google ने निम्नलिखित को बदल दिया: http://css-tricks.com/766-how-to-resizeable-background-image/ दूसरों के बीच), लेकिन अधिक महत्वपूर्ण बात यह है कि आपको ब्राउजर के आधार पर इसे ट्रिगर करना है।

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

तो आधुनिकइज़र के साथ आप जावास्क्रिप्ट में जांच सकते हैं कि ब्राउज़र background-size का समर्थन करता है या नहीं, और केवल वैकल्पिक जावास्क्रिप्ट फ़ंक्शन चलाता है यदि यह इसका समर्थन नहीं करता है।

if(!Modernizr.backgroundsize) { 
    //do stuff here to simulate the background-size property for older browsers. 
} 

आशा है कि मदद करता है।

Answer 3

सबसे पहले फ़ायरफ़ॉक्स 3.6 के लिए एक आसान फिक्स है।संबंध में एक समाधान

-moz-background-size 

जब मीडिया के प्रश्नों का उपयोग कर:: वहाँ एक विक्रेता उपसर्ग है आप Modernizr जब उन पुराने ब्राउज़र को देख रहे हैं के लिए एक और छवि को लक्षित करने के इस्तेमाल कर सकते हैं, यह एक और ब्राउज़र अनुरोध का मतलब होगा। हालांकि, संभवतः आप प्रत्येक क्वेरी के लिए छोटी छवियां लोड करेंगे जहां स्क्रीन का आकार छोटा हो जाएगा। चूंकि मॉडर्निज़र एक ऐसी स्थिति तैयार करेगा जहां नए अनुरोधों में इन अनुरोधों को अनदेखा कर दिया जाएगा, आप नए ब्राउज़र का उपयोग कर अधिकांश लोगों के लिए सर्वर अनुरोधों पर कटौती करेंगे।

जिज्ञासा से, मैंने उपर्युक्त समाधान की कोशिश की और यह काम किया। मैंने निम्न आधुनिक आकार के वर्गों को लागू किया: .no-backgroundsize गैर पृष्ठभूमि आकार के समर्थन के लिए यानी एक नई छवि में लोड किया गया। अन्य सभी ब्राउज़रों के लिए मैंने कक्षा .backgroundsize जोड़ा और एफएफ के लिए शीर्ष पर उपसर्ग का उल्लेख शामिल किया। यह प्रत्येक मीडिया क्वेरी के लिए .no-background के लिए एक नई छवि के साथ दोहराया जा सकता है। समस्या को हल करने का यह एक तरीका है।

-मैंने इसे 12/15/12 की कोशिश करने के बाद इस पोस्ट को संपादित किया।

Answer 4

आप और कम से पृष्ठभूमि आकार के लिए समर्थन उसके गुण देख सकते हैं: http://www.standardista.com/css3/css3-background-properties

यह सीएसएस का समर्थन करता है IE9 +, Firefox 3.6+, सफारी, क्रोम:

background-size: cover; 
-moz-background-size: cover; 

IE7/8 समर्थन के लिए, caniuse.com सूचियों इस polyfill: https://github.com/louisremi/background-size-polyfill

Answer 5

एक अन्य विकल्प Background Size Polyfill होगा:

.selector { 
    background-size: cover; 
    /* The url is relative to the document, not to the css file! */ 
    /* Prefer absolute urls to avoid confusion. */ 
    -ms-behavior: url(/backgroundsize.min.htc); 
} 

Answer 6

बेस्ट नमूना समर्थन करने के लिए बेहतर:

background-image: url(bg-image.png); 

     -webkit-background-size: 100% 100%;   /* Safari 3.0 - Old Chrome - Old Android */ 
     -moz-background-size: 100% 100%;   /* Gecko 1.9.2 (Firefox 3.6) */ 
      -o-background-size: 100% 100%;   /* Opera 9.5 */ 
       background-size: 100% 100%;   /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */ 

इस न जोड़ें, क्योंकि यह नई फ़ायरफ़ॉक्स संस्करणों में समस्या बना:

-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) 

स्रोत: mozilla.org