GIẢI PHÁP HỖ TRỢ HIỆU QUẢ TRÊN IE
3 Giải Pháp Hỗ Trợ Hiệu Quả Trên Internet Explorer
Trước kia, Internet Explorer ( IE
) là một trình duyệt tiến bộ nhất. Nhưng sau một khoảng thời gian ngưng phát triển,
IE đã trở thành ‘thảm họa’ đối với các nhà thiết kế web như chúng ta. Microsoft
đã cải tiến và cập nhật trình duyệt của họ, nhưng sự thật là IE vẫn đang tụt
hậu một chút so với các trình duyệt dựa trên WebKit và Firefox. Khi
làm việc, chúng ta vẫn cần phải để ý đến sự phù hợp với các phiên bản trước của
IE. Sau đây mình sẽ hướng dẫn làm thế nào để trang web của bạn làm việc
tốt hơn trong các trình duyệt của Microsoft.
htmlshiv.js
HTML5shiv của
Remy tạo ra các yếu tố HTML5 như main, header, footer… thông qua JavaScript.
Bằng cách nào đó các yếu tố được tạo ra thông qua JavaScript và bạn có thể dễ
dàng style cho chúng.
1
2
3
|
<!--[if lt IE 9]>
<script
src="dist/html5shiv.js"></script>
<![endif]-->
|
selectivizr.js
Selectivizr.js là một nguồn tài nguyên đáng kinh ngạc,
polyfilling sẽ load các selector và property không được hỗ trợ CSS, bao gồm các
last-child sử dụng !important. Trên một mẫu thiết kế lại gần đây, mình đã nhúng
selectivizr vào và nó hoạt động rất tốt trên các trình duyệt IE cũ. Đây là cách
sử dụng:
1
|
<!--[if lte IE 8]><script
src="js/libs/selectivizr.js"></script><![endif]-->
|
Bạn chỉ nên sử dụng load nó ra trên các
trình duyệt IE cũ.
Sử
dụng các <html> Conditinal Comment
Các conditional comment này trong có vẻ
xấu xí thật, nhưng xấu hay không, sự thật là chúng hoạt động rất hiệu quả và
chính xác:
1
2
3
4
5
6
|
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html
class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html
class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html
class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html
class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html
lang="en"> <!--<![endif]-->
|
Đoạn mã này ( snippet ) không yêu
cầu hoặc phải chờ tải JavaScript, các style này được xác định ngay lập tức.
Trong khi Internet Explorer đang dần bắt
kịp các đối thủ cạnh tranh, nhưng sự thật là các trình duyệt IE cũ vẫn còn được
sử dụng rất nhiều, đặc biệt là các nước đang phát triển ( Việt Nam chẳng hạn
). Tin tốt là các nguồn tài nguyên này sẽ làm việc tốt cho tất cả các trình
duyệt.
VÍ DỤ:
VÍ DỤ:
<!--[if
lt IE 9]>
<script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script
src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
No comments
Post a Comment