Radiz Sutthisoontorn

เพื่อน ๆ คงเคยกำหนดให้ 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 ว่ามันจะแสดงผลออกมา อย่างไร

CSS ทำให้สิ่งที่ผมกล่าวมาในตอนที่ 1 นั้นเปลี่ยนไป และแน่ใจได้เลยว่า ถ้าได้ลองใช้ดูแล้วจะได้รู้ว่า ความฝันที่พวกเรานั้นเคยวาดไว้ มันจะเป็นจริงขึ้นมาเสียทีแล้ว เราจะต้องเริ่มทำความเข้าใจ มันจากอะไร Designer หลาย ๆ คนที่เริ่มทำงานกับ CSS นั้นจะรู้ได้เลยว่า ลักษณะโครงสร้างของ CSS นั้น แตกต่างไปจาก Table และก้าวข้ามขีดจำกัดของ Grid Design ได้สบาย ๆ เลย และมันสามารถลดสิ่งที่ไม่จำเป็นต้องใช้ออกไปจากงานของเราได้มากขึ้น และ ทำให้เราจัดการงานของเราได้ดีขึ้น ตอบสนองความต้องการจากไอเดียได้มากขึ้นกว่าเดิม (มองในแง่มุมของ Designer นะครับ)

CSS Visual Model เป็นได้ทั้ง lines และ boxes ซึ่งใช่มันเป็นส่วนหนึ่งของ Grid แต่เราสามารถทำอะไรกับ boxes ได้มากขึ้นไม่ว่าจะด้านในด้านนอกของ boxes หรือ เราอาจจะอยากให้มันไม่ทำหน้าที่เป็นเหมือน boxes ด้วยก็ได้ เราสามารถกำหนดคุณลักษณะให้กับมันได้อย่างอิสระตามที่เราอยากจะให้มันเป็น

ถ้าคุณยังไม่ทราบว่า Cascading Style Sheets (CSS) จะเอื้อประโยชน์อะไรต่อคุณ และ ลูกค้า หรือ กลุ่มเป้าหมายของคุณนั้น คุณสามารถศึกษา เกี่ยวกับตัวมันได้อย่างละเอียดตาม spec online นี้ เราจะยังอยู่ที่นี่เมื่อคุณ เข้าใจในตัวมัน และ กลับมาอ่านอีกครั้งหนึ่ง

ก่อนอื่นผมขอสาธยาย และกล่าวแนะนำเล็ก ๆ น้อย ๆ เกี่ยวกับตัวของมันก่อน CSS จะช่วยลด bandwidth ช่วยลดขนาดของไฟล์ (X)HTML ของคุณไปอย่างเหลือเชื่อ ไม่เหมือนกับการต้องมานั่งพิมพ์สั่งคำสั่งแสดงผลแบบเดิม ๆ ใน tag html การตกแต่ง layout ของคุณด้วย CSS จะทำให้เวลาในการโหลดนั้นลดลงอย่างเหลือเชื่อ เรื่องภาระในการแก้ไขก็จะไม่ยุ่งยากอีกต่อไป เพราะไฟล์ CSS เพียงไฟล์เดียวนั้นเราสามารถใช้ได้ทั้ง Website เมื่อต้องการแก้ไขเราก็ทำได้ง่าย ๆ ภายในเวลาอันสั้น

Style Sheets นำเราเข้าไปสู่ยุคสมัยใหม่ในการออกแบบ website ไม่ว่าจะเป็นการจัดแจงกับ media รูปแบบต่าง ๆ ที่เราต้องการนำเสนออย่างง่ายดาย ให้เราจัดการกับพื้นที่ในการแสดงผลต่าง ๆ ได้ดีเยี่ยม มีประสิทธิภาพ และ ได้ประสิทธิผลมากขึ้นกว่าเมื่อก่อนที่ user จะต้องมานั่งปวดหัวในการหาข้อมูลของเรา ต้องมานั่งเบื่อหน่ายเมื่อ การแสดงผลมันไม่ตรงกับตอนที่ออกแบบมา ตั้งแต่แรกแล้วมันพลาดมันแตกเมื่อไหร่เราก็ไม่รู้ user ใช้ browser ต่างกันอีกก็ต้องมานั่งปวดหัวเข้าไปอีก CSS ให้เราในสิ่งที่เราไม่คาดคิดว่ามันจะทำได้ เช่น absolute position ที่ทำให้เราเล่นกลได้อีกเยอะ (ให้ดีนะ ไม่งั้นงง ทั้งคนทำ ทั้งคนดู), ทำให้รูปภาพและตัวอักษร ทำงานได้ในแบบที่เราไม่เคยคาดฝันมาก่อน หรือ ที่ฝรั่งเรียกกันว่า Interactive Manipulation และ มันยังทำให้เราสามารถจัดเรียง layout ของเราให้เป็นโครงสร้างเอกสารที่เป็นประโยชน์ และ เป็นอันหนึ่งอันเดียวได้ คือ Search Engine สามารถ เข้าใจและสืบค้นได้ง่ายมากขึ้น เข้าถึงข้อมูลได้รวดเร็วมากขึ้น และ ไม่ว่าจะใช้อุปกรณ์ หรือ เทคโนโลยีใดใด ก็สามารถดู และ แสดงผลออกมาในลักษณะเดียวกันได้ และ ที่สำคัญ ผู้อ่าน หรือ ผู้ใช้นั้นสามารถเข้าใจ และ เข้าถึงข้อมูลของเราได้อย่าสะดวกและรวดเร็ว (ไม่เว้นแม้แต่ คนพิการทางสายตานะครับ)

