วันนี้ผมจะพูดเกี่ยวกับการ Hack CSS ด้วย Conditional Comment ใน Internet Explorer หรือที่เพื่อน ๆ เรียกกันว่า Rules ให้ Internet Explorer นั่นเอง
Conditional Comment นั้นจะทำงานได้ในเฉพาะ Internet Explorer เท่านั้น เป็นส่วนที่ออกแบบมาเพื่อการนี้เลยเพื่อ เป็นการสั่งให้เพิ่มคุณสมบัติพิเศษ หรืออะไรก็แล้วแต่ให้กับ Internet Explorer และ Conditional Comment นี้จะทำงานได้กับ Internet Explorer ตั้งแต่ Version 5 ขึ้นไปและอาจจะเป็นไปได้ว่าการทำงานของมันใน IE5, IE5.5 และ IE6 จะแตกต่างกันด้วย
Conditional Comment จะเขียนในลักษณะนี้ครับ
<!--[if IE 6]>
คุณสมบัติพิเศษสำหรับ Internet Explorer เขียนที่นี่
<![endif]-->
โครงสร้างหลัก ๆ ของมันก็คือ เหมือนการเขียน comment ธรรมดาใน (X)HTML TAGs ซึ่งนั่นก็คือ การเขียนแบบนี้ “<!– –>” นั่นเอง ซึ่ง browser ตัวอื่น ๆ นั้นจะมองเห็นมันเป็น comment ธรรมดา ๆ เท่านั้นเอง และ จะอ่านข้ามไป
Internet Explorer นั้นถูกกำหนดมาให้มองเห็นและทำงานตามคำสั่งก็ต่อเมื่อได้เห็น การเขียน comment นี้ “<!– [if IE] –>” เท่านั้น เมื่อ Internet Explorer เจอมันจะมองเป็นคำสั่ง ๆ หนึ่งเหมือนเขียนกับที่มันอ่าน (X)HTML TAGs หรือ Script โปรแกรมตัวอื่น ๆ
Conditional Comment นั้นจะเขียนได้ในเฉพาะไฟล์ HTMLเท่านั้น หรือ พูดง่ายเขียนได้ร่วมกับเฉพาะ TAGs (X)HTML เท่านั้น ไม่สามารถเขียนไว้ในไฟล์ CSS นะครับ และ นี่นั่นเองที่เป็นเครื่องมือให้เราสามารถสั่งให้มัน Link ไปหา style sheet ที่ออกแบบมาพิเศษเฉพาะเจ้า Internet Explorer หรือ คุณสมบัติพิเศษอื่น ๆ ที่เรานั้นต้องการจะให้มันเป็น หรือ แสดงผลครับ
ตัวอย่าง
เราจะลองเพิ่ม Conditional Comment หลาย ๆ แบบต่อไปนี้ลงไปในไฟล์ (X)HTML ของเรา เพื่อให้มันแสดงข้อความต่าง ๆ ดังนี้
Note
Conditional Comment เหล่านี้จะแสดงผลออกมาทั้งหมดถ้าคุณใช้ Internet Explorer ที่เป็น Version สูงสุดในการแสดงผล (ตั้งแต่ IE6 ขึ้นไป)เราลองหา Internet Explorer หลาย ๆ version มาทดสอบ Conditional Comment ตามเงื่อนไขที่เราจะเขียนต่อไปนี้
<p><!--[if IE]>
ตามคำสั่ง Coditional Comment นี้ให้แสดงผลในทุก ๆ Internet Explorer
<![endif]-->
<!--[if IE 5]>
ตามคำสั่ง Coditional Comment นี้ให้แสดงผลเฉพาะในทุก ๆ Internet Explorer ที่เป็น version 5 เท่านั้น
<![endif]-->
<!--[if IE 5.0]>
ตามคำสั่ง Coditional Comment นี้ให้แสดงผลเฉพาะใน Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
ตามคำสั่ง Coditional Comment นี้ให้แสดงผลเฉพาะใน Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
ตามคำสั่ง Coditional Comment นี้ให้แสดงผลเฉพาะใน Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
ตามคำสั่ง Coditional Comment นี้ให้แสดงผลเฉพาะใน Internet Explorer 7
<![endif]-->
<!--[if gte IE 5]>
ตามคำสั่ง Coditional Comment นี้ให้แสดงผลเฉพาะใน Internet Explorer 5 หรือ สูงกว่า<br />
<![endif]-->
<!--[if lt IE 6]>
ตามคำสั่ง Coditional Comment นี้ให้แสดงผลเฉพาะใน Internet Explorer ที่ต่ำกว่า Internet Explorer 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
ตามคำสั่ง Coditional Comment นี้ให้แสดงผลเฉพาะใน Internet Explorer ที่ต่ำกว่าหรือเท่ากับ Internet Explorer 5.5
<![endif]-->
<!--[if gt IE 6]>
ตามคำสั่ง Coditional Comment นี้ให้แสดงผลเฉพาะใน Internet Explorer ที่สุงกว่า Internet Explorer 6
<![endif]-->
</p>
Special Syntax ที่เห็นมีดังนี้
- lt หมายถึง น้อยกว่า
- gt หมายถึง มากกว่า
- lte หมายถึง น้อยกว่า หรือ เท่ากับ
- gte หมายถึง มากกว่า หรือ เท่ากับ
คุณจะสังเกตเห็นได้ว่า Internet Explorer 6 นั้นจะแสดงผลออกมาหมดเลย ทั้ง ๆ ที่เรากำหนดว่าให้แสดงผลเฉพาะ Internet Explorer ที่ Version สูงกว่าซึ่งตรงนี้ผมคิดว่าทาง Microsoft ยังไม่ได้แก้ไขตรงนี้อาจเป็นเพราะ Internet Explorer 7 นั้นกำลังอยู่ในช่วงพัฒนาอยู่ก็เป็นได้ครับ ยังไงคงต้องดูกันต่อไป
การเขียน Conditional Comment นั้นเป็นการ Hack CSS หรือไม่?
จากที่ได้อ่านหลาย ๆ บทความท่านปรมาจารย์ทั้งหลายได้ยืนยันเป็นเสียงเดียวกันว่าใช่เพราะมัน สามารถทำให้เรากำหนดคุณลักษณะบางอย่าง และหรือ แก้ไขปัญหาให้เราได้ในบาง Web Browser ซึ่งเป็นคุณสมบัติหลัก ๆ ของการ Hack CSS ถึงแม้ว่ามันจะไม่ใช่การเอา bugs ของ browser ตัวหนึงไปแก้ปัญหาให้กับ browser อีกตัวหนึ่งอย่างที่ CSS Hack ควรจะเป็น แต่ว่ามันก็สามารถช่วยอะไรเราได้มากกว่าการ Hack CSS ด้วยซ้ำ (แม้ว่ามันจะเกิดเหตุการณ์นี้ไม่ค่อยบ่อยก็ตามนะ) สิ่ง ๆ นี้เกิดจากความจงใจไม่ได้บังเอิญเกิดขึ้นเพราะฉะนั้นผมคิดว่า เป็นเรื่องที่ไม่ต้องน่ากังวลอะไรมาก ที่เราจะนำมาใช้ แต่อยากให้ใช้ในกรณีที่จำเป็นจริง ๆ นะครับเราจะได้ลองฝึกฝนตัวเองก่อน ไม่ใช่ว่าเอะอ่ะ ๆ ก็จะแยก Style Sheet
รับทําเว็บไซต์ 
แลกลิงค์ 
