Browser-Specific Css hacks

Bài đăng này đã không được cập nhật trong 7 năm

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;
}