การไล่ระดับสีใน Internet Explorer 9

111

ไม่มีใครรู้คำนำหน้าผู้ขายสำหรับการไล่ระดับสีภายใน IE9 หรือเราควรจะยังคงใช้ตัวกรองที่เป็นกรรมสิทธิ์ของพวกเขาอยู่หรือไม่?

สิ่งที่ฉันมีสำหรับเบราว์เซอร์อื่น ๆ คือ:

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 */

เป็นโบนัสไม่มีใครรู้คำนำหน้าผู้ขายของ Opera เช่นกัน?

css  background  internet-explorer-9  gradient 
— ดมกลิ่น
แหล่งที่มา
แม้ว่าฉันจะเลือกคำตอบแล้ว แต่ก็มีความเกี่ยวข้องในเวลานี้เท่านั้น ถ้ามีการเปลี่ยนแปลงมีใครช่วยอัพเดทกระทู้ได้ไหมคะ? ชื่นชมมาก
— Sniffer
โดยสิ้นเชิง ฉันสงสัยว่าตอนนี้ IE 9 จะใช้การไล่ระดับสีเนื่องจากเป็นรุ่นเบต้า
— Paul D.Waite
5
IE9 ไม่รองรับการไล่ระดับสี แต่ IE10 จะ
— Catch22
4
IE เป็นเพียงเบราว์เซอร์ที่น่าสยดสยองไม่สนับสนุนบล็อกแบบอินไลน์ค่าตำแหน่งแตกโดยไม่มีเหตุผลไม่มีการรองรับการไล่ระดับสีช้าเหมือนนรกทั้งหมด ... เริ่มเตือนผู้ใช้ว่าต้องหยุดใช้ IE แทนที่จะเสียของเรา เวลารองรับเบราว์เซอร์มาตรฐานย่อย โดยส่วนตัวแล้วฉันได้หยุดผู้ใช้ IE จากการดูหน้าใด ๆ ของฉันมาหลายปีแล้ว (แนะนำให้พวกเขารับเบราว์เซอร์จริง) และฉันก็ไม่เคยขายขาดเลย หาข้อมูลและคุณจะเห็น IE คิดเป็น <5% ของปริมาณการใช้งานอินเทอร์เน็ตทั้งหมดและ <1% ของยอดขาย ทำไมเราถึงสนับสนุน
12
แดนฉันสนใจว่าตัวเลขของคุณมาจากไหนฉันไม่พบแหล่งข้อมูลเดียวที่ระบุว่า IE เป็น <5% ของการเข้าชม
— Jamie Taylor

คำตอบ:

44

คุณยังคงต้องใช้ตัวกรองที่เป็นกรรมสิทธิ์ของ IE9 beta 1

— Gaurav
แหล่งที่มา
2
อ้างอิงจากcss3please.com IE10 ดูเนื่องจากรองรับการไล่ระดับสี CSS ซึ่งเป็นข่าวดี ...
— Sniffer
css3please.com ช่วยฉันหาวิธีแก้ปัญหาให้ฉัน ขอบคุณ
— redolent
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/Default.html

หมายเหตุ: เบราว์เซอร์เหล่านี้ทั้งหมดยังสนับสนุน rgb / rgba แทนสัญกรณ์ฐานสิบหก

— เควินอาเธอร์
แหล่งที่มา
10
ฉันยังไม่ถือว่า IE10 เป็นเบราว์เซอร์หลัก
— David Murdoch
3
@DavidMurdoch นั้นเป็นความจริงทางเทคนิค แต่มันไม่สมเหตุสมผลที่จะไม่เพิ่มส่วนขยายที่เป็นกรรมสิทธิ์ใน CSS ของคุณเนื่องจากเรารู้ว่ามันจะเป็นอย่างไร ท้ายที่สุด IE10 ถูกกำหนดให้เป็นเบราว์เซอร์หลัก
— thepeer
4
@Robotsushi แม้ว่าจะไม่ตอบคำถามสำหรับ IE9 (คำตอบที่เลือกตอบซึ่งอาจเป็นเหตุผลว่าทำไมจึงถูกเลือก) คำถามนี้อยู่ในหน้าแรกของผลการค้นหา Google สำหรับ "internet explorer css gradients" ดังนั้นจึงไม่มี อันตรายใด ๆ ในการมีสิ่งที่เป็นประโยชน์ที่นี่ตอนนี้ IE10 เกือบพร้อมสำหรับ Windows 7 แล้ว
— Kevin Arthur
Firefox และ Opera เวอร์ชันล่าสุดรองรับมาตรฐาน W3C (ฉันทดสอบบน Firefox 19 และ Opera 12.14 บน Windows 7)
— JayVee
2
เนื่องจากนี่เป็นคำตอบที่ได้รับคะแนนสูงสุดสำหรับคำถามซึ่งกล่าวถึง IE9 จึงควรเพิ่มตัวกรอง: ต่อท้ายเพื่อให้มีการรองรับ IE9
— Joel Coehoorn
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 เพื่อส่งคืนการไล่ระดับสี SVG (เชิงเส้นแนวตั้ง) แทนซึ่งช่วยให้เราสามารถรักษาการออกแบบของเราไว้ในสไตล์ชีตของเราได้

