Должен ли я использовать SVG-градиенты, созданные Colorzilla для IE9? - PullRequest
Новая
       38

Должен ли я использовать SVG-градиенты, созданные Colorzilla для IE9?

8 голосов
/ 14 декабря 2011

Я нашел http://www.colorzilla.com/gradient-editor/ отлично подходит для генерации CSS3 градиентов.Тем не менее, есть одна вещь, которая была бы полезна, если бы кто-то мог уточнить для меня.

Насколько я понимаю, IE9 не поддерживает фильтры так же, как IE6-8, и не поддерживаетCSS3 градиенты тоже.Colorzilla дает очень умный способ заставить IE9 работать с мультистопными градиентами, включая данные SVG для градиента в CSS и устанавливая фильтр none для IE9 только для любых элементов, использующих градиент.Ниже приведен пример того, что Colorzilla генерирует, если отметить флажок Поддержка IE9, строка background: url(data ... - это то, что добавлено для IE9. 

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 */

со следующим добавлением к элементу <head> в HTML. 

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

Мне интересно, как правило, предпочтительнее ли включать этот код для IE9 или использовать вместо него обычный запасной вариант изображения?Есть ли ситуации, когда один подход может быть лучше другого?Кроме того, может ли этот SVG-код повлиять на производительность других браузеров, использующих свойства CSS3, или они просто проигнорируют эту строку?

Кажется, что Colorzilla не объясняет последствия включения этого фрагмента кода, возможно, тамнет, и это правильный способ делать это все время?Если это так, то я извиняюсь за трату времени на людей, но тот факт, что это галочка, заставил меня подумать, что может быть какая-то причина не использовать его.

Ответы [ 2 ]

6 голосов
/ 15 января 2013

Градиент IE9 SVG работает хорошо, но IE7 считает его незащищенным контентом. Таким образом, если вы защитите свой сайт с помощью этого стиля за SSL / HTTPS, пользователи IE7 получат «Эта страница содержит как защищенные, так и незащищенные элементы». Я вытащил этот раздел в условно включенный файл CSS, чтобы IE7 не лаял.

3 голосов
/ 14 декабря 2011

IE9 поддерживает фильтры IE6-8, хотя IE10 не будет. Вы правы, что IE9 не поддерживает CSS3-градиенты, но IE10 сделает это.

Поскольку IE9 поддерживает фильтры IE6-8, colorzilla необходимо отключить фильтр IE6-8 при установке фильтра SVG на объект. Фильтр IE6-8 устанавливается с использованием свойства фильтра, в отличие от фильтров CSS, которые устанавливаются с использованием свойства background. Поэтому добавление <head> отключает дублирующий фильтр IE6-8 в IE9. Учитывая разные имена свойств, последнее правило выбора селектора не применяется.

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

...