Градиенты в Internet Explorer 9

Ответ 1

Вам все равно нужно использовать свои собственные фильтры с IE9 beta 1.

Ответ 2

Похоже, я немного опаздываю на вечеринку, но вот пример для некоторых из лучших браузеров:

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

Источник: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

Примечание: все эти браузеры также поддерживают rgb/rgba вместо шестнадцатеричной нотации.

Ответ 3

Лучшее кросс-браузерное решение -

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

Ответ 4

В IE9 в настоящее время отсутствует поддержка градиента CSS3. Тем не менее, вот хорошее решение для решения проблемы с использованием PHP для возврата SVG (вертикальный линейный) градиент, что позволяет нам сохранить наш дизайн в наших таблицах стилей.

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

Просто загрузите его на свой сервер и вызовите URL-адрес следующим образом:

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

Это можно использовать в сочетании с вашими градиентами CSS3 следующим образом:

.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, вы все равно можете использовать старый проприетарный метод "фильтр":

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

Конечно, вы можете изменить код PHP, чтобы добавить больше остановок на градиенте или сделать его более сложным (радиальные градиенты, прозрачность и т.д.), но это отлично подходит для этих простых (вертикальных) линейных градиентов.

Ответ 5

Код, который я использую для всех градиентов браузера:

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;

Вам нужно будет указать высоту или zoom: 1, чтобы применить hasLayout к элементу, чтобы это работало в IE.

Update:

Ниже приведена версия LESS Mixin (CSS) для всех пользователей LESS:

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

Ответ 6

Opera скоро начнет иметь сборки с поддержкой градиента, а также другие функции CSS.

Рабочая группа W3C CSS даже не закончила с CSS 2.1, вы знаете это, верно? Мы собираемся закончить очень скоро. CSS3 имеет модульную структуру, поэтому мы можем быстрее перемещать модули в реализацию быстрее, чем целую спецификацию.

Каждая компания-разработчик использует различную методологию программного обеспечения, тестирование и т.д. Таким образом, процесс требует времени.

Я уверен, что многие, многие читатели хорошо знают, что если вы используете что-либо в CSS3, вы делаете то, что называется "прогрессивным улучшением" - браузеры с наибольшей поддержкой получают лучший опыт. Другая его часть - "изящная деградация", что означает, что опыт будет приятным, но, возможно, не лучшим или самым привлекательным, пока этот браузер не выполнит модуль или части модуля, которые имеют отношение к тому, что вы хотите сделать.

Это создает довольно странную ситуацию, к которой, к сожалению, интерфейсные разработчики крайне расстраиваются: непоследовательным временем реализации. Так что это настоящая проблема с обеих сторон - вы обвиняете компании-разработчики браузеров, W3C или, что еще хуже, - себя (добродетели знают, что мы не можем все это знать!) У нас есть те, кто работает в браузере и группе W3C члены обвиняют себя? Вы?

Конечно нет. Это всегда игра баланса, и пока мы, как индустрия, не выяснили, где эта точка баланса на самом деле. Это радость от работы в эволюционной технологии:)

Ответ 7

Я понимаю, что IE9 по-прежнему не будет поддерживать CSS-градиенты. Какой позор, потому что он поддерживает множество других замечательных новых вещей.

Возможно, вы захотите изучить CSS3Pie как способ заставить все версии IE поддерживать различные функции CSS3 (включая градиенты, но также border-radius и box-shadow) с минимумом суеты.

Я считаю, что CSS3Pie работает с IE9 (я пробовал его в предварительных версиях, но еще не на текущей бета-версии).

Ответ 8

Не уверен в IE9, но Opera пока не имеет поддержки градиента:

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

Отсутствует "градиент" на этой странице.

Theres отличная статья Роберта Наймана о том, что CSS-градиенты работают во всех браузерах, в которых присутствует Opera:

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

Не уверен, что это можно расширить, чтобы использовать изображение в качестве резервной копии.

Ответ 9

Начиная с версии 11, Opera поддерживает линейные градиенты с префиксом -о-поставщика. Крис Миллс написал статью Dev.Opera об этом: http://dev.opera.com/articles/view/css3-linear-gradients/

Ответ 10

Используйте генератор градиентов - и все будет идеально;) http://www.colorzilla.com/gradient-editor/