Gradien di Internet Explorer 9


111

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?


Meskipun saya telah memilih jawaban - ini hanya relevan untuk saat ini. Jika ini berubah, dapatkah seseorang memperbarui utas? Sangat dihargai.
Sniffer

Sama sekali. Saya ragu IE 9 akan menerapkan gradien sekarang, karena dalam versi beta.
Paul D. Waite

5
IE9 tidak mendukung gradien tetapi IE10 akan mendukungnya.
Tonton

4
IE hanyalah browser yang mengerikan, tidak mendukung blok inline, nilai posisi rusak tanpa alasan, tidak ada dukungan gradien, lambat sekali ... Mari kita semua mulai memperingatkan pengguna bahwa mereka harus berhenti menggunakan IE daripada membuang-buang waktu mendukung browser sub standar. Secara pribadi saya telah menghentikan pengguna IE untuk melihat halaman saya selama bertahun-tahun sekarang (mengarahkan mereka untuk mendapatkan browser yang sebenarnya) dan saya tidak pernah kehilangan penjualan. Lakukan penelitian dan Anda akan melihat akun IE untuk <5% dari semua lalu lintas internet dan <1% dari penjualan. Mengapa kami mendukungnya?

12
Dan, saya tertarik dari mana asal nomor Anda, saya tidak dapat menemukan satu sumber pun yang menyatakan bahwa IE <5% lalu lintas.
Jamie Taylor

Jawaban:


44

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


2
Menurut css3please.com , IE10 terlihat karena mendukung gradien CSS, yang merupakan kabar baik ...
Sniffer

css3please.com membantu saya menemukan solusi untuk saya. Terima kasih
harum

57

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.


10
Saya belum menganggap IE10 sebagai browser utama.
David Murdoch

3
@DavidMurdoch itu benar secara teknis, tetapi tidak masuk akal untuk tidak menambahkan ekstensi kepemilikan ke CSS Anda, karena kami tahu apa itu nantinya. Bagaimanapun, IE10 ditakdirkan untuk menjadi browser utama.
thepeer

4
@Robotsushi meskipun tidak menjawab pertanyaan untuk IE9 (jawaban yang dipilih menjawab, mungkin itulah mengapa dipilih), pertanyaan ini ada di halaman pertama hasil Google untuk "gradien css penjelajah internet," jadi tidak ada ada salahnya memiliki sesuatu yang berguna di sini sekarang karena IE10 hampir siap untuk Windows 7.
Kevin Arthur

Versi terbaru Firefox dan Opera mendukung standar W3C. (Saya menguji di Firefox 19 dan Opera 12.14 di Windows 7)
JayVee

2
Karena ini adalah jawaban pilihan teratas untuk pertanyaan, yang membahas IE9, ini harus menambahkan filter: di akhir sehingga menyertakan dukungan IE9.
Joel Coehoorn

46

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

37

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


Solusi elegan. FYI: Saya baru saja mengonfirmasi bahwa SVG tidak diunduh untuk browser yang mendukung linear-gradient.
Jonathan Cross

Saya ingin tahu apakah ada cara untuk menyimpan file svg ini setelah dibuat.
Mike Kormendy

Pertanyaan yang lebih kuat adalah mencari tahu apa kinerja pada waktu dan beban server untuk meminta file cache vs. menghasilkan aliran file setiap saat.
Mike Kormendy

1
PHP seharusnya tidak memiliki pengetahuan atau bantuan dalam desain UI Anda. Pertahankan kebutuhan klien pada klien.
Alex White

11

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

Sebagai pengguna KURANG, saya mencari cara untuk membuat gradien berfungsi di IE9 juga. Saya menemukan artikel blog yang merinci cara menghasilkan SVG: blog.philipbrown.id.au/2012/09/…
James Long

6

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 :)


4

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


Terima kasih Spudley. Saya menggunakan CSS3Pie di IE6 hingga 8, tetapi saya berharap untuk tidak menggunakannya di IE9! Saya punya stylesheet terpisah untuk setiap IE dengan gaya CSS3Pie saya di IE8. Selama gradien adalah satu-satunya hal yang hilang dari CSS3 yang saat ini saya gunakan, saya akan menambahkan stylesheet lain untuk IE9 tanpa menggunakan CSS3Pie jika saya bisa lolos begitu saja.
Sniffer

Saya bahkan tidak melihat posting ini, saya buruk. Baru saja menulis jawaban dan memilih untuk menghapusnya dengan info yang sama. Catatan: Waspadalah dengan masalah yang diketahui: css3pie.com/documentation/known-issues
NateDSaint

2

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

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:

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


1
Itu mengejutkan saya, karena Opera biasanya berada di garis depan dalam menerapkan standar. Terima kasih atas jawabannya, Paul.
Sniffer

1
Saya tidak berpikir gradien telah membuatnya menjadi standar. Seperti yang saya pahami prosesnya, fitur CSS baru cenderung diimplementasikan di browser, kemudian ditetapkan dalam standar. Saya yakin tim WebKit pertama kali menerapkan gradien dalam CSS (kecuali Anda menghitung Microsoft dan filterbarang - barangnya, yang tidak benar-benar memenuhi syarat sebagai CSS dalam buku saya). Firefox sekarang telah mengikuti mereka, tetapi tampaknya belum ada apa pun dalam spesifikasi draf CSS W3C: lihat google.co.uk/…
Paul D. Waite


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.