Tag: ie6

วันนี้ มาดูกันแค่สั้นๆ กันลืม

จำเป็นแค่ไหน ที่เราต้อง Hack บราวเซอร์ เมื่อมาเขียน CSS

1. – จำเป็นมาก จนถึงมากที่สุด เพราะเราต้องทำมาหาเลี้ยงชีพ ลูกค้ายังจุดธูปเทียนบูชา IE6 กับ IE7 ทุกวันอย่างนี้ ไม่ Hack ได้ไง
2. – ไม่จำเป็น Hack ทำไม เพราะเว็บที่กำลังทำอยู่ไม่ได้ต้องการทำมาค้าขาย ไม่เน้นการแสดงผลทางสายตา แต่เน้นด้านการสื่อสารข้อมูลเป็นสำคัญ
3. – ไม่รู้ว่าจะเลือกอธิบาย หรือเอาคำตอบไหน พี่ๆ เขาพาทำอย่างนี้ พี่ๆ เขาบอกว่า ฝรั่งทำเอาไว้ ทำตามไป ส่งงานได้เหมือนกัน

สามข้อข้างบน เลือกคำตอบเอาตามสบาย ไม่เลือกก็ไม่ว่ากัน เพราะต่างคนต่างมีเหตุผลและความรู้ ความคิดเป็นของตัวเองอยู่ในขั้นพื้นฐานกันอยู่แล้ว แต่สิ่งที่ต้องการมากที่สุดในแต่ละคำตอบคือ การสร้างความเข้าใจ ในคำตอบนั่นต่างหาก หรือ ถ้าเลือกได้ ก็เลือกที่จะไม่ Hack หรือ ยังไงก็ Hack ไม่มีทางที่จะเป็น ฮอลล์ เด็ดขาด

เมื่อเราใช้ !important เติมท้าย value ของ property ใดใดของ CSS โมเดิร์นบราวเซอร์ส่วนใหญ่นั้นจะเลือกทำตามคำสั่งนี้ แต่ทว่า IE6 หรือ เวอร์ชั่นต่ำกว่านั้น จะมีปัญหากับเจ้า !important นี้ คือ เมื่อมีการเขียน prooperty เดียวกันซ้ำเข้าไปใน attribute เดียวกันอีกครั้งนั้น เจ้า IE6 หรือ ในเวอร์ชั่นต่ำกว่านั้นจะทำตาม property ตัวเดียวกัน ที่เขียนไว้ล่างสุดแทน

พูดง่าย ๆ ว่ามันไม่เห็น priority value ของ !important ด้วยเหตุนี้เราสามารถเอาไปประยุกต์ใช้ในงานต่าง ๆ ของเราได้ ดังตัวอย่าง

p {background: green !important; background: red; }

เมื่อคุณลองนำไปเปิดใน modern browser ตัวหนังสือทั้งหมดใน p จะแสดงผลเป็น paragraph ที่มีสีพื้นหลังเป็นสีเขียว แต่ใน IE6 หรือ ต่ำกว่าจะแสดงเป็นสีแดงแทน

หวังว่าคงเป็นประโยชน์ในการนำไปใช้ครับ ขอโทษที่ไม่ได้เขียนเกี่ยวกับการ hack นาน

เพื่อน ๆ คงเคยกำหนดให้ box หนึ่ง box มีระยะห่างจาก box อีกตัวที่เป็นตัวครอบโดยใช้ float: left กันใช่ไหมครับ ฟังดูแล้วคงเหมือนง่ายใช่ไหมครับก็แค่กำหนด อะไร ๆ ตามปกติและเมื่อลอง preview กับ Modern Browser ทุกตัวก็ได้การแสดงผลออกมาที่เป็นปกติ แต่ลองเอาไปเปิดใน Internet Explorer 6 ดูสิครับ!! ทำไม ระยะห่างของ Margin ที่เรากำหนดนั้นมันเพิ่มขึ้นเป็นสองเท่า

ลองเขียน selector ขึ้นมาสักตัว เช่น:

.floatbox {	
float: left;	
width: 100px; 	
margin: 5px 0 5px 60px; 	
border: 1px solid black;}

จาก selector ข้างบนจะเห็นว่า ผมกำหนดให้ระยะห่างของ Margin ทางด้านซ้ายเป็น 60 pixels เมื่อลอง preview มันก็น่าจะให้ผลตามที่เรากำหนดนั้น

จากรูปเป็นการ preview ใน FireFox ซึ่งแสดงผลออกมาเป็นระยะปกติตามที่เราได้กำหนดให้กับ .floatbox คือ 60 pixels คราวนี้เราจะลองเอาไป preview ใน Internet Explorer 6 ว่ามันจะแสดงผลออกมา อย่างไร

ตามที่พรอยากให้เขียนนะครับ วันนี้ผมจะพูดถึงเจ้า 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 โปรแกรมตัวอื่น ๆ

ทำไมถึงบอกว่า เขาคือยักษ์หลับ ย้อนเวลาไปเนิ่นนาน หลังจากที่ ไมโครซอฟท์ไล่กวดหลัง America Online (Netscape) และแซงไป ทิ้งแต่ฝุ่นให้ Netscape ได้สำลักเล่น

เกิน 90% ของผู้ใช้อินเทอร์เน็ต ผู้ใช้ส่วนใหญ่ทั่วโลกสนใจ หันมาใช้ IE กันถ้วนหน้า และไมโครซอฟท์ ก็หยิ่งผยอง เพิกเฉยต่อการปรับเปลี่ยนเวอร์ชั่น หลังจากปล่อย IE6 ออกมา สิ่งเดียวที่ไมโครซอฟท์ทำคือการตามอุดรูรั่วต่างๆ ของบราวเซอร์ตัวเอง โดยที่ให้ความสำคัญกับ องค์กรกลางอย่าง W3C น้อยเกินความจำเป็น