Gradienty w programie Internet Explorer 9


111

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?


Mimo że wybrałem odpowiedź - ma to znaczenie tylko w tym momencie. Jeśli to się zmieni, czy ktoś może zaktualizować wątek? Bardzo cenione.
Sniffer

Całkowicie. Wątpię jednak, czy IE 9 zaimplementuje teraz gradienty, ponieważ jest w wersji beta.
Paul D. Waite

5
IE9 nie obsługuje gradientów, ale IE10 tak.
Catch22

4
IE to po prostu okropna przeglądarka razem, nie obsługuje bloków wbudowanych, wartości pozycji łamią się bez powodu, brak obsługi gradientów, powolny jak diabli ... Zacznijmy wszyscy ostrzegać użytkowników, że muszą przestać używać IE zamiast marnować nasze czas obsługi przeglądarki poniżej standardu. Osobiście od lat całkowicie powstrzymuję użytkowników IE przed przeglądaniem którejkolwiek z moich stron (skieruj ich, aby kupili prawdziwą przeglądarkę) i nigdy nie straciłem na sprzedaży. Poszukaj informacji, a zobaczysz, że IE odpowiada za <5% całego ruchu internetowego i <1% sprzedaży. Dlaczego to wspieramy?

12
Dan, byłbym zainteresowany, skąd pochodzą twoje liczby, nie mogę znaleźć ani jednego źródła stwierdzającego, że IE to <5% ruchu.
Jamie Taylor

Odpowiedzi:


44

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


2
Według css3please.com , IE10 wygląd dzięki wsparciu gradientów CSS, co jest dobrą wiadomością ...
Sniffer

css3please.com pomogło mi znaleźć rozwiązanie dla mojego. Dzięki
radosne

57

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.


10
Nie uważałbym jeszcze IE10 za główną przeglądarkę.
David Murdoch

3
@DavidMurdoch, to technicznie prawda, ale nie ma sensu nie dodawać zastrzeżonego rozszerzenia do twojego CSS, ponieważ wiemy, co to będzie. W końcu IE10 ma stać się główną przeglądarką.
thepeer

4
@Robotsushi chociaż nie odpowiada na pytanie dotyczące IE9 (wybrana odpowiedź tak, prawdopodobnie dlatego została wybrana), to pytanie znajduje się na pierwszej stronie wyników Google dla „gradientów css w przeglądarce internetowej”, więc nie ma jakakolwiek szkoda w posiadaniu tutaj czegoś użytecznego teraz, gdy IE10 jest prawie gotowy na Windows 7.
Kevin Arthur,

Najnowsze wersje przeglądarek Firefox i Opera obsługują standard W3C. (Testowałem na Firefox 19 i Opera 12.14 w Windows 7)
JayVee,

2
Ponieważ jest to najczęściej wybierana odpowiedź na pytanie, które dotyczy IE9, należy dodać filtr: na końcu, aby zawierał obsługę IE9.
Joel Coehoorn

46

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

37

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.


Eleganckie rozwiązanie. Do Twojej wiadomości: Właśnie potwierdziłem, że SVG nie jest pobierane dla przeglądarek obsługujących linear-gradient.
Jonathan Cross

Zastanawiam się, czy istnieje sposób na buforowanie tych plików SVG po ich utworzeniu.
Mike Kormendy

Bardziej solidnym pytaniem byłoby ustalenie, jaka jest wydajność zarówno pod względem czasu, jak i obciążenia serwera przy żądaniu pliku w pamięci podręcznej, w porównaniu z generowaniem strumienia pliku za każdym razem.
Mike Kormendy

1
PHP nigdy nie powinno mieć wiedzy ani pomocy w projektowaniu interfejsu użytkownika. Trzymaj potrzeby klienta na kliencie.
Alex White

11

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

Jako użytkownik LESS szukałem sposobu, aby gradienty działały również w IE9. Znalazłem artykuł na blogu, w którym opisano szczegółowo, jak wygenerować plik
James Long

6

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


4

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


Dzięki, Spudley. Używam CSS3Pie na IE6 do 8, ale miałem nadzieję uciec od używania go w IE9! Mam osobny arkusz stylów dla każdego IE z moimi stylami CSS3Pie w IE8. Tak długo, jak gradienty są jedyną rzeczą, której brakuje w CSS3, którego obecnie używam, dodam kolejny arkusz stylów dla IE9 bez używania CSS3Pie, jeśli mi się to uda.
Sniffer

Nawet nie widziałem tego posta, moja wina. Właśnie napisałem odpowiedź i zagłosowałem za usunięciem z tymi samymi informacjami. Uwaga: uważaj
NateDSaint.

2

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

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:

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


1
Zaskakuje mnie to, ponieważ Opera zwykle jest liderem we wdrażaniu standardów. Dzięki za odpowiedź Paul.
Sniffer

1
Nie sądzę jednak, aby gradienty stały się jeszcze standardem. Jak rozumiem ten proces, nowe funkcje CSS są zwykle wdrażane w przeglądarce, a następnie ostatecznie określane w standardzie. Uważam, że zespół WebKit jako pierwszy zaimplementował gradienty w CSS (chyba że policzysz Microsoft i ich filterrzeczy, które tak naprawdę nie kwalifikują się jako CSS w mojej książce). Firefox już ich śledził, ale wygląda na to, że nie ma jeszcze nic w specyfikacji W3C CSS: zobacz google.co.uk/ ...
Paul D. Waite,


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.