Gradients trong Internet Explorer 9

Có ai biết tiền tố nhà cung cấp cho gradient trong IE9 hoặc chúng tôi vẫn được cho là vẫn đang sử dụng các bộ lọc độc quyền của họ?

Những gì tôi có cho các trình duyệt khác là:

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

Như một phần thưởng, có ai biết tiền tố nhà cung cấp của Opera không?

Bạn vẫn cần sử dụng các bộ lọc độc quyền của họ kể từ phiên bản IE9 beta 1.

Có vẻ như tôi đến bữa tiệc hơi muộn, nhưng đây là ví dụ cho một số trình duyệt hàng đầu:

/* 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%);

Nguồn: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

Lưu ý: tất cả các trình duyệt này cũng hỗ trợ rgb / rgba thay cho ký hiệu thập lục phân.

Giải pháp trình duyệt chéo tốt nhất là

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

IE9 hiện không hỗ trợ CSS3 gradient. Tuy nhiên, đây là một giải pháp thay thế hay bằng cách sử dụng PHP để trả về một gradient SVG (tuyến tính dọc) thay vào đó, cho phép chúng tôi giữ thiết kế của mình trong các stylesheet của chúng tôi.

<?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>

Chỉ cần tải nó lên máy chủ của bạn và gọi URL như sau:

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

Điều này có thể được sử dụng cùng với các gradient CSS3 của bạn như thế này:

.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);
}

Nếu bạn cần nhắm mục tiêu dưới IE9, bạn vẫn có thể sử dụng phương pháp 'bộ lọc' độc quyền cũ:

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

Tất nhiên bạn có thể sửa đổi mã PHP để thêm nhiều điểm dừng hơn trên gradient hoặc làm cho nó phức tạp hơn (gradient xuyên tâm, độ trong suốt, v.v.) nhưng điều này rất tốt cho những gradient tuyến tính (dọc) đơn giản.

Mã tôi sử dụng cho tất cả các gradient của trình duyệt:

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;

Bạn sẽ cần chỉ định chiều cao hoặc zoom: 1áp dụng hasLayoutcho phần tử để phần tử này hoạt động trong IE.

Cập nhật:

Đây là phiên bản ÍT Mixin (CSS) dành cho tất cả các bạn ÍT người dùng ngoài kia:

.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;
}

Opera sẽ sớm bắt đầu cung cấp các bản dựng có hỗ trợ gradient, cũng như các tính năng CSS khác.

Nhóm làm việc CSS của W3C thậm chí còn chưa hoàn thiện với CSS 2.1, các bạn đều biết điều đó, phải không? Chúng tôi dự định sẽ hoàn thành rất sớm. CSS3 được mô-đun hóa chính xác nên chúng tôi có thể chuyển các mô-đun đến quá trình triển khai nhanh hơn thay vì toàn bộ thông số kỹ thuật.

Mỗi công ty trình duyệt sử dụng một phương pháp, kiểm tra chu trình phần mềm khác nhau, v.v. Vì vậy, quá trình này cần có thời gian.

Tôi chắc rằng nhiều người, nhiều độc giả đều biết rằng nếu bạn đang sử dụng bất kỳ thứ gì trong CSS3, bạn đang thực hiện thứ được gọi là "cải tiến liên tục" - các trình duyệt được hỗ trợ nhiều nhất sẽ có được trải nghiệm tốt nhất. Một phần khác của điều đó là "sự xuống cấp dễ dàng" có nghĩa là trải nghiệm sẽ dễ chịu nhưng có lẽ không phải là tốt nhất hoặc hấp dẫn nhất cho đến khi trình duyệt đó đã triển khai mô-đun hoặc các phần của mô-đun có liên quan đến những gì bạn muốn làm.

Điều này tạo ra một tình huống khá kỳ lạ khiến các nhà phát triển front-end vô cùng thất vọng vì: thời gian triển khai không nhất quán. Vì vậy, đó là một thách thức thực sự cho cả hai bên - bạn có đổ lỗi cho các công ty trình duyệt, W3C, hay tệ hơn - cho chính bạn (lòng tốt là chúng ta không thể biết tất cả!) các thành viên tự trách mình? Bạn?

Dĩ nhiên là không. Nó luôn là một trò chơi của sự cân bằng, và cho đến nay, chúng tôi vẫn chưa tìm ra điểm cân bằng thực sự ở đâu. Đó là niềm vui khi làm việc trong công nghệ tiến hóa :)

Tôi hiểu rằng IE9 vẫn sẽ không hỗ trợ CSS gradient. Thật đáng tiếc, bởi vì nó hỗ trợ rất nhiều thứ mới tuyệt vời khác.

Bạn có thể muốn xem xét CSS3Pie như một cách để tất cả các phiên bản của IE hỗ trợ các tính năng CSS3 khác nhau (bao gồm gradient, nhưng cũng bán kính đường viền và bóng hộp) với mức tối thiểu phiền phức.

Tôi tin rằng CSS3Pie hoạt động với IE9 (Tôi đã thử nó trên các phiên bản trước khi phát hành, nhưng chưa có trên phiên bản beta hiện tại).

Không chắc chắn về IE9, nhưng Opera dường như chưa có bất kỳ hỗ trợ gradient nào:

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

Không có sự xuất hiện của "gradient" trên trang đó.

Có một bài viết tuyệt vời của Robert Nyman về cách làm cho các gradient CSS hoạt động trong tất cả các trình duyệt không phải là Opera:

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

Không chắc liệu điều đó có thể được mở rộng để sử dụng hình ảnh làm dự phòng hay không.

Kể từ phiên bản 11, Opera hỗ trợ gradient tuyến tính với tiền tố -o- nhà cung cấp. Chris Mills đã viết một bài báo trên Dev.Opera về nó: http://dev.opera.com/articles/view/css3-linear-gradients/

Các gradient xuyên tâm vẫn đang hoạt động (cả trong thông số kỹ thuật và trong Opera).

Sử dụng Gradient Generator - và mọi thứ sẽ hoàn hảo;) http://www.colorzilla.com/gradient-editor/