Một trong những tình huống khó xử lớn nhất đối với các nhà phát triển web là sự không tương thích của các phiên bản Internet Explorer khác nhau với các tiêu chuẩn web hiện tại. Mặc dù Microsoft đã hứa hẹn CSS3 và thậm chí hỗ trợ HTML5 cho IE9, người dùng Windows, đặc biệt là các doanh nghiệp, có thể tiếp tục sử dụng IE8, IE7, hoặc thậm chí là IE6 đáng sợ trong nhiều năm tới.

Kết quả là, mã hóa một trang web với các tính năng CSS3 độc quyền sẽ chỉ làm mất đi một phần lớn khách truy cập trang web của bạn và bắt buộc họ tải xuống trình duyệt tuân thủ tiêu chuẩn, như Mozilla Firefox hoặc Google Chrome, sẽ chỉ bị coi là kiêu ngạo.

Một giải pháp có thể cho vấn đề là sử dụng trình hiện đại hóa, là một tập lệnh hoặc ứng dụng sử dụng nhiều thủ thuật để làm cho trang web của bạn xuất hiện như trong tất cả các trình duyệt. CSS3 Pie là trình làm hiện đại dựa trên javascript giúp Internet Explorer nhận ra các tính năng CSS3 thú vị như các góc tròn, bóng đổ mềm và tô màu gradient. Nó nhanh chóng, dễ dàng và hoạt động phần lớn thời gian với rất ít tinh chỉnh.

Cài đặt và cài đặt

Hướng dẫn ngắn gọn này giả định rằng bạn đã có một trang web với các phần tử CSS3. Để có được CSS3 Pie hoạt động, bạn cần phải làm hai việc: tải lên gói javascript và thêm mã đặc biệt vào tệp CSS của bạn.

1. Việc tải xuống từ trang web css3pie.com bao gồm một số tệp, nhưng nếu mọi thứ diễn ra theo kế hoạch, tất cả những gì bạn cần là PIE.htc, là tệp văn bản được nén. Tải nó lên một vị trí trên máy chủ web của bạn, nơi tệp CSS của bạn có thể có quyền truy cập vào nó.

2. Mở tệp CSS của bạn trong trình soạn thảo văn bản của bạn và định vị các phần tử chứa các thuộc tính CSS3. Trong các phần tử đó, hãy thêm quy tắc sau:

 hành vi: url (PIE.htc);

Đường dẫn đến tệp PIE.htc của bạn cần phải chính xác, vì vậy nếu nó không nằm trong cùng thư mục với tệp CSS của bạn, hãy thay đổi nó cho phù hợp.

Phần tử cuối cùng sẽ trông giống như sau:

 # element1 {border: 1px solid # 696; đệm: 60px 0; text-align: center; chiều rộng: 200px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; nền: # EEFF99; hành vi: url (PIE.htc); }

Nếu nó hoạt động chính xác, bạn sẽ thấy kết quả trong IE 6, 7 và 8 ngay sau khi tải lên tệp CSS bị thay đổi.

Xử lý sự cố

Nếu bạn không thấy thay đổi gì cả, bạn có thể rất cần điều chỉnh đường dẫn đến PIE.htc của mình hoặc thậm chí sử dụng URL đầy đủ. Chỉ cần nhớ rằng IE sẽ chỉ chấp nhận một tệp htc từ cùng một miền với trang web và “www.site.com” và “site.com” được coi là hai tên miền khác nhau.

Trong một số trường hợp, bạn có thể cần thử PIE_uncompressed.htc hoặc thậm chí PIE.php để nó hoạt động chính xác. Tham khảo tài liệu để biết thêm chi tiết.

Tôi đã nhận thấy rằng sự kết hợp của tính minh bạch và văn bản in đậm kết quả trong một số từ điên rồ trong IE8. Bạn vẫn có thể cần phải sử dụng hình nền trong suốt trong những tình huống đó.

Sự kết hợp giữa CSS3 Pie và một số hàm jQuery dường như tạo ra lỗi trong IE. Tôi đã không tìm thấy một giải pháp cho điều này, nhưng trang vẫn tải và hiển thị chính xác mặc dù nó.

Hiện đại hóa

Với rất ít nỗ lực, CSS3 Pie có thể giúp trang web của bạn trông hấp dẫn nhất quán trong tất cả các trình duyệt chính, mà không phải đau đầu phải định hình hình ảnh góc hoặc tạo bóng đổ giả. Trang đầu của trang web bao gồm một bản trình diễn để bạn có thể điều chỉnh các thuộc tính CSS3 và xem kết quả trực tiếp trong Internet Explorer. Tốt nhất của tất cả các CSS3 Pie là miễn phí và mã nguồn mở và có sẵn để tải về miễn phí.