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

Кто-нибудь знает префикс поставщика для градиентов в IE9, или мы все еще должны использовать их собственные фильтры?

Что у меня есть для других браузеров:

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

В качестве бонуса, кто-нибудь знает префикс поставщика Opera?

Вам все еще нужно использовать их проприетарные фильтры, начиная с IE9 beta 1.

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

/* 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 вместо шестнадцатеричной записи.

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

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 в настоящее время отсутствует поддержка градиентов 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, чтобы добавить больше остановок на градиент или сделать его более сложным (радиальные градиенты, прозрачность и т. Д.), Но это отлично подходит для этих простых (вертикальных) линейных градиентов.

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

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.

Обновить:

Вот версия 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;
}

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

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

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

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

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

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

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

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

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

Не уверен насчет IE9, но в Opera, похоже, еще нет поддержки градиентов:

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

На этой странице нет «градиента».

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

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

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

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

Радиальные градиенты все еще находятся в разработке (как в спецификации, так и в Opera).

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