Trong quá trình thiết kế web, điều làm đau đầu nhất đó là làm sao để trang web mà mình thiết kế có thể chạy tốt trên các trình duyệt. Nhất là khi khách hàng sử dụng những trình duyệt đã cũ như IE6 chẳng hạn. Tuy nhiên , với bài viết này, các bạn sẽ dễ dàng chỉnh sửa giao diện chạy tốt trên các trình duyệt như Firefox, Chrome, Safary và kể cả những trình duyệt lâu đời như IE6 trở về trước.
Mình xin giới thiệu các cách để hack css sau đây :
Cách 1 : Hack ngay trong file css
Đối với Firefox
html>/**/body .logo{margin-left:10px} /* chỉ firefox thôi */
html>body .logo{margin-left:10px} /* ie7 và firefox */
Đối với IE
.box {
margin-top:5px; /* tất cả các trình duyệt */
margin-top:8px\9;/*Tất cả cá trình duyệt IE */
*margin-top:8px; /* IE 7 và các IE thấp hơn */
_margin-top:8px; /* IE 6 và các IE thấp hơn */
_mar\gin-top: 8px; /* chỉ áp dụng cho thằng IE 6 */
_margin-top/**/:/**/ 10px; /* IE 6 luôn */
margin-top/**/:9px; /* IE 5.0 */
_margin-top:/**/ 22px; /* IE 5.5 */
}
* html .logo{margin-left:10px;} /* ie6 */
* + html .logo{margin-left:20px;} /* ie7 */
Google Chrome và Safari
/* trong google chrome màu chữ sẽ là màu đỏ */
#test1{color:green;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#test1{color:red;}
}
Google Chrome và Opera<10
/* Chữ màu đỏ cho opera và google chrome */
#test2{
color:green;
-bracket-:hack(;
color:red;
);
}
Nếu bạn chỉ muốn hack cho riêng trình duyệt Chrome thì dùng :
#test3{
/* màu đỏ sẽ được dùng ở google chrome */
color:green;
(-bracket-:hack;
color:red;
);
}
Hoặc :
/* màu đỏ sẽ được dùng ở google chrome */
#test4{
color:green;
-bracket-:hack[;
color:red;
];
}
SAFARI
/* css cho Safari đây */
.box {
margin-top:5px;
padding:5px;# // đây là phần hack css cho safari
}
OPERA
.myclass { background-color: red; } /* tất cả các trình duyệt */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.myclass { background-color: yellow; }
} /* Opera */
@media all and (min-width:0px) {head~body .logo {margin-left:10px;}} /* chỉ opera */
Cách 2 : Để css hack ngay trong thẻ <head> với các câu lệnh điều khiển if….else
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" />
< ![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" />
< ![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->
Ở cách trên , muốn hack css ở trình duyệt nào thì các bạn viết css tương ứng cho file css tương ứng. Ngoài ra các bạn cũng có thể làm theo cách sau :
<!--[if lte IE 7]> <html> <![endif]-->
<!--[if IE 8]> <html> <![endif]-->
<!--[if IE 9]> <html> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
Và trong file css của bạn, bạn sẽ phải chỉ định theo từng trình duyệt như sau :
/* Áp dụng ở tất cả trình duyệt */
.element {
margin-bottom: 20px;
}
/* Áp dụng cho IE7 */
.ie7 .element {
margin-bottom: 10px;
}
/* Áp dụng cho IE8 */
.ie8 .element {
margin-bottom: 15px;
}
Trên đây là các cách để hack CSS trên các trình duyệt phổ biến hiện nay là Google Chrome, Firefox, IE, Opera và Safari. Nếu bạn nào có cách hack tốt hơn cho các trình duyệt hoặc biết cách hack cho những trình duyệt khác thì xin chia sẻ với mình và mọi người biết nhá. Mình rất mong sự đóng góp ý kiến của các bạn.