- Tham gia
- 28/02/2015
- Bài viết
- 16,833
- Được Like
- 12,691
Những giải pháp hack CSS trên IE10
Internet Explorer10 chưa phải là hoàn hảo nhưng thật đáng buồn là Microsoft đã bỏ đi một tính năng vô cùng hữu ích để giúp fix lỗi CSS trên IE đó là bình luận điều kiện lọc trình duyệt IE, có quá nhiều cách để hack CSS trên các trình duyệt IE cũ nhưng 'bình luận điều kiện' là cách thức dễ dùng nhất để mã css của bạn được validation, chúng ta mong đợi có nhiều cải tiến ở phiên bản mới của trình duyệt IE và IE10 phần nào đã giảm đi rất nhiều phiền toái cho các nhà phát triển web, với sự hỗ trợ CSS3 và HTML5 mạnh mẽ hơn trình duyệt IE10 đang lấy lại được thị phần của mình. Tuy nhiên không phải tất cả mọi thứ đều hoàn hảo, chắc chắn rằng sẽ có những thuộc tính CSS hiển thị không đồng nhất trên trình duyệt của các hãng khác nhau và trên từng phiên bản của trình duyệt đó, lúc này chúng ta không còn sử dụng bình luận điều kiện lọc trình duyệt trên IE10 được nữa, bạn có thể truy cập msdn.microsoft.com để xem mô tả về điều này, sau đây chúng ta sẽ cùng xem xét những giải pháp để hack css trên trình duyệt IE10.
@cc_on
Sử dụng một đoạn HTML bình luận điều kiện phủ định IE, với phiên bản IE6-9 sẽ bị loại bỏ bởi câu điều kiện này, tiếp theo ở bên trong đoạn đoạn điều kiện sẽ sử dụng một cú pháp được gọi là @cc_on. Xem ví dụ sau:
Đoạn javaScript bên trong đã thêm một class có tên 'ie10' vào phần tử gốc <HTML>, như vậy với class trên bạn có thể sử dụng để định kiểu CSS cho các phần tử trong tài liệu HTML của bạn và được sử dụng cho trình duyệt Internet Explorer 10
@media -ms-high-contrast
Một cách khác được giới thiệu bởi Alex Kloss
Tuy nhiên nó không làm việc với IE10 trên Window7, theo Alex Kloss có thể nó cũng sẽ làm việc trên IE11
@media Zero
Phương pháp này có tác dụng lên cả 2 phiên bản IE9 và IE10, bạn có thể xem thêm chi tiết cách hack trên các phiên bản khác tại blog của Keith Clark
Đây có vẻ là cách đơn giản nhất, nhưng chúng ta cũng không biết chắc rằng nó có còn hoạt động trên IE11 hay không. Có thể còn có những cách khác để hack IE10 nhưng chúng ta cũng có thể tạm hài lòng với những cách vừa nêu.
Chúc các bạn thành công.
Internet Explorer10 chưa phải là hoàn hảo nhưng thật đáng buồn là Microsoft đã bỏ đi một tính năng vô cùng hữu ích để giúp fix lỗi CSS trên IE đó là bình luận điều kiện lọc trình duyệt IE, có quá nhiều cách để hack CSS trên các trình duyệt IE cũ nhưng 'bình luận điều kiện' là cách thức dễ dùng nhất để mã css của bạn được validation, chúng ta mong đợi có nhiều cải tiến ở phiên bản mới của trình duyệt IE và IE10 phần nào đã giảm đi rất nhiều phiền toái cho các nhà phát triển web, với sự hỗ trợ CSS3 và HTML5 mạnh mẽ hơn trình duyệt IE10 đang lấy lại được thị phần của mình. Tuy nhiên không phải tất cả mọi thứ đều hoàn hảo, chắc chắn rằng sẽ có những thuộc tính CSS hiển thị không đồng nhất trên trình duyệt của các hãng khác nhau và trên từng phiên bản của trình duyệt đó, lúc này chúng ta không còn sử dụng bình luận điều kiện lọc trình duyệt trên IE10 được nữa, bạn có thể truy cập msdn.microsoft.com để xem mô tả về điều này, sau đây chúng ta sẽ cùng xem xét những giải pháp để hack css trên trình duyệt IE10.
@cc_on
Sử dụng một đoạn HTML bình luận điều kiện phủ định IE, với phiên bản IE6-9 sẽ bị loại bỏ bởi câu điều kiện này, tiếp theo ở bên trong đoạn đoạn điều kiện sẽ sử dụng một cú pháp được gọi là @cc_on. Xem ví dụ sau:
Mã:
<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->Đoạn javaScript bên trong đã thêm một class có tên 'ie10' vào phần tử gốc <HTML>, như vậy với class trên bạn có thể sử dụng để định kiểu CSS cho các phần tử trong tài liệu HTML của bạn và được sử dụng cho trình duyệt Internet Explorer 10
@media -ms-high-contrast
Một cách khác được giới thiệu bởi Alex Kloss
Mã:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
}Tuy nhiên nó không làm việc với IE10 trên Window7, theo Alex Kloss có thể nó cũng sẽ làm việc trên IE11
@media Zero
Phương pháp này có tác dụng lên cả 2 phiên bản IE9 và IE10, bạn có thể xem thêm chi tiết cách hack trên các phiên bản khác tại blog của Keith Clark
Mã:
@media screen and (min-width:0\0) {
/* IE9 and IE10 rule sets go here */
}Đây có vẻ là cách đơn giản nhất, nhưng chúng ta cũng không biết chắc rằng nó có còn hoạt động trên IE11 hay không. Có thể còn có những cách khác để hack IE10 nhưng chúng ta cũng có thể tạm hài lòng với những cách vừa nêu.
Chúc các bạn thành công.
Nguồn: sothichweb.com
Bài viết liên quan
Bài viết mới
