Градиенты в Internet Explorer 9 - PullRequest
Новая
       29

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

111 голосов
/ 14 октября 2010

Кто-нибудь знает префикс поставщика для градиентов в 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?

Ответы [ 10 ]

57 голосов
/ 01 июня 2011

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

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

46 голосов
/ 21 апреля 2011

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

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*/
44 голосов
/ 14 октября 2010

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

37 голосов
/ 08 мая 2011

В 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, вы все равно можете использовать старую проприетарную версию.Метод 'filter': 

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

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

11 голосов
/ 27 июня 2012

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

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;
}
6 голосов
/ 02 марта 2011

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

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

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

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

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

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

4 голосов
/ 15 октября 2010

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

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

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

2 голосов
/ 06 апреля 2011

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

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

2 голосов
/ 14 октября 2010

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

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

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

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

1 голос
/ 12 июля 2012

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

...