รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การ Hack CSS ด้วย Conditional Comment

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