Accessibility Links

• Skip to Content
• Skip to Main Navigation
• Skip to thaicss.com Search
• Accessibility help
• Access keys help
• 

 

Conditional Comment ใน Internet Explorer

โดย Radiz เมื่อ 2007-08-21 10:47:11 ดูทั้งหมด 498 ครั้ง

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

• พูดคุยแลกเปลี่ยนกับ: Conditional Comment ใน Internet Explorer

  • ทั้งหมด 0 ความคิดเห็น
  • อ่านความคิดเห็นของ : Conditional Comment ใน Internet Explorer

• About Author: Radiz

  • 
  • Radiz

Back to Top

Tags:

1. ie
2. condition
3. comment

เนื้อหาที่เกี่ยวข้อง

1. Google Chrome สงครามบราวเซอร์ยกใหม่
2. เมื่อ Semantic กำลังใกล้เข้ามา (ภาค2)
3. IE8 เร็วกว่าที่คาดคิด
4. IE8 และ การพัฒนาของบุคคลากร Web ไทย
5. Microsoft Expands Support for Web Standards in IE8

หรือกำลังสนใจ

1. Google Chrome สงครามบราวเซอร์ยกใหม่

Unknown Version Unknown