filter (IE6-9) - возможна ли прописать по другому

[lev99]

У меня есть в CSS такая запись:

.pay-button {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b4f5', endColorstr='#0096d2',GradientType=0 ); /* IE6-9 */
}

Возможно ли её записать так:

.pay-button {
-ms-filter: "filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b4f5', endColorstr='#0096d2',GradientType=0 )"; /* IE8 */
}

правда я прочёл , что должны быть в месте

.pay-button {
-ms-filter: "filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b4f5', endColorstr='#0096d2',GradientType=0 )"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b4f5', endColorstr='#0096d2',GradientType=0 ); /* IE6-9 */
}

есть вопрос может его вообще удалить?

Так как есть уже:

background: #00b4f5; /* Old browsers */
background: -moz-linear-gradient(top, #00b4f5 0%, #0096d2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b4f5), color-stop(100%,#0096d2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b4f5 0%,#0096d2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b4f5 0%,#0096d2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b4f5 0%,#0096d2 100%); /* IE10+ */
background: linear-gradient(to bottom, #00b4f5 0%,#0096d2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b4f5', endColorstr='#0096d2',GradientType=0 ); /* IE6-9 */

Edited May 24, 2013 by lev99

[lexxcode]

Фильтры - зло. Удаляйте их.

Для ИЕ9 лучше использовать svg. Если к элементу применены фильтры, в ИЕ9 при скруглении углов у этого элемента углы не будут скругляться. Точнее они то скругляться будут, только фильтр перекроет эти скругления.

Если же оооочень критична поддержка ИЕ8, и еще более критично, чтобы там были фильтры, то лучше в конце css файла создать такую вот конструкцию:

@media \0screen\,screen\9 {
  /* IE6-8 only */
}

Внутри этой штуки css будет работать только в ИЕ6-8

вот туда как раз и можно вставить фильтр

@media \0screen\,screen\9 {
  /* IE6-8 only */
  .pay-button {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b4f5', endColorstr='#0096d2',GradientType=0 );
  }
}

А вообще, мой вам совет вообще выкиньте все то что у вас написано и сделайте так:

.selector {
  background: url(../img/box_bg.svg) no-repeat 0 0 #eee; /* Chrome 25-, Firefox 15-, Opera 12, Safari, IE9, Mobile*/
  background: linear-gradient(#fff, #000); /* Chrome 26+, Firefox 16+, Opera 12.1+, IE10+ */
}

В ИЕ8 будет просто одно тонный цвет, но на крайняк можно проделать то что я описал выше стили в конце css для ИЕ6-8. Но пора уже забивать на ИЕ8

[lev99]

спасибо, ну наверно удалю, правда svg идея, как-то ещё запутанней, откуда я возьму box_bg.svg

Ещё раз спасибо!

[lev99]

А вообще, мой вам совет вообще выкиньте все то что у вас написано и сделайте так:

.selector {
background: url(../img/box_bg.svg) no-repeat 0 0 #eee; /* Chrome 25-, Firefox 15-, Opera 12, Safari, IE9, Mobile*/
background: linear-gradient(#fff, #000); /* Chrome 26+, Firefox 16+, Opera 12.1+, IE10+ */
}

Кстати, а здесь на форуме не похожий вариант на SVG?

.input_submit {
    background: url("http://forum.htmlbook.ru/public/style_images/master/topic_button.png") repeat-x scroll center top #212121;
    border-color: #212121;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 0 #5C5C5C inset, 0 2px 3px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
}

Мне проще картинку найти, подобное вариант видел со шрифтами, кстати есть ссылка где можно почитать и посмотреть?

[Николя223]

ну.. svg можно и через base64 вписывать, но это засоряет код. на colorzilla.com/gradient-editor/ можете сгенерировать и часть к себе пристроить

Edited May 25, 2013 by Николя223

[lev99]

Николя223

И какую же часть приделать?

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2

[klierik]

самый просто способ получить градиент под IE9 это: http://screencast.com/t/bazt5WC0pO

но так же надо учесть и эту информацию: http://screencast.com/t/9D5s85xrg

имхо: не стоит вообще заморачиватся с формами записей. берем все дает генератор и вставляем в разметку.

[lexxcode]

имхо: не стоит вообще заморачиватся с формами записей. берем все дает генератор и вставляем в разметку.

Но надо же понимать, что делаешь

На данный момент этот генератор дает уж слишком переизбыточный код. Просто не нужно все то, что там есть. Все уже нормально поддерживают запись W3C, для safari, древних динозавров и IE9 - svg. Единственное, что можно включить webkit префиксы, т.к. старый Android не шурупает рисовать SVG.

И какую же часть приделать?

Почитайте немного об svg, чтобы хоть немного ориентироваться что там к чему. У меня накопилось уже всяких svg-шек с градиентами, вроде такой

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<linearGradient id="g" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
  <stop offset="0%" stop-color="#ff3019" stop-opacity="1"/>
  <stop offset="100%" stop-color="#cf0404" stop-opacity="1"/>
</linearGradient>
<rect x="0" y="0" width="1" height="1" fill="url(#g)" />
</svg>

Просто беру настраиваю как мне нужно, добавляю дополнительные color-stop, если нужно. Потом просто подключаю и все, как в моем примере выше

[lev99]

alexriz

Кажись понял

Прочёл:

http://noteskeeper.ru/553/

Удобный способ для создания градиентного файла

[lexxcode]

Кажись понял

это прекрасно

[lev99]

alexriz
Уже проверяю, не всё удалось удалить из CSS но вроде всё работает
 

Edited April 30, 2014 by lev99