Gradien di Internet Explorer 9

Adakah yang tahu awalan vendor untuk gradien dalam IE9 atau apakah kita masih harus menggunakan filter kepemilikan mereka?

Apa yang saya dapatkan untuk browser lain adalah:

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

Sebagai bonus, adakah yang tahu prefiks vendor Opera juga?

Anda masih perlu menggunakan filter milik mereka pada IE9 beta 1.

Sepertinya saya agak terlambat ke pesta, tapi berikut adalah contoh untuk beberapa browser teratas:

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

Sumber: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

Catatan: semua browser ini juga mendukung rgb / rgba sebagai pengganti notasi heksadesimal.

Solusi lintas-browser terbaik adalah

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 saat ini tidak memiliki dukungan gradien CSS3. Namun, berikut adalah solusi solusi yang bagus menggunakan PHP untuk mengembalikan gradien SVG (linier vertikal) sebagai gantinya, yang memungkinkan kita untuk mempertahankan desain kita di lembar gaya kita.

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

Cukup unggah ke server Anda dan panggil URL seperti ini:

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

Ini dapat digunakan bersama dengan gradien CSS3 Anda seperti ini:

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

Jika Anda perlu menargetkan di bawah IE9, Anda masih dapat menggunakan metode 'filter' milik lama:

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

Tentu saja Anda dapat mengubah kode PHP untuk menambahkan lebih banyak stop pada gradien, atau membuatnya lebih canggih (gradien radial, transparansi, dll.) Tetapi ini bagus untuk gradien linier sederhana (vertikal).

Kode yang saya gunakan untuk semua gradien browser:

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;

Anda perlu menentukan ketinggian atau zoom: 1menerapkan hasLayoutelemen agar ini berfungsi di IE.

Memperbarui:

Berikut adalah versi LESS Mixin (CSS) untuk semua pengguna Anda yang KURANG:

.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 akan segera mulai menyediakan build dengan dukungan gradien, serta fitur CSS lainnya.

Kelompok Kerja CSS W3C bahkan belum selesai dengan CSS 2.1, kalian pasti tahu kan? Kami bermaksud untuk segera selesai. CSS3 dimodulasi dengan tepat sehingga kita dapat memindahkan modul ke implementasi lebih cepat daripada keseluruhan spesifikasi.

Setiap perusahaan browser menggunakan metodologi siklus perangkat lunak yang berbeda, pengujian, dan sebagainya. Jadi prosesnya butuh waktu.

Saya yakin banyak, banyak pembaca yang tahu bahwa jika Anda menggunakan apa pun di CSS3, Anda melakukan apa yang disebut "peningkatan progresif" - browser dengan dukungan paling banyak akan mendapatkan pengalaman terbaik. Bagian lain dari itu adalah "degradasi anggun" yang berarti pengalaman akan menyenangkan tetapi mungkin bukan yang terbaik atau paling menarik sampai browser itu menerapkan modul, atau bagian dari modul yang relevan dengan apa yang ingin Anda lakukan.

Ini menciptakan situasi yang cukup aneh yang sayangnya pengembang front-end menjadi sangat frustrasi oleh: waktu implementasi yang tidak konsisten. Jadi, ini adalah tantangan nyata di kedua sisi - apakah Anda menyalahkan perusahaan browser, W3C, atau lebih buruk lagi - diri Anda sendiri (ya ampun, kita tidak bisa mengetahui semuanya!) Lakukan mereka yang bekerja untuk perusahaan browser dan grup W3C anggota menyalahkan diri kita sendiri? Kamu?

Tentu saja tidak. Ini selalu merupakan permainan keseimbangan, dan hingga saat ini, kami sebagai industri belum tahu di mana titik keseimbangan itu sebenarnya. Itulah kegembiraan bekerja dalam teknologi evolusioner :)

Saya memahami bahwa IE9 masih tidak mendukung gradien CSS. Yang memalukan, karena mendukung banyak hal baru yang hebat lainnya.

Anda mungkin ingin melihat CSS3Pie sebagai cara agar semua versi IE mendukung berbagai fitur CSS3 (termasuk gradien, tetapi juga border-radius dan box-shadow) dengan sedikit keributan.

Saya yakin CSS3Pie berfungsi dengan IE9 (saya sudah mencobanya pada versi pra-rilis, tetapi belum pada versi beta saat ini).

Tidak yakin tentang IE9, tetapi Opera tampaknya belum memiliki dukungan gradien:

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

Tidak ada kemunculan "gradien" di halaman itu.

Ada artikel bagus oleh Robert Nyman tentang mendapatkan gradien CSS yang berfungsi di semua browser yang bukan Opera:

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

Tidak yakin apakah itu bisa diperpanjang untuk menggunakan gambar sebagai fallback.

Mulai versi 11, Opera mendukung gradien linier dengan awalan -o- vendor. Chris Mills menulis artikel Dev.Opera tentangnya: http://dev.opera.com/articles/view/css3-linear-gradients/

Gradien radial masih dalam pengerjaan (baik di spesifikasi, dan di dalam Opera).

Gunakan Gradient Generator - dan semuanya akan sempurna;) http://www.colorzilla.com/gradient-editor/