<?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: ฉันเพิ่งได้รับการยืนยัน SVG จะไม่linear-gradientดาวน์โหลดเบราว์เซอร์ที่สนับสนุน
— Jonathan Cross
ฉันสงสัยว่ามีวิธีแคชไฟล์ svg เหล่านี้หรือไม่เมื่อสร้างขึ้นแล้ว
— Mike Kormendy
คำถามที่ชัดเจนยิ่งขึ้นคือการค้นหาว่าประสิทธิภาพเป็นอย่างไรทั้งเวลาและการโหลดของเซิร์ฟเวอร์สำหรับการร้องขอไฟล์แคชเทียบกับการสร้างสตรีมไฟล์ในแต่ละครั้ง
— Mike Kormendy
1
PHP ไม่ควรมีความรู้หรือช่วยในการออกแบบ UI ของคุณ รักษาความต้องการของลูกค้าไว้กับไคลเอนต์
— Alex White
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ไปใช้กับองค์ประกอบเพื่อให้สามารถใช้งานได้ใน IE

ปรับปรุง:

นี่คือเวอร์ชัน LESS Mixin (CSS) สำหรับผู้ใช้ LESS ทั้งหมดที่นั่น:

.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
แหล่งที่มา
ในฐานะผู้ใช้ LESS ฉันกำลังมองหาวิธีที่จะทำให้การไล่ระดับสีทำงานได้ใน IE9 เช่นกัน ฉันพบบทความในบล็อกที่มีรายละเอียดเกี่ยวกับวิธีการสร้าง SVG: blog.philipbrown.id.au/2012/09/…
— James Long
6

ในไม่ช้า Opera จะเริ่มมีบิวด์พร้อมรองรับการไล่ระดับสีเช่นเดียวกับคุณสมบัติ CSS อื่น ๆ

W3C CSS Working Group ยังไม่เสร็จสิ้นด้วย CSS 2.1 พวกคุณรู้ใช่มั้ย? เราตั้งใจว่าจะเสร็จเร็ว ๆ นี้ CSS3 เป็นโมดูลาร์อย่างแม่นยำเพื่อให้เราสามารถย้ายโมดูลไปยังการนำไปใช้งานได้เร็วขึ้นแทนที่จะเป็นข้อมูลจำเพาะทั้งหมด

บริษัท เบราว์เซอร์ทุกแห่งใช้วิธีการวงจรซอฟต์แวร์การทดสอบและอื่น ๆ ที่แตกต่างกัน ดังนั้นกระบวนการต้องใช้เวลา

ฉันแน่ใจว่าผู้อ่านหลายคนรู้ดีว่าหากคุณใช้อะไรก็ตามใน CSS3 คุณกำลังทำสิ่งที่เรียกว่า "การเพิ่มประสิทธิภาพแบบก้าวหน้า" - เบราว์เซอร์ที่ได้รับการสนับสนุนมากที่สุดจะได้รับประสบการณ์ที่ดีที่สุด อีกส่วนหนึ่งคือ "การลดระดับลงอย่างสง่างาม" ซึ่งหมายความว่าประสบการณ์จะเป็นที่ยอมรับ แต่อาจจะไม่ดีที่สุดหรือน่าดึงดูดที่สุดจนกว่าเบราว์เซอร์นั้นจะติดตั้งโมดูลหรือบางส่วนของโมดูลที่เกี่ยวข้องกับสิ่งที่คุณต้องการทำ

สิ่งนี้สร้างสถานการณ์ที่ค่อนข้างแปลกซึ่งน่าเสียดายที่นักพัฒนาส่วนหน้าได้รับความผิดหวังอย่างมากจากเวลาที่ไม่สอดคล้องกันในการนำไปใช้งาน ดังนั้นจึงเป็นความท้าทายที่แท้จริงในด้านใดด้านหนึ่ง - คุณตำหนิ บริษัท เบราว์เซอร์ W3C หรือที่แย่กว่านั้น - ตัวคุณเอง (ความดีรู้ว่าเราไม่สามารถรู้ได้ทั้งหมด!) พวกเราที่ทำงานให้กับ บริษัท เบราว์เซอร์และกลุ่ม W3C สมาชิกตำหนิตัวเอง? คุณ?

