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?
css
background
internet-explorer-9
gradient
Sapu tangan
sumber
sumber
Jawaban:
Anda masih perlu menggunakan filter milik mereka pada IE9 beta 1.
sumber
Sepertinya saya agak terlambat ke pesta, tapi berikut adalah contoh untuk beberapa browser teratas:
Sumber: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
Catatan: semua browser ini juga mendukung rgb / rgba sebagai pengganti notasi heksadesimal.
sumber
Solusi lintas-browser terbaik adalah
sumber
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.
Cukup unggah ke server Anda dan panggil URL seperti ini:
Ini dapat digunakan bersama dengan gradien CSS3 Anda seperti ini:
Jika Anda perlu menargetkan di bawah IE9, Anda masih dapat menggunakan metode 'filter' milik lama:
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).
sumber
linear-gradient
.Kode yang saya gunakan untuk semua gradien browser:
Anda perlu menentukan ketinggian atau
zoom: 1
menerapkanhasLayout
elemen agar ini berfungsi di IE.Memperbarui:
Berikut adalah versi LESS Mixin (CSS) untuk semua pengguna Anda yang KURANG:
sumber
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 :)
sumber
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).
sumber
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.
sumber
filter
barang - 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/…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).
sumber
Gunakan Gradient Generator - dan semuanya akan sempurna;) http://www.colorzilla.com/gradient-editor/
sumber