CSS hack IE
200920 May
ตามปกติแล้ว css จะถูกอ่านตามลำดับ ถึงแม้ว่าจะเป็นคำสั่งที่เหมือนกัน แต่คำสั่งสุดท้ายเท่านั้นที่ ถูกใช้งาน ดังตัวอย่างข้างต้นสีพื้นหลังจะเป็นสี #000000 เท่านั้น สี #ff0000 จะไม่มีผล
div{ background: #ff0000; }
div{ background: #000000; }
แบบที่ 1 : คำสั่ง !important ทำงานที่บรรทัดนี้เป็น Priorty แรก
div{ background: #000000; }
ไม่ว่าคำสั่ง background: #ff0000 !important; จะอยู่ส่วนไหนของเอกสาร(ลำดับการเขียนไม่เป็นผล) คำสั่งนี้เท่านั้นที่จะถูกทำงานเป็น First priority แต่คำสั่งนี้ใช้ได้กับ IE7 และ versionที่ต่ำกว่า IE6,IE5.5
แบบที่ 2 _property: value and -property: value
เนื่องจาก CSS specification ได้สงวนการขึ้นต้นคำสั่ง(property)ด้วย ขีดล่าง(_) or ขีดกลาง(-) ไว้ใช้กับ vendor-specific property name จึงทำให้คำสั่งที่ขึ้นต้นด้วย _,- ไม่ถูกอ่านจาก browser สมัยใหม่ ยกเว้น ie6 เท่านั้น ที่ยังอ่านคำสั่งนี้ได้อยู่
p{ color: black; _color: blue; // IE6 only }
จากตัวอย่าง ie6 จะอ่านทั้งสองคำสั่ง แต่จะสั่งให้ทำงานได้เฉพาะคำสั่งสุดท้าย (วิธีนี้ลำดับการเขียน มีความสำคัญ) แต่ browser อื่นอ่านคำสั่งแรกเท่านั้น
แบบที่ 3 *property: value
p{
color: black;
*color:blue; // All below IE7
}
จะใช้ได้กับ IE7 และ versionที่ต่ำกว่าแต่ Firefox และอื่น ๆ จะไม่อ่าน *property: value applies the property value in IE 7 and below.
แบบสุดท้าย Conditional comments as a CSS hack
การสร้างเงือนไขเพื่อแยกการแสดงผล IE แต่ล่ะ version โดยแยกไฟล์แต่ล่ะ version IE
<head>
<title>Test</title>
<link href="all_browsers.css" rel="stylesheet" type="text/css">
<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>
<body>
<p>Test</p>
</body>
</html>
เำพิ่มเติมน่ะคับน่ะคับลองนำไปใช้กันดูผมว่าวิธีแยก condition เนี้ยน่าจะเข้าใจง่ายสุดและมีระเบียบดี ส่วนตัวผมชอบวิธีนี้แต่ถ้าใครชอบวิธีอื่นๆ ก้อลองนำไปใช้กันดู
* html {}
IE 7 and below
*:first-child+html {} * html {}
*:first-child+html {}
html > body {}
html > /**/body {}
Recent Opera versions 9 and below
html:first-child {}
คุณสามารถอ่านเพิ่มเติมได้จากที่นี้ขอจบแต่เพียงเท่านี้ไปอ่านกันน่ะคับ http://www.webdevout.net/css-hacks#in_css-import_media