เขียน css ให้แสดงผลเฉพาะbrowser

การ filter เป็นการ hack วิธีหนึ่ง เป็นการจำกัด เบราเซอร์ที่จะแสดงผล ตัวอย่างเช่น

<style type=”text/css”>
*html body{background:green}
html>body{background:black}
</style>

ลองเอาโค้ดนี้ ใส่ไว้ในส่วน head ของเว็บเพจ แล้วลอง previewด้วย IE และ Firefox จะเห็นความแตกต่าง นั่นคือ IE จะสามารถอ่านบรรทัดบน ที่มี * ได้ ส่วน browser อื่นที่ไม่ใช่ IE จะไม่สามารถอ่านบรรทัดบน แต่จะอ่านบรรทัดล่างที่มีเครื่องหมาย > ได้ ดังนั้นเมื่อเปิด ด้วย IE เราจะเห็น bg เป็นสีเขียว เมื่อเปิดด้วย browser อื่น จะเห็นเป็นสีดำ

เราสามารถเลือกใช้รูปแบบใดแบบหนึงก็ได้ โดยการเขียนไว้บรรทัดล่าง เช่น

<style type=”text/css”>
ul li{color:green}
ul>li{color:blue}
</style>

IE จะอ่านบรรทัดบน ทำให้ตัวหนังสือใน li เป็นสีเขียว ส่วน เบราเซอร์อื่น อ่านบรรทัดบนเช่นกัน แต่สามารถอ่านบรรทัดล่างได้ด้วย ทำให้ บรรทัดที่อ่านสุดท้ายทำงาน จะได้ตัวหนังสือใน liเป็นสีน้ำเงิน

รูปแบบที่มักจะนิยมใช้คือ

*html body .class1{……..} หรือ
html>body #header{………}

เป็นการเขียนให้มี ความสำคัญสูงๆ ไม่ให้มี class หรือ id อื่น มาทำงานทับได้  เพราะเราต้องการ hack ให้อ่านบรรทัดนี้

Related Articles

• CSS Hack IE7 (12)
• css hack IE6 !!! (8)
• Conditional comments for IE (7)