Internet Explorer 9'daki Degradeler

IE9'daki gradyanlar için satıcı önekini bilen var mı yoksa hala özel filtrelerini kullanıyor olmamız mı gerekiyor?

Diğer tarayıcılar için sahip olduğum şey:

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

Bonus olarak, Opera'nın satıcı önekini de bilen var mı?

IE9 beta 1'den itibaren yine de özel filtrelerini kullanmanız gerekir.

Görünüşe göre partiye biraz geç kaldım, ancak işte en iyi tarayıcılardan bazıları için bir örnek:

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

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

Not: Bu tarayıcıların tümü, onaltılık gösterim yerine rgb / rgba'yı da destekler.

En iyi tarayıcılar arası çözüm,

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 şu anda CSS3 gradyan desteğinden yoksundur. Bununla birlikte, tasarımımızı stil sayfalarımızda tutmamızı sağlayan, bunun yerine bir SVG (dikey doğrusal) gradyan döndürmek için PHP'yi kullanan güzel bir geçici çözüm.

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

Basitçe sunucunuza yükleyin ve URL'yi şöyle arayın:

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

Bu, aşağıdaki gibi CSS3 gradyanlarınızla birlikte kullanılabilir:

.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'un altında hedeflemeniz gerekirse, yine de eski tescilli 'filtre' yöntemini kullanabilirsiniz:

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

Elbette, eğime daha fazla durak eklemek için PHP kodunu değiştirebilir veya daha karmaşık hale getirebilirsiniz (radyal gradyanlar, şeffaflık vb.), Ancak bu, bu basit (dikey) doğrusal gradyanlar için harikadır.

Tüm tarayıcı gradyanları için kullandığım kod:

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;

Bunun IE'de çalışması için bir yükseklik belirtmeniz veya öğeye zoom: 1başvurmanız hasLayoutgerekir.

Güncelleme:

İşte tüm LESS kullanıcıları için bir LESS Mixin (CSS) sürümü:

.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 yakında gradyan desteğinin yanı sıra diğer CSS özellikleriyle kullanılabilir yapılara sahip olmaya başlayacak.

W3C CSS Çalışma Grubu, CSS 2.1 ile bitmedi bile, bunu biliyorsunuz, değil mi? Çok yakında bitirmeyi planlıyoruz. CSS3 tam olarak modülerleştirilmiştir, böylece modülleri uygulamaya tam bir spesifikasyondan daha hızlı taşıyabiliriz.

Her tarayıcı şirketi, farklı bir yazılım döngüsü metodolojisi, testi vb. Kullanır. Yani süreç zaman alıyor.

Eminim pek çok okuyucu, CSS3'te herhangi bir şey kullanıyorsanız, "aşamalı geliştirme" denen şeyi yaptığınızı bilir - en çok desteğe sahip tarayıcılar en iyi deneyimi alır. Bunun diğer kısmı "zarif bozulmadır", yani deneyimin hoş olacağı, ancak bu tarayıcı modülü veya modülün yapmak istediğiniz şeyle ilgili kısımlarını uygulayana kadar belki de en iyi veya en çekici olmayacağı anlamına gelir.

Bu, ne yazık ki ön uç geliştiricilerin, uygulamalarda tutarsız zamanlama nedeniyle son derece sinirli olduğu oldukça tuhaf bir durum yaratır. Yani her iki tarafta da gerçek bir zorluk - tarayıcı şirketlerini, W3C'yi veya daha kötüsü - kendinizi mi suçluyorsunuz (tanrı, hepsini bilemeyeceğimizi biliyor!) Bir tarayıcı şirketi ve W3C grubu için çalışan bizleri yapın üyeler kendimizi mi suçluyor? Sen?

Tabii ki değil. Bu her zaman bir denge oyunudur ve şimdiye kadar, bir endüstri olarak bu denge noktasının gerçekte nerede olduğunu bulamadık. İşte evrimsel teknolojide çalışmanın keyfi bu :)

IE9'un hala CSS gradyanlarını desteklemeyeceğini anlıyorum. Bu utanç verici, çünkü diğer birçok harika yeni şeyi destekliyor.

CSS3Pie'ye bakmak isteyebilirsiniz tüm sürümlerinin çeşitli CSS3 özelliklerini (gradyanlar dahil, aynı zamanda kenarlık yarıçapı ve kutu gölgesi dahil) minimum bir yolu olarak .

CSS3Pie'nin IE9 ile çalıştığına inanıyorum (Yayın öncesi sürümlerde denedim, ancak henüz mevcut beta sürümünde değil).

IE9'dan emin değilim, ancak Opera'nın henüz herhangi bir gradyan desteği yok gibi görünüyor:

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

Bu sayfada "gradyan" hiçbir şekilde geçmez.

Robert Nyman'ın, Opera olmayan tüm tarayıcılarda CSS gradyanlarının çalışmasını sağlama konusunda yazdığı harika bir makale var:

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

Bunun bir görüntüyü yedek olarak kullanmak için genişletilip genişletilemeyeceğinden emin değilim.

Sürüm 11'den itibaren Opera, -o-vendor önekiyle doğrusal gradyanları destekler. Chris Mills, bununla ilgili bir Dev.Opera makalesi yazdı: http://dev.opera.com/articles/view/css3-linear-gradients/

Radyal gradyanlar hala çalışmalarda (hem spesifikasyonda hem de Opera içinde).

Bir Gradyan Oluşturucu kullanın - her şey mükemmel olacak;) http://www.colorzilla.com/gradient-editor/