CSS: Các Gradients đơn giản trong Internet Explorer <= 8

Question

Như tôi chắc chắn các bạn đã biết, Internet Explorer có thể xử lý các gradient đơn giản. Dưới đây là một đoạn trích từ Twitter Bootstrap, ví dụ:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); 

Tuy nhiên, tôi đã nhìn thấy một số người sử dụng hai quy tắc CSS (một cho IE < 8 và một cho IE 8), như vậy:

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7fbf4d', endColorstr='#63a62f'); /* For Internet Explorer 5.5 - 7 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7fbf4d', endColorstr='#63a62f')"; /* For Internet Explorer 8 */ 

Câu hỏi của tôi là, quy tắc thứ hai có thực sự cần thiết không? Twitter Bootstrap khá kỹ lưỡng, nhưng nó không sử dụng bất kỳ quy tắc "-ms-filter" nào. Theo số this page, thuộc tính -ms-filter là một phần mở rộng cho CSS và có thể được sử dụng làm từ đồng nghĩa cho bộ lọc trong chế độ Tiêu chuẩn của IE8.

Answer 1

Đề nghị của tôi:

Sử dụng CSS3Pie - http://css3pie.com/

Đây là một thư viện JavaScript cho IE6, IE7 và IE8 rằng bản vá lỗi trong việc hỗ trợ cho một số tính năng CSS3, bao gồm gradient.

Có, bạn có thể sử dụng phong cách đặc biệt của IE filter nếu bạn muốn, nhưng CSS3Pie cho phép bạn sử dụng kiểu CSS chuẩn cho các tính năng này. Dễ dàng hơn nhiều.

Để thực sự trả lời câu hỏi trực tiếp của bạn:

Vâng, phong cách -ms-filter thường được yêu cầu. IE8 sẽ luôn thay cho chúng tôi thay vì filter, được sử dụng chủ yếu cho IE6 và IE7. Trong một số trường hợp, filter sẽ hoạt động trong IE8, nhưng không phải tất cả, vì vậy tốt nhất nên sử dụng -ms-filter để đảm bảo tính tương thích của IE8.

[CHỈNH SỬA] Tại sao họ thay đổi? Bởi vì khi họ phát hành IE8, Microsoft đã thực hiện một điểm lớn của cố gắng để được "tiêu chuẩn tuân thủ".

Để trình duyệt tuân thủ chuẩn, trình duyệt phải sử dụng tiền tố của nhà cung cấp cho bất kỳ thuộc tính CSS nào mà nó hỗ trợ không phải là tiêu chuẩn W3C hoàn chỉnh. Vì vậy, bằng cách thêm tiền tố -ms-, Microsoft đã cố gắng (muộn màng) hoàn tác ô nhiễm của họ về không gian tên CSS chung.

Ngoài ra, dấu ngoặc kép được thêm vào, vì cú pháp cũ filter không có dấu ngoặc kép là CSS không hợp lệ (chủ yếu là do dấu hai chấm sau progid) và gây ra sự cố với một số trình duyệt. (Tôi đã có một ví dụ một thời gian trước đây với Firefox 3.6, nơi nó đã được thả tất cả các phong cách theo một phong cách filter xoay một yếu tố - mất lứa tuổi để làm việc ra những gì đang xảy ra).

Thực tế là Microsoft giữ nguyên khả năng tương thích ngược với cú pháp gốc filter, phần lớn là vấn đề thực dụng. MS không thể đủ khả năng để phá vỡ tất cả các trang web bằng cách sử dụng cú pháp cũ. Nhưng có một ý nghĩa mạnh mẽ từ Microsoft rằng các nhà phát triển nên sử dụng cả hai vì họ sẽ thả hỗ trợ cho phong cách cũ filter trong các phiên bản tiếp theo của IE. Khi nó bật ra, họ đã giảm hỗ trợ cho cả hai filter và -ms-filer trong một ngã swoop, nhưng các tác động được đưa ra tại việc phát hành IE8 là đủ để nó trở thành đề nghị thực hành để cung cấp cả hai cú pháp trong stylesheet của bạn.

Vào thời điểm IE8 được phát hành, XHTML là hương vị mới của tháng và viết mã được xác thực hoàn hảo là đầu danh sách cho nhiều nhà phát triển. Đây có lẽ là một động lực mạnh mẽ trong việc thay đổi cú pháp để bao gồm các dấu ngoặc kép. Vì các dấu hai chấm bị lạc, không thể viết CSS để xác nhận hợp lệ theo kiểu cũ filter. Sử dụng kiểu dáng -ms-filter mới thay thế cho phép mọi người viết CSS hợp lệ. Theo ý tưởng tốt, điều này không thực sự hiệu quả vì tất nhiên mọi người phải tiếp tục sử dụng cú pháp cũ, nhưng mục đích là tốt.

Điều đáng nói là các kiểu sở hữu độc quyền khác được đưa ra cùng một cách xử lý. Ví dụ: bạn có thể sử dụng -ms-behavior trong IE8 thay vì kiểu cũ behavior. Không ai sử dụng nó. Tại sao? Tôi thực sự không biết.

Một thực tế khác đáng biết là W3C đang trong quá trình chuẩn hóa số CSS property called filter. Nó sẽ làm một công việc hoàn toàn khác với phong cách của Microsoft filter và hoạt động hoàn toàn khác. Nếu/khi nó được chuẩn hóa và các trình duyệt bắt đầu hỗ trợ nó, sẽ có một xung đột rõ ràng giữa hai cú pháp.

Answer 2

Có vẻ như bạn đã trả lời câu hỏi của riêng bạn. Có, họ cần. Microsoft cố gắng để đạt được nhiều hơn phù hợp với các tiêu chuẩn có nghĩa là một số phiên bản của IE có quy tắc cú pháp hơi khác nhau của riêng mình cho thuộc tính bộ lọc.

Trong IE7 chỉ filter: theo sau là progid:DXIma... v.v. sẽ hoạt động. Nhưng đối với IE8 + có dự phòng IE7 có thể sử dụng trong chế độ tương thích và thuộc tính tiền tố -ms- thích hợp hơn cho bộ lọc, biểu thị thuộc tính css của nhà cung cấp cụ thể và giá trị của nó bên trong qoutes.

Answer 3

Điều gì sẽ gây hại cho việc này?

Nếu trình duyệt không hiểu dòng CSS, nó sẽ bỏ qua nó.

Hai dòng CSS này gần giống nhau. Tôi sẽ nguy hiểm một đoán rằng Microsoft đã quyết định thay đổi cú pháp cho độc quyền CSS từ IE8 trở đi sử dụng tiền tố - (dấu gạch nối) mà các trình duyệt khác đã được sử dụng cho yonks.

Về mặt kỹ thuật, CSS cũng không tuân thủ W3C, vì vậy một dòng CSS độc quyền khác không thể gây hại.

Không đáng để hiểu IE ở mức tốt nhất!