เดินผ่านร้านค้าตามริมถนน เห็นขนมไทย ๆ ที่สมัยเด็ก ๆ ผมชอบขอให้แม่ซื้อให้กินแล้ว ก็นึกอยากกินไม่ได้ พวกขนมครก ขนมรังผึ้ง ขนมใส่ไส้ที่อยู่ในห่อใบตอง คาดด้วยใบมะพร้าว รูปสามเหลี่ยมนี่โอชาเลยทีเดียว มันทำให้ผมอิ่มอร่อยได้ทั้งคืน

กับการนั่งทำงาน Job ที่รับมาตาเปียกตาแฉะไม่ก็นั่งหาอะไรอ่านไปเรื่อย ๆ ตามประสาคนชอบสอดชอบแส่หาเรื่องปวดกบาลใส่ตัว พอเห็นเจ้าขนมต่าง ๆ เนี่ยมันก็ทำให้ผมมาคิดได้ว่า เอ้อ! นะมันก็มีกรอบก็มีเหลี่ยม และ ก็รูปทรงอื่น ๆ หลากหลายเหมือนเวลาเรามานั่งแพลนทำ Layout ของ Website นี่ล่ะ

สี่เหลี่ยมของขนมรังผึ้ง กับ ขนมครกที่เป็นทรงกลม มันทำให้ผมนึกถึงการ Design Website ในสมัยก่อนเก่า ซึ่งเราจะต้องมานั่งคิดว่าเราจะตัดออกมาอย่างไรให้มันเป็นช่องสี่เหลี่ยม ที่เรียงรายออกมาได้อย่างเป็นระบบระเบียบ เพื่อที่จะจัดมันไว้ในตารางโดยไม่มีการผิดเพี๊ยนไปจากตอนที่เรานั่ง Design ใน Photoshop เนี่ย มันเป็นสิ่งที่ต้องทำจนเราจำจนขึ้นใจไปแล้วว่า เอ้อ … จะทำอย่างไรหนาให้มันออกมาเป็นเช่นนั้น ไม่งั้นมันคงจะตัด slice ออกมากันยากน่าดู (นั่งคิดมาก ๆ จ้องจอมาก ๆ มันอาจจะแปลงร่างเป็นหุ่นให้เราตกใจเล่นก็ได้นะ) แต่ผมเคยคิดนะว่าเมื่อไหร่มันจะทำได้มากกว่านี้นะ เหมือนกับตอนที่เราทำ Flash หรือ ตอนที่กำลัง Design มันออกมานั้น ที่เราอยากจะวางอะไรลงไปก็ได้ แต่พอวางอะไรที่มันเหนือหรือล้ำจินตนาการมาก ๆ ก็ต้องมานั่งลำบากปวดกบาลตอนมานั่ง slice อีก จะทำอย่างไรน้าถึงจะก้าวข้ามขีดจำกัดเหล่านี้ (ซึ่งตอนนั้นผมยังอ่อนต่อประสบการณ์ยิ่งนัก เพราะยังไม่มีใครผลิตแก๊ซโซฮอล) จะทำอย่างไรให้มันวางตรงไหนก็ได้แต่ออกมาแล้วเป็นความสวยงามเหมือนกับขนมครก มันทำให้ผมครุ่นคิดเป็นพัก ๆ แล้วมันก็จางหายไป ตามวันเวลาผมก็ Design Webpage ตามมีตามเกิดของผมไป ขังตัวเองอยู่ในตารางนั้น

สวัสดีครับวันนี้ผมไม่ได้มาทำสงครามนะครับ วันนี้โผล่มาแจก Tips แทน จากที่ได้มีคนถามผมบ่อย ๆ ว่าทำไมพอเรา design layout ที่มันจะต้องมีการ float สองข้างก็คือ ซ้าย และ ขวาพอ test browsing ใน browser แล้วทำไมมันแสดงผลไม่หมดล่ะบ้างก็หายไปครึ่งนึง บ้างก็มาแบบบรรทัดเดียว อะไรประมาณนั้น

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