Khi làm việc với mọi browser công việc cực khổ nhất là chỉnh layout + style của
wedpage sao cho tương thích mọi trình duyệt. Nhiều khi công việc có thể làm xong
trong 1 ngày nhưng phải mât 1-2 ngày để fix bug trên các browser, khó chịu nhât
là IE6,7 rồi đến safari trên MAC.
Giá như không có các trình duyệt đó thì cuộc đời dễ chịu biết bao nhiêu. Mình thấy
firefox,chrome,ie 8 là 3 browser dễ chịu nhất về thiết kế layout web và đồng thời
có nhiều tool hỗ trợ trực quan khi thiết kế. Có rất nhiều cách hack. Nhưng về cơ
bản chia ra làm 4 loại :
- * Conditional comment: dùng các comment có dạng if…else. Ưu điểm
là không phá vỡ chuẩn CSS, gom hack code tập trung 1 chỗ. Khuyết điểm chỉ hack cho
IE. - * Selector hack và Attribute hack : 2 loại hack có đa số cách lợi
dụng lỗi parse CSS của browser, còn lại lợi dùng version CSS hỗ trợ của browser.
Khuyết điểm phá vỡ chuẩn CSS, nhìn rối rắm khó nhìn, phải nhớ nhiều cách tùy vào
loại và version của browser cần hack. Người ta khuyến cáo không nên sử dụng, vì
lý do nó phá vỡ chuẩn CSS và có thể trong tương lai browser được fix bug nên không
có tác dụng nữa. - * Uncategory : Một số cách chưa phân loại. Khuyến cáo là không
nên nhưng nó giải quyết được công việc tức thời thì vẫn cứ sài.
[intlink id="hack-css-part-2" type="post"] 1. Conditional comment :[/intlink]
2. Selector hack:
[css]
/*<= IE 6 */
* html #your_id { }
/*<= IE 7 */
*+html #your_id { }
>body #your_id{ }
/*Các toán tử >,+ ,~ trong CSS 3 (CSS 2.x) cần có toán hạng đừng trước toán tử , đối với IE 7 thì nó mặc định nó sẽ thêm dấu * (tức là tất cả các element), còn các browser khác nó không parse được.
VD : >body IE 7 hiểu là *>body, còn các browser khác sẽ bỏ qua.
+p IE 7 hiểu là *+p, còn các browser khác sẽ bỏ qua*/
/*only IE 7 */
*:first-child+html #your_id { }
head ~ /* */ body #your_id { }
/*IE 7 và các modern browser (IE 8, Firefox, Safari,Chrome)*/
html>body #your_id { }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #your_id { }
/*IE 7,8*/
.your_class:not([className="your_class"]) { }
/*only IE 8*/
*:first-child+/**/html #your_id { color:green; }
/* Everything but IE6-8 */
:root *> #your_id { }
/* Opera 9.27 and below, safari 2 */
html:first-child #your_id { }
/*<= Opera versions 9 */
html:first-child #your_id { }
*:first-child+html #your_id .your_class {}
/*Safari 2*
html[xmlns*=""] body:last-child … { … }
body:last-child:not(:root:root) … { … }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #your_id { }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #your_id { }
body:first-of-type #your_id { }
/* Safari 2 – 3.1 */
html[xmlns*=""]:root #your_id{ }
/* Safari 2 – 3.1, Opera 9.25 */
*|html[xmlns*=""] #your_id { }
/* Firefox only. 1+ */
#your_id, x:-moz-any-link { }
/* Firefox 3.0+ */
#your_id, x:-moz-any-link, x:default { }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#your_id { }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px)
{
#your_id { }
}
/*Opera 7.2 up, 9 up, or 9.5*/
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0)
{
/* 7.2 up */
head~body … { /* 9 up */ }
:root … { /* 9.5 up */ }
}
[/css]
3. Attribute hack:
Lưu ý do có chứa ký tự đặc biết để hack css nên color của code hiện thị không đúng.
[css]
/* IE6
Bạn có thể add dấu – hay _ đằng trước tên của property , đảm bảo chỉ có <=IE6 hiểu. */
#your_id { _property: blue }
/* IE6, IE7 */
#your_id { *property: blue; }
#your_id { #property: blue; }
/* Everything but IE6 */
#your_id { property/**/: blue }
/* IE6, IE7, IE8 */
#your_id { property: blue9; }
/* IE7, IE8 */
#your_id { property/***/: blue9; }
*+html #your_id { property: red }
#your_id { property/***/: blue9; }
/*nếu muốn chỉ cho IE8 bỏ dấu ";"
Nếu muốn hack cho nhiều property thì bắt buộc phải viết trên nhiều dòng, mỗi dòng chỉ cho 1 property mà thôi
*/
#your_id { property1/***/: blue9 }
#your_id { property2/***/: yellow9 }
/* IE6, IE7 — acts as an !important */
#your_id { property: blue !ie; } /* string after ! can be anything */
/*This code will set property to blue in browsers, except for IE8. In IE8 it will be red.*/
div.class { property: red; }
div.class, #ie8#fix { property: blue; }
/*Nếu bạn muốn chọn
<p>
< a href="foo.html" id="linkhack" >
trên <= IE7
thì cả 2 selector #linkhack:link:visited {} #linkhack:visited:link {} đều đúng.
Bạn có thể kết hợp cả 2 để chọn a.#linkhack như sau
*/
#linkhack:link:visited, #linkhack:visited:link
[/css]
4. Uncategory :
!important IE 6 có vấn đề với
!important, dùng vd giải thích cho dễ
[css]
p
{
background: green !important; /* Đa số trình duyệt đều appy rule này */
background: red; /* Nhưng <= IE 6 thì apply rule này mặc dù background được set là green với important */
}
[/css]
Cho nên có thể lợi dụng cách dùng cách này để hack cho IE 6.
Hack min-height
[css]
selector
{
min-height:500px; /* các modern browser apply property này, nhưng IE6 thì không.*/
height:auto !important; height:500px; /*IE6 apply property này*/
}
[/css]
Hack max-width và max-height
IE 6,7 không hiểu max-width và max-height
Bạn có thể dùng cách sau để hack
[css]
.mainimage
{
max-width: 400px; max-height: 400px; width: expression(this.width > 400 ? "400px" : true);
height: expression(this.height > 400 ? "400px" : true);
}
[/css]
trong block expression là 1 javascript. Lưu ý chỉ có mình IE mới hiểu, thằng khác
không hiểu. Lưu ý : không hiểu vì sao
[css]
width: expression("400px"); /*không chạy được*/
width: expression(400 + "px"); /* thì chạy được*/
[/css]
Hack bằng script (http://api.jquery.com/jQuery.browser/)
Một cách hack CSS nữa đó là dùng jquery để set CSS cho element tùy theo browser.
Cách này có ưu điểm là trong tương lai không cập nhật nhiều và không phá vỡ chuẩn
CSS. Nhưng khuyết điểm này, nó không phân rõ giữa presentation(CSS) + structure
(HTML) và behavior (Javascript). Nhưng có đôi lúc tui phải bắt buộc dùng cách này,
mặc dù không thích lắm.
[code lang="js"]
if ($.browser.msie)
{
//nếu là IE
}
[/code]
Tương tự có :
[code language="javascript"]
$.browser.webkit : các browser opensource (chỉ có trên jquery 1.4)
$.browser.safari
$.browser.opera
$.browser.msie
$.browser.mozila
[/code]
Tham khảo
http://www.webdevout.net/css-hacks
http://paulirish.com/2009/browser-specific-css-hacks/
http://www.webcredible.co.uk/user-friendly-resources/css/hacks-browser-detection.shtml
http://cavemonkey50.com/2005/12/the-ultimate-ie-hack-guide/
http://www.fastechws.com/tricks/web/image-max-width-height.php