Следует ли мне использовать градиенты SVG, созданные Colorzilla для IE9?

Я обнаружил, что 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 */

Со следующим добавлением в в HTML.


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

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

8
задан Domenic 29 July 2013 в 22:21
поделиться