इंटरनेट एक्सप्लोरर 9 में स्नातक

111

क्या किसी को आईई 9 के भीतर ग्रेडिएंट्स के लिए वेंडर उपसर्ग पता है या क्या हम अभी भी अपने प्रोपरेट्री फिल्टर का उपयोग करने वाले हैं?

अन्य ब्राउज़रों के लिए मुझे जो मिला है वह है:

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

एक बोनस के रूप में किसी को ओपेरा के विक्रेता उपसर्ग के रूप में अच्छी तरह से जानता है?

— रूमाल
स्रोत

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

— स्निफर

पूरी तरह से। मुझे संदेह है कि IE 9 अब ग्रेडिएंट लागू करेगा, क्योंकि यह बीटा में है।

— पॉल डी। वेट

5

IE9 ग्रेडिएंट का समर्थन नहीं करता है लेकिन IE10 करेगा।

— कैच

4

IE सिर्फ एक भयानक ब्राउज़र है सब एक साथ, इनलाइन ब्लॉक का समर्थन नहीं करता है, स्थिति मान बिना किसी कारण के टूटता है, कोई ढाल समर्थन नहीं है, सभी नरक के रूप में धीमा है ... चलो सभी उपयोगकर्ताओं को चेतावनी देना शुरू करते हैं कि उन्हें हमारे बर्बाद करने के बजाय IE का उपयोग बंद करने की आवश्यकता है समय एक उप मानक ब्राउज़र का समर्थन करता है। व्यक्तिगत रूप से मैं वर्षों से IE उपयोगकर्ताओं को मेरे किसी भी पेज को देखने से रोक रहा हूं (प्रत्यक्ष ब्राउज़र प्राप्त करने के लिए उन्हें निर्देशित करें) और मैंने कभी भी बिक्री नहीं खोई है। कुछ शोध करें और आप सभी इंटरनेट ट्रैफ़िक के <5% और बिक्री के 1% के लिए IE खाते देखेंगे। हम इसका समर्थन क्यों कर रहे हैं?

12

Dan, मुझे रुचि होगी कि आपके नंबर कहां से आ रहे हैं, मुझे एक भी स्रोत नहीं मिल रहा है जिसमें कहा गया है कि IE <5% ट्रैफ़िक है।

— जॅमी टेलर

44

आपको अभी भी IE9 बीटा 1 के रूप में उनके मालिकाना फिल्टर का उपयोग करने की आवश्यकता है।

— गौरव
स्रोत

2

Css3please.com के अनुसार , IE10 सीएसएस ग्रेडिएंट्स को सपोर्ट करने के कारण दिखता है, जो अच्छी खबर है ...

— स्निफर

css3please.com ने मुझे मेरा समाधान खोजने में मदद की। धन्यवाद

— सुगन्धित

57

ऐसा लगता है कि मैं पार्टी में थोड़ी देर से हूँ, लेकिन यहाँ कुछ शीर्ष ब्राउज़रों के लिए एक उदाहरण है:

/* IE10 */ 
background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #444444 0%, #999999 100%);

स्रोत: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Definmail

नोट: ये सभी ब्राउज़र हेक्साडेसिमल नोटेशन के स्थान पर आरजीबी / आरजीबीए का भी समर्थन करते हैं।

— केविन आर्थर
स्रोत

10

मैं IE10 को अभी तक एक प्रमुख ब्राउज़र नहीं मानूंगा।

— डेविड मर्डोक

3

@DavidMurdoch यह सच में सच है, लेकिन यह समझ में नहीं आता है कि आपके सीएसएस में प्रोप्रेटरी एक्सरसाइज को नहीं जोड़ा जाए, क्योंकि हम जानते हैं कि यह क्या होगा। आखिरकार, IE10 एक प्रमुख ब्राउज़र बनने के लिए नियत है।

— thepeer

4

@Robotsushi हालांकि यह IE9 के लिए सवाल का जवाब नहीं देता है (चयनित जवाब करता है, जो शायद इसलिए इसे चुना गया था), यह सवाल "इंटरनेट एक्सप्लोरर सीएसएस ढ़ालने वालों" के लिए Google परिणामों के पहले पृष्ठ पर है, इसलिए ऐसा नहीं है यहाँ कुछ उपयोगी होने में कोई बुराई नहीं है कि IE10 विंडोज 7 के लिए लगभग तैयार है

