Использование условного CSS для отображения градиентного изображения в IE - PullRequest
Новая
       2

Использование условного CSS для отображения градиентного изображения в IE

0 голосов
/ 17 декабря 2011

Я никогда раньше не использовал условные выражения (но знал, что в конечном итоге мне придется - я ненавижу тебя, IE). По сути, у меня есть баннер в верхней части моего сайта с использованием градиента CSS: 

background-image: linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -o-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -moz-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -webkit-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -ms-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.44, #2B7BB8),
    color-stop(0.72, #4394CE),
    color-stop(0.86, #58A8E1)
);

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

<!--[if IE]> background-image:url('img/ieback.png'); <![endif]-->
<!--[if IE]> background-repeat:repeat-x; <![endif]-->

У меня нет IE на моем компьютере (linux), поэтому я использовал Adobe Browser Labs, чтобы проверить, как мой сайт выглядит в IE. Тем не менее, изображение по-прежнему не загружается. Финальная версия моего css выглядит так: 

background-image: linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -o-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -moz-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -webkit-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -ms-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.44, #2B7BB8),
    color-stop(0.72, #4394CE),
    color-stop(0.86, #58A8E1)
);

<!--[if IE]> background-image:url('img/ieback.png'); <![endif]-->
<!--[if IE]> background-repeat:repeat-x; <![endif]-->

Я что-то не так делаю?

Ответы [ 4 ]

2 голосов
/ 17 декабря 2011

http://www.quirksmode.org/css/condcom.html

Похоже, что вы не можете делать условные комментарии в файле CSS, только в файле HTML.

Так что если вы поместили элемент стиля в <!--[if IE]> <![endif]-->он должен работать

После просмотра, CSS3-градиенты поддерживаются только в IE10, а условные комментарии удалены в IE10.Таким образом, вы можете просто указать все версии IE с помощью этого условного комментария.

2 голосов
/ 17 декабря 2011

Лучше всего использовать обнаружение функций, а не анализ браузера или условные комментарии. И, кроме того, эти условные комментарии исчезнут в IE10, я так понимаю, так что это скоро перестанет работать.

В любом случае, вы должны проверить два проекта (конечно, FOSS): Modernizr.com (хотя я не думаю, что это поможет прямо здесь) и h5bp.com (HTML5 Boilerplate dot com). Последний полон замечательных лучших практик, и один из них заключается в использовании условных комментариев в HTML, например: 

<!doctype html> (you don't have to use HTML5 here, this will still work)
<!--[if lt IE 7]> <html class="no-js ie678 ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie678 ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie678 ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

Обратите внимание, что это по существу устанавливает разные классы для вашего HTML-элемента. Итак, если пользователь использует IE8, то в элементе HTML будет класс ie8 AND ie678.

Тогда в вашем CSS вам просто нужно сделать что-то вроде этого: 

.ie678 { background-image:url('img/ieback.png'); }
.ie678 { background-repeat:repeat-x; }

И, естественно, эти два правила стиля будут включены.

Удачи!

PS. Я упоминаю Modernizr.com выше, потому что все дело в обнаружении функций. Вы можете использовать его, чтобы определить, поддерживаются ли CSS-градиенты, но он не обязательно сообщит вам, будут ли работать фильтры IE. Однако вы можете просто определить, работают ли градиенты, если нет, то использовать MS-фильтр и надеяться на лучшее. Я подозреваю, что условные комментарии - это то, что вам нужно.

0 голосов
/ 17 декабря 2011

Вместо этого используйте пирог css3 http://css3pie.com/documentation/supported-css3-features/

0 голосов
/ 17 декабря 2011

Это должно работать: 

/* For Internet Explorer 8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E1E1E1');
...