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

Back to Top

11 Responses to Conditional Comment ใน Internet Explorer

  1. pum

    ยอดสุด สุดยอดครับ

    Reply

  2. tiamkeaw

    ขอบคุณครับ

    Reply

  3. iake

    เพิ่งรู้จัก <comment> tag

    Reply

  4. radiz

    อีกบอร์ดนึงเค้าไม่ได้สอนเหรอครับ? :)

    Reply

  5. หนึ่ง

    เยี่ยมไปเลยครับคุณพร

    Reply

  6. พร อันทะ

    ว่าได๋หละอาว

    รดิส เขียนมาตั๊วนั่น บ่แม่นผม

    Reply

  7. radiz

    เป่ย … สั่นแหล่ว

    Reply

  8. jjb

    กาจ่างเลยงับอาจารย์ อิอิ

    ขอบคุงค๊าบ

    Reply

  9. radiz

    ยังไม่บังอาจเป็นอาจารย์ใครครับ ขอบคุณครับสำหรับ คำขอบคุณที่เป็นกำลังใจครับ

    Reply

  10. iannnnn

    ขอบคุณครับ *-*

    Reply

  11. สีค

    ko;\’o\’

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top