Как сделать кросс-браузер градиент mixin в компасе, с IE9, IE8, IE7 и Opera?

Я хочу сделать mixin для всех браузеров, включая IE9 IE9, IE8, IE7 и Opera.

Как http://www.colorzilla.com/gradient-editor/ генерировать код

он генерирует

background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */

И для IE9 Нам нужно установить filter:none

Поддержка полных градиентов с несколькими остановками в IE9 (с использованием SVG). Добавить класс "градиент" для всех ваших элементов, имеющих градиент, и добавить следующее переопределение в HTML для завершения поддержки IE9:

Компас имеет последний модуль для градиента http://compass-style.org/reference/compass/css3/images/, который мы можем использовать после вызова $experimental-support-for-svg: true и, например, использовать это как

.gradient {@include linear-gradient(#000000, #ff0000)}

Что дает результат, подобный этому

.gradient {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, #ff0000));
  background-image: -webkit-linear-gradient(#000000, #ff0000);
  background-image: -moz-linear-gradient(#000000, #ff0000);
  background-image: -o-linear-gradient(#000000, #ff0000);
  background-image: -ms-linear-gradient(#000000, #ff0000);
  background-image: linear-gradient(#000000, #ff0000);
}

если мы сравним изображение компаса. code this to colorzilla code

отсутствует, что для IE6-8

filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '# 1e5799', endColorstr = '# 7db9e8', GradientType = 0);/* IE6-8 */
и для старых браузеров background: #1e5799; /* Old browsers */
и вместо этого background-image background
и имеет одно дополнительное свойство background-size: 100%;
и на этой странице нет инструкций http://compass-style.org/reference/compass/css3/images/ за то, как решить filter:none, необходимый для IE9.

Мои вопросы:

В чем преимущество background-size: 100%;?
В чем преимущество использования background-image вместо background?
Есть ли способ добавить filter:none к элементу только для IE9 в Компас?
Как получить совместимый с IE6-8 код в компасе, например, filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );?

Ответ 1

В чем преимущество фонового размера: 100%;?

В чем преимущество использования фонового изображения вместо фона?

Изображения SVG являются фоновыми изображениями, а содержимое этого свойства является программно сгенерированным изображением. Чтобы сохранить его в соответствии, Compass использует фоновое изображение. Кроме того, указание background-image может позволить кодеру указать background-color, который не будет уничтожен микшированием.

Настройка background-size гарантирует, что изображение действительно растягивается, чтобы заполнить пространство элемента, а не быть размером самого изображения.

Есть ли способ добавить фильтр: none для элемента только для IE9 в Compass?

Как получить совместимый с IE6-8 код в компасе как этот фильтр: progid: DXImageTransform.Microsoft.gradient(startColorstr = '# 1e5799', endColorstr = '# 7db9e8', GradientType = 0);?

Есть три варианта для обоих из них:

Расширьте mixin/напишите свой собственный mixin. Включенные миксины - это просто файлы, которые хранятся в месте установки Compass, поэтому вы всегда можете их редактировать или использовать для создания собственных микшинов.
Используйте CSS3 PIE с компасом.
Поместите код, специфичный для IE, в одну или несколько таблиц стилей, специфичных для IE (это мой предпочтительный метод, если PIE не является опцией, так как он изолирует CSS, поэтому вам не нужно делать хаки, чтобы получить одну версию или другой, чтобы игнорировать данную строку CSS).

Мои вопросы:

Ответ 1

Ответ 2