— केविन आर्थर

फ़ायरफ़ॉक्स और ओपेरा के नवीनतम संस्करण W3C मानक का समर्थन करते हैं। (मैंने विंडोज 7 पर फ़ायरफ़ॉक्स 19 और ओपेरा 12.14 पर परीक्षण किया)

— जेवीवी

2

चूंकि यह प्रश्न के लिए शीर्ष-मतदान उत्तर है, जो IE9 को संबोधित करता है, इसे फ़िल्टर को जोड़ना चाहिए: अंत तक ताकि इसमें IE8 समर्थन शामिल हो।

— जोएल कोएहॉर्न

46

सबसे अच्छा क्रॉस-ब्राउज़र समाधान है

background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);/*For IE10*/
background: linear-gradient(#fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 
height: 1%;/*For IE7*/

— Goksel
स्रोत

37

IE9 में वर्तमान में CSS3 ढाल समर्थन का अभाव है। हालांकि, यहां PHP का उपयोग करके एसवीजी (वर्टिकल लीनियर) ग्रेडिएंट को वापस करने के लिए एक अच्छा वर्कअराउंड सॉल्यूशन दिया गया है, जो हमें अपने स्टाइलशीट में अपना डिजाइन रखने की अनुमति देता है।

<?php

$from_stop = isset($_GET['from']) ? $_GET['from'] : '000000';
$to_stop = isset($_GET['to']) ? $_GET['to'] : '000000';

header('Content-type: image/svg+xml; charset=utf-8');

echo '<?xml version="1.0"?>
';

?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#<?php echo $from_stop; ?>" stop-opacity="1"/>
            <stop offset="100%" stop-color="#<?php echo $to_stop; ?>" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="url(#linear-gradient)"/>
</svg>

बस इसे अपने सर्वर पर अपलोड करें और URL को ऐसे ही कॉल करें:

gradient.php?from=f00&to=00f

इसका उपयोग आपके CSS3 ग्रेडिएंट के साथ संयोजन के रूप में किया जा सकता है:

.my-color {
    background-color: #f00;
    background-image: url(gradient.php?from=f00&to=00f);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
    background-image: -webkit-linear-gradient(top, #f00, #00f);
    background-image: -moz-linear-gradient(top, #f00, #00f);
    background-image: linear-gradient(top, #f00, #00f);
}

यदि आपको IE9 से नीचे लक्ष्य करने की आवश्यकता है, तो आप अभी भी पुराने मालिकाना 'फ़िल्टर' विधि का उपयोग कर सकते हैं:

.ie7 .my-color, .ie8 .my-color {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}

बेशक आप ग्रेडिएंट पर अधिक स्टॉप जोड़ने के लिए PHP कोड में संशोधन कर सकते हैं, या इसे और अधिक परिष्कृत (रेडियल ग्रेडिएंट्स, पारदर्शिता आदि) कर सकते हैं, लेकिन यह उन सरल (वर्टिकल) लीनियर ग्रेडिएंट्स के लिए बहुत अच्छा है।

— Neave
स्रोत

सुरुचिपूर्ण समाधान। FYI करें: मैंने अभी पुष्टि की है कि एसवीजी ब्राउज़रों के समर्थन के लिए डाउनलोड नहीं किया गया है linear-gradient।

— जोनाथन क्रॉस

मुझे आश्चर्य है कि अगर वे बनाने के बाद इन svg फ़ाइलों को कैश करने का एक तरीका है।

— माइक कॉर्मेंडी

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

— माइक कोरमेन्डी

1

PHP को आपके UI डिज़ाइन में कभी भी ज्ञान या मदद नहीं करनी चाहिए। क्लाइंट पर क्लाइंट की जरूरत का ध्यान रखें।

— एलेक्स व्हाइट

11

कोड मैं सभी ब्राउज़र ग्रेडिएंट के लिए उपयोग करता हूं:

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

आईई में काम करने के लिए आपको एक ऊंचाई निर्दिष्ट करने या तत्व zoom: 1को लागू hasLayoutकरने की आवश्यकता होगी ।

अपडेट करें:

यहाँ आप सभी उपयोगकर्ताओं के लिए एक कम मिश्रण (सीएसएस) संस्करण है:

.gradient(@start, @end) {
    background: mix(@start, @end, 50%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -webkit-linear-gradient(@start, @end);
    background: -moz-linear-gradient(top, @start, @end);
    background: -ms-linear-gradient(@start, @end);
    background: -o-linear-gradient(@start, @end);
    background: linear-gradient(@start, @end);
    zoom: 1;
}

— Blowsie
स्रोत

एक कम उपयोगकर्ता के रूप में, मैं IE9 में ग्रेडिएंट काम करने के लिए एक तरह से शिकार कर रहा था। मुझे एक ब्लॉग लेख मिला जिसमें लिखा गया था कि SVG कैसे उत्पन्न करें: blog.philipbrown.id.au/2012/09/…

— James Long

6

ओपेरा जल्द ही ढाल समर्थन के साथ-साथ अन्य सीएसएस सुविधाओं के साथ उपलब्ध होना शुरू कर देगा।

W3C CSS वर्किंग ग्रुप CSS 2.1 के साथ भी समाप्त नहीं हुआ है, आपको पता है कि, है ना? हम बहुत जल्द समाप्त होने का इरादा रखते हैं। CSS3 को ठीक प्रकार से संशोधित किया जाता है, ताकि हम संपूर्ण युक्ति के बजाय तेजी से कार्यान्वयन के माध्यम से मॉड्यूल स्थानांतरित कर सकें।

हर ब्राउज़र कंपनी एक अलग सॉफ्टवेयर साइकिल पद्धति, परीक्षण, और इसी तरह का उपयोग करती है। इसलिए प्रक्रिया में समय लगता है।

मुझे यकीन है कि बहुत से, कई पाठकों को अच्छी तरह से पता है कि यदि आप CSS3 में कुछ भी उपयोग कर रहे हैं, तो आप "प्रगतिशील वृद्धि" क्या कह रहे हैं - सबसे अधिक समर्थन वाले ब्राउज़र को सबसे अच्छा अनुभव मिलता है। इसका दूसरा भाग "ग्रेसफुल डिग्रेडेशन" है, जिसका अर्थ यह है कि अनुभव सहमत होगा, लेकिन शायद सबसे अच्छा या सबसे आकर्षक तब तक नहीं होगा जब तक कि उस ब्राउज़र ने मॉड्यूल, या मॉड्यूल के कुछ हिस्सों को लागू नहीं कर दिया हो, जो आप करना चाहते हैं।

यह काफी विषम स्थिति पैदा करता है कि दुर्भाग्य से सामने वाले देवता बेहद निराश हो जाते हैं: कार्यान्वयन पर असंगत समय। तो यह दोनों तरफ एक वास्तविक चुनौती है - क्या आप ब्राउज़र कंपनियों, W3C, या इससे भी बदतर अभी तक को दोषी ठहराते हैं - अपने आप को (अच्छाई जानता है कि हम यह सब नहीं जान सकते!) हम में से जो एक ब्राउज़र कंपनी और W3C समूह के लिए काम कर रहे हैं! सदस्य खुद को दोषी मानते हैं? आप?

बिलकूल नही। यह हमेशा संतुलन का खेल है, और अभी तक, हम एक उद्योग के रूप में नहीं पता लगा है कि संतुलन का वह बिंदु वास्तव में कहां है। कि विकासवादी तकनीक में काम करने की खुशी है :)

— mollydotcom
स्रोत

4

मैं समझता हूँ कि IE9 अभी भी CSS ढ़ाल का समर्थन नहीं करेगा। जो एक शर्म की बात है, क्योंकि यह अन्य महान नए सामान के भार का समर्थन कर रहा है।

आप विभिन्न CSS3 सुविधाओं (ग्रेडिएंट सहित, लेकिन सीमा-त्रिज्या और बॉक्स-छाया) के साथ न्यूनतम उपद्रव का समर्थन करने के लिए IE के सभी संस्करणों को प्राप्त करने के तरीके के रूप में CSS3Pie में देखना चाह सकते हैं ।

मेरा मानना है कि CSS3Pie IE9 के साथ काम करता है (मैंने इसे पूर्व-रिलीज़ संस्करणों पर आज़माया है, लेकिन वर्तमान बीटा पर अभी तक नहीं)।

— Spudley
स्रोत

धन्यवाद Spudley। मैं IE6 से 8 पर CSS3Pie का उपयोग कर रहा हूं, लेकिन मुझे IE9 पर इसका उपयोग करने से दूर होने की उम्मीद थी! मैं IE8 में अपने CSS3Pie शैलियों के साथ प्रत्येक IE के लिए एक अलग स्टाइलशीट मिला है। जब तक ग्रेडिएंट सीएसएस 3 से गायब एकमात्र चीज है जिसका मैं वर्तमान में उपयोग करता हूं, मैं IE3 के लिए CSS3Pie का उपयोग किए बिना एक और स्टाइलशीट जोड़ूंगा, अगर मैं इसके साथ भाग सकता हूं।

— स्निफर

मैंने इस पोस्ट को नहीं देखा, मेरा बुरा। बस एक उत्तर लिखा और उसी जानकारी के साथ इसे हटाने के लिए मतदान किया। नोट: ज्ञात मुद्दों से सावधान रहें: css3pie.com/documentation/ogn-issues

— NateDSaint

2

IE9 के बारे में निश्चित नहीं है, लेकिन ओपेरा के पास अभी तक कोई भी धीमे समर्थन नहीं है:

http://www.opera.com/docs/specs/presto26/#css

उस पृष्ठ पर "ढाल" की कोई घटना नहीं है।

रॉबर्ट Nyman द्वारा उन सभी ब्राउज़रों में काम करने वाले सीएसएस ग्रेडिएटर्स पर शानदार लेख है जो ओपेरा नहीं हैं:

http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

निश्चित नहीं है कि अगर एक छवि को एक कमबैक के रूप में उपयोग करने के लिए बढ़ाया जा सकता है।

— पॉल डी। वेटे
स्रोत

1

यह मुझे आश्चर्यचकित करता है, क्योंकि आमतौर पर ओपेरा मानकों को लागू करने में सबसे आगे होते हैं। उत्तर के लिए धन्यवाद पॉल।

— स्निफर

1

मुझे नहीं लगता कि ग्रेडिएंट ने इसे अभी तक एक मानक में बनाया है। जैसा कि मैं इस प्रक्रिया को समझता हूं, नई सीएसएस विशेषताएं एक ब्राउज़र में कार्यान्वित की जाती हैं, फिर अंततः एक मानक में निर्दिष्ट होती हैं। मेरा मानना है कि वेबकिट टीम ने पहले सीएसएस में ग्रेडिएंट लागू किया (जब तक कि आप माइक्रोसॉफ्ट और उनके filterसामान की गिनती नहीं करते , जो वास्तव में मेरी पुस्तक में सीएसएस के रूप में योग्य नहीं है)। फ़ायरफ़ॉक्स ने अब उनका अनुसरण किया है, लेकिन अभी तक W3C CSS ड्राफ्ट कल्पना में कुछ भी नहीं लगता है: google.co.uk/…

— पॉल डी। वेट

2

संस्करण 11 के रूप में, ओपेरा -o- विक्रेता उपसर्ग के साथ रैखिक ग्रेडिएंट का समर्थन करता है। क्रिस मिल्स ने इसके बारे में एक देव.ऑर्पा लेख लिखा: http://dev.opera.com/articles/view/css3-linear-gradients/

रेडियल ग्रेडिएंट अभी भी काम करता है (दोनों कल्पना में, और ओपेरा के भीतर)।

— webinista
स्रोत

1

एक ग्रेडिएंट जेनरेटर का उपयोग करें - और सब कुछ सही होगा;) http://www.colorzilla.com/gradient-editor/

— जूल्स
स्रोत