Градієнти в 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 бета-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>

Просто завантажте його на свій сервер і зателефонуйте так:

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

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

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.

Оновлення:

Ось менша версія Mixin (CSS) для всіх ваших менших користувачів там:

.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 (включаючи градієнти, але також межі радіусу та вікна-тіні) з мінімумом суєти.

Я вважаю, що CSS3Pie працює з IE9 (я спробував це на попередніх версіях, але ще не на поточній бета-версії).

Не впевнений у IE9, але, схоже, Opera ще не підтримує градієнта:

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

На цій сторінці відсутня градієнт.

Є чудова стаття Роберта Німана про те, щоб градієнти CSS працювали у всіх браузерах, однак вони не оперують:

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

Не впевнений, чи можна це розширити, щоб використовувати зображення як резервне.

З версії 11 Opera підтримує лінійні градієнти з префіксом -продавця. Кріс Міллс написав про це статтю Dev.Opera: http://dev.opera.com/articles/view/css3-linear-gradients/

Радіальні градієнти ще працюють (як у специфікації, так і в межах Opera).

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