Conditional Comment ใน Internet Explorer

ตามที่พรอยากให้เขียนนะครับ วันนี้ผมจะพูดถึงเจ้า Internet Explorer จากค่าย Microsucks ที่อาจจะป่วนศีรษะเราหลาย ๆ คนให้กลัดกลุ้มใจเวลาทำงาน

วันนี้ผมจะพูดเกี่ยวกับการเขียน 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

Tips

Internet Explorer ทั้งใน Windows และ Mac นั้นสนับสนุน non-standard comment tag นั่นก็คือ tag “<comment></comment>” นั่นเอง แต่ browser อื่น ๆ นั้นจะไม่สนับสนุนครับลอง coding เล่น ๆ กันนะ

<p>browser ที่คุณใช้อยู่ <comment>ไม่</comment>ใช่ Internet Explorer</p>

ถ้า browser ที่ใช้ทดสอบเป็น Internet Explorer แล้วคุณจะเห็นข้อความเมื่อแสดงผลว่า “Browser ที่คุณใช้อยู่ ใช่ Internet Explorer” แต่ถ้า Browser ที่คุณใช้อยู่นั้นเป็น Browser ตัวอื่น ๆ คุณจะเห็นข้อความที่แสดงผลว่า “Browser ที่คุณใช้อยู่ไม่ใช่ Internet Explorer”

ขอโทษพร และ เพื่อน ๆ ไว้ด้วยนะครับช่วงนี้เวลาว่างไม่ค่อยจะมี เลยนาน ๆ จะได้แว่บมาเขียนไว้ซักหน่อยอย่างไรก็ขอบคุณเพื่อน ๆ ที่แวะเข้ามาอ่านครับ แม้นจะไม่มี comment หรือ feedback ใดใดกลับมาเลย แต่เห็นจำนวนคลิกก็

ขอบคุณแล้วครับ

เจอกันใหม่ครับ

radiz