Gradienty w programie Internet Explorer 9

Czy ktoś zna prefiks dostawcy dla gradientów w IE9, czy nadal powinniśmy nadal używać ich własnych filtrów?

Co mam dla innych przeglądarek to:

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

Czy ktoś zna również prefiks dostawcy Opery?

Nadal musisz używać ich zastrzeżonych filtrów od IE9 beta 1.

Wygląda na to, że trochę się spóźniłem na imprezę, ale oto przykład niektórych najpopularniejszych przeglądarek:

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

Źródło: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

Uwaga: wszystkie te przeglądarki obsługują również rgb / rgba zamiast notacji szesnastkowej.

Najlepszym rozwiązaniem dla różnych przeglądarek jest

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 obecnie nie obsługuje gradientu CSS3. Jednak tutaj jest fajne rozwiązanie obejścia problemu, wykorzystujące PHP do zwracania zamiast tego gradientu SVG (pionowego liniowego), co pozwala nam zachować nasz projekt w naszych arkuszach stylów.

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

Po prostu prześlij go na swój serwer i zadzwoń pod adres URL w następujący sposób:

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

Można tego używać w połączeniu z gradientami CSS3 w następujący sposób:

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

Jeśli chcesz kierować reklamy poniżej IE9, nadal możesz użyć starej zastrzeżonej metody „filtru”:

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

Oczywiście możesz zmienić kod PHP, aby dodać więcej przystanków do gradientu lub uczynić go bardziej wyrafinowanym (gradienty radialne, przezroczystość itp.), Ale jest to świetne dla tych prostych (pionowych) gradientów liniowych.

Kod, którego używam dla wszystkich gradientów przeglądarki:

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ędziesz musiał określić wysokość lub zoom: 1zastosować hasLayoutdo elementu, aby to działało w IE.

Aktualizacja:

Oto MNIEJSZA wersja Mixin (CSS) dla wszystkich MNIEJ użytkowników:

.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 wkrótce zacznie udostępniać kompilacje z obsługą gradientów, a także z innymi funkcjami CSS.

Grupa robocza W3C CSS nie skończyła nawet z CSS 2.1, wiecie o tym, prawda? Mamy zamiar wkrótce skończyć. CSS3 jest precyzyjnie zmodularyzowany, dzięki czemu możemy szybciej wdrażać moduły niż całą specyfikację.

Każda firma zajmująca się przeglądarkami stosuje inną metodologię cyklu oprogramowania, testowanie i tak dalej. Tak więc proces wymaga czasu.

Jestem pewien, że wielu, wielu czytelników dobrze wie, że jeśli używasz czegokolwiek w CSS3, robisz to, co nazywa się „progresywnym ulepszaniem” - przeglądarki z największym wsparciem uzyskują najlepsze wrażenia. Inną częścią tego jest „wdzięczna degradacja”, co oznacza, że ​​doświadczenie będzie przyjemne, ale być może nie najlepsze lub najbardziej atrakcyjne, dopóki przeglądarka nie zaimplementuje modułu lub części modułu, które są istotne dla tego, co chcesz robić.

Stwarza to dość dziwną sytuację, którą niestety deweloperzy front-endu są bardzo sfrustrowani: niespójnym czasem implementacji. Jest to więc prawdziwe wyzwanie po obu stronach - czy obwiniasz firmy zajmujące się przeglądarkami, W3C, czy jeszcze gorzej - siebie (do licha, że ​​nie możemy wiedzieć wszystkiego!) Czy ci z nas, którzy pracują dla firmy przeglądarkowej i grupy W3C członkowie winią siebie? Ty?

Oczywiście nie. To zawsze gra o równowagę, a jak dotąd, jako branża nie odkryliśmy, gdzie naprawdę jest ten punkt równowagi. To radość z pracy w ewolucyjnej technologii :)

Rozumiem, że IE9 nadal nie będzie obsługiwał gradientów CSS. Szkoda, bo obsługuje mnóstwo innych świetnych nowych rzeczy.

Możesz spojrzeć na CSS3Pie jako sposób na to, aby wszystkie wersje IE obsługiwały różne funkcje CSS3 (w tym gradienty, ale także border-radius i box-shadow) przy minimalnym zamieszaniu.

Uważam, że CSS3Pie działa z IE9 (próbowałem go w wersjach przedpremierowych, ale jeszcze nie w obecnej wersji beta).

Nie jestem pewien co do IE9, ale Opera wydaje się nie mieć jeszcze żadnej obsługi gradientów:

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

Brak wystąpienia „gradientu” na tej stronie.

Jest świetny artykuł Roberta Nymana na temat uzyskania gradientów CSS we wszystkich przeglądarkach innych niż Opera:

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

Nie jestem pewien, czy można to rozszerzyć, aby używać obrazu jako rozwiązania zastępczego.

Od wersji 11 Opera obsługuje gradienty liniowe z przedrostkiem -o- vendor. Chris Mills napisał o tym artykuł Dev.Opera: http://dev.opera.com/articles/view/css3-linear-gradients/

Gradienty radialne są nadal w przygotowaniu (zarówno w specyfikacji, jak i w Operze).

Użyj generatora gradientów - i wszystko będzie idealne;) http://www.colorzilla.com/gradient-editor/