Tôi đã tìm thấy http://www.colorzilla.com/gradient-editor/ là điều tuyệt vời để tạo gradient CSS3. Tuy nhiên, có một điều về nó sẽ là tuyệt vời nếu ai đó có thể làm rõ cho tôi.Tôi có nên sử dụng gradient SVG được tạo bởi Colorzilla cho IE9 không?
Như tôi đã hiểu, IE9 không hỗ trợ các bộ lọc theo cách giống như IE6-8 đã làm và không hỗ trợ CSS3 gradient. Colorzilla cung cấp một cách rất thông minh để buộc IE9 làm việc với các gradient đa điểm, bằng cách bao gồm dữ liệu SVG cho gradient trong CSS và thiết lập bộ lọc thành không cho IE9 chỉ trên bất kỳ phần tử nào sử dụng gradient. Dưới đây là một ví dụ về những gì Colorzilla tạo ra nếu đánh dấu vào hộp kiểm Hỗ trợ IE9, dòng background: url(data ... là những gì được thêm vào cho 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 */
Với phần sau được thêm vào thành phần <head> trong HTML.
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
Tôi tự hỏi có nên sử dụng mã này cho IE9 hay không, hoặc dựa vào dự phòng hình ảnh thông thường thay thế? Có bất kỳ tình huống nào mà một cách tiếp cận có thể tốt hơn cách khác không? Ngoài ra, mã SVG này có ảnh hưởng đến hiệu suất của các trình duyệt khác sử dụng thuộc tính CSS3 hay không, hoặc chúng đơn giản bỏ qua dòng này?
Colorzilla dường như không giải thích được ý nghĩa của việc bao gồm mã bit này, có thể không có bất kỳ và đó là cách phù hợp để làm điều đó mọi lúc? Nếu đó là trường hợp tôi xin lỗi vì lãng phí thời gian của mọi người, nhưng thực tế đó là một lựa chọn có thể đánh dấu khiến tôi nghĩ rằng có thể có một số lý do không sử dụng nó.
Do IE10 sẽ thả hỗ trợ cho các nhận xét có điều kiện, bạn chỉ nên bao gồm thuộc tính 'filter' cho các phiên bản IE cũ thay vì ghi đè nó một lần nữa cho các phiên bản hiện tại. – Joey
Chào mừng bạn. Không thể phá vỡ nghi thức diễn đàn vì * đây không phải là diễn đàn *. Tất nhiên, không nhận ra đây là một vi phạm nghiêm trọng của nghi thức;) – robertc