ไม่แน่นอน มันเป็นเกมแห่งความสมดุลเสมอและถึงกระนั้นเราก็ไม่ได้เป็นอุตสาหกรรมที่คิดได้ว่าจุดสมดุลนั้นอยู่ตรงไหน นั่นคือความสุขที่ได้ทำงานในเทคโนโลยีวิวัฒนาการ :)

— mollydotcom
แหล่งที่มา
4

ฉันเข้าใจว่า IE9 ยังไม่รองรับการไล่ระดับสี CSS ซึ่งเป็นเรื่องที่น่าเสียดายเพราะรองรับสิ่งใหม่ ๆ ที่ยอดเยี่ยมอื่น ๆ อีกมากมาย

คุณอาจต้องการดูCSS3Pieเป็นวิธีรับ IE ทุกเวอร์ชันเพื่อรองรับคุณสมบัติ CSS3 ที่หลากหลาย (รวมถึงการไล่ระดับสี แต่ยังรวมถึงรัศมีขอบและกรอบเงา) ด้วยความยุ่งยากขั้นต่ำ

ฉันเชื่อว่า CSS3Pie ใช้งานได้กับ IE9 (ฉันได้ลองใช้กับเวอร์ชันก่อนวางจำหน่ายแล้ว แต่ยังไม่ได้ใช้เวอร์ชันเบต้าปัจจุบัน)

— Spudley
แหล่งที่มา
ขอบคุณ Spudley ฉันใช้ CSS3Pie บน IE6 ถึง 8 แต่ฉันหวังว่าจะได้รับจากการใช้งานบน IE9! ฉันมีสไตล์ชีตแยกต่างหากสำหรับแต่ละ IE ที่มีสไตล์ CSS3Pie ของฉันใน IE8 ตราบใดที่การไล่ระดับสีเป็นสิ่งเดียวที่ขาดหายไปจาก CSS3 ที่ฉันใช้อยู่ฉันจะเพิ่มสไตล์ชีทอื่นสำหรับ IE9 โดยไม่ต้องใช้ CSS3Pie หากฉันสามารถหลีกเลี่ยงได้
— Sniffer
ฉันไม่เห็นโพสต์นี้ด้วยซ้ำความเลวของฉัน เพิ่งเขียนคำตอบและโหวตให้ลบด้วยข้อมูลเดียวกัน หมายเหตุ: ระวังปัญหาที่ทราบ: css3pie.com/documentation/known-issues
— NateDSaint
2

ไม่แน่ใจเกี่ยวกับ IE9 แต่ดูเหมือนว่า Opera จะยังไม่รองรับการไล่ระดับสี:

ไม่มี "การไล่ระดับสี" เกิดขึ้นในหน้านั้น

มีบทความที่ยอดเยี่ยมของ Robert Nyman เกี่ยวกับการไล่ระดับสี CSS ที่ทำงานในเบราว์เซอร์ทั้งหมดที่ไม่ใช่ Opera:

ไม่แน่ใจว่าสามารถขยายเพื่อใช้รูปภาพเป็นทางเลือกได้หรือไม่

— พอลดี. ไวต์
แหล่งที่มา
1
นั่นทำให้ฉันประหลาดใจเพราะปกติแล้ว Opera จะอยู่ในระดับแนวหน้าของการนำมาตรฐานไปใช้ ขอบคุณสำหรับคำตอบพอล
— Sniffer
1
ฉันไม่คิดว่าการไล่ระดับสีจะทำให้มันเป็นมาตรฐานได้ ตามที่ฉันเข้าใจกระบวนการนี้คุณสมบัติ CSS ใหม่มักจะถูกนำไปใช้ในเบราว์เซอร์จากนั้นจึงระบุเป็นมาตรฐานในที่สุด ฉันเชื่อว่าทีม WebKit ใช้การไล่ระดับสีใน CSS เป็นครั้งแรก (เว้นแต่คุณจะนับ Microsoft และfilterสิ่งของของพวกเขาซึ่งไม่มีคุณสมบัติเป็น CSS ในหนังสือของฉันจริงๆ) Firefox ได้ติดตามพวกเขาแล้ว แต่ดูเหมือนว่าจะยังไม่มีอะไรในข้อกำหนดร่าง W3C CSS: ดูgoogle.co.uk/…
— Paul D. Waite
2

ในเวอร์ชัน 11 Opera รองรับการไล่ระดับสีเชิงเส้นด้วยคำนำหน้า -o- vendor Chris Mills เขียนบทความ Dev.Opera เกี่ยวกับเรื่องนี้: http://dev.opera.com/articles/view/css3-linear-gradients/

การไล่ระดับสีแบบเรเดียลยังคงอยู่ในผลงาน (ทั้งในข้อมูลจำเพาะและภายใน Opera)

— webinista
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.