यह पता लगाने के लिए कि क्या एसवीजी सीएसएस पृष्ठभूमि समर्थित हैं, मैं आधुनिकज़र का उपयोग कैसे करूं?

Question

जैसा कि सवाल है कि मैं यह पता लगाने के लिए आधुनिकता का उपयोग कैसे करूं कि एसवीजी सीएसएस पृष्ठभूमि समर्थित हैं या नहीं?

.svg #example{} सही तरीका नहीं है क्योंकि विभिन्न ब्राउज़रों के पास svg फ़ाइलों के लिए अलग-अलग समर्थन हैं।

उदाहरण के लिए मॉडर्नइज़र एसवीजी को फ़ायरफ़ॉक्स 3.5 में समर्थित करने की रिपोर्ट करता है हालांकि एसवीजी फाइलें और सीएसएस पृष्ठभूमि छवियों के रूप में समर्थित नहीं हैं।

Answer 1

शुद्ध सीएसएस समाधान के बारे में कैसे? मैं IE8 के साथ इस काम की पुष्टि कर सकता हूं।

E { 
background-image: url('image.png'); 
background-image: none, url('image.svg'), url('image.png'); 
background-size: 100% 100%; 
} 

http://www.broken-links.com/2010/06/14/using-svg-in-backgrounds-with-png-fallback/

या यह अन्य विधि की कोशिश:

E { 
background: transparent url(fallback-image.png) center center no-repeat; 
background-image: linear-gradient(transparent, transparent), url(vector-image.svg); 
} 

http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique

Answer 2

एक विकल्प इनलाइन एसवीजी आधुनिक में विकल्प का उपयोग करने के लिए है। मैं एफएफ 3.6.14 में इस काम की पुष्टि कर सकता हूं। आप अपने आधुनिक निर्माण के हिस्से के रूप में "इनलाइन एसवीजी" निर्णय लेना होगा, और इस तरह के सीएसएस में यह प्रबंधन कर सकते हैं:

.logo { 
    background: url(mahimage.svg); 
    ... 
} 

.no-inlinesvg .logo { 
    background: url(mahimage.png); 
    ... 
} 

या की तरह जावास्क्रिप्ट में:

if (Modernizr.inlinesvg) { 
    ... 
} 
else { 
    .... 
}