Znalazłem http://www.colorzilla.com/gradient-editor/, który świetnie nadaje się do generowania gradientów CSS3. Jest jednak jedna rzecz, która byłaby świetna, gdyby ktoś mógł mi wyjaśnić.Czy należy używać gradientów SVG generowanych przez Colorzilla dla IE9?
Jak rozumiem, IE9 nie obsługuje filtrów w ten sam sposób, co IE6-8, i nie obsługuje gradientów CSS3. Colorzilla daje bardzo sprytny sposób na zmuszanie IE9 do pracy z gradientami wielopunktowymi, włączając dane SVG do gradientu w CSS i ustawiając filtr na none dla IE9 tylko na dowolnych elementach korzystających z gradientu. Poniżej znajduje się przykład tego, co generuje Colorzilla, zaznaczając pole wyboru Obsługa IE9, linia background: url(data ... jest dodana do 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 */
Po dodaniu do elementu <head> w kodzie HTML.
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
Zastanawiam się czy to na ogół korzystne jest włączenie do tego kodu dla IE9, lub polegać na regularnym obrazu zastępczego zamiast? Czy są jakieś sytuacje, w których jedno podejście może być lepsze od drugiego? Ponadto, czy ten kod SVG może wpłynąć na wydajność innych przeglądarek korzystających z właściwości CSS3, czy po prostu zignoruje tę linię?
Colorzilla nie wydaje się wyjaśniać implikacji włączenia tego fragmentu kodu, może nie ma żadnych i jest to właściwy sposób, aby zrobić to cały czas? Jeśli tak jest, to przykro mi, że marnuje czas ludzi, ale fakt, że jest to opcja, którą można kliknąć, sprawił, że pomyślałem, że może być jakiś powód, by jej nie używać.
Biorąc pod uwagę, że IE10 zrzuci obsługę komentarzy warunkowych, powinieneś po prostu dołączyć atrybut "filter" dla starych wersji IE zamiast przesłonić go ponownie dla bieżących. – Joey
Witamy. Nie można złamać etykiety forum, ponieważ * to nie jest forum *. Oczywiście, nie zdając sobie z tego sprawy, jest to poważnym naruszeniem etykiety;) – robertc