Sitthiphorn Anthawonksa

ท้ายที่สุดแล้ว เราก็ได้ข่าวดี พร้อมๆ กันทั่วโลก Web Designers คงเป็นกลุ่มที่ยิ้มออกได้มากที่สุดกับข่าวนี้ Microsoft ประกาศตั้งค่าเรนเดอร์หน้าเว็บด้วยโหมด Web Standards เป็นค่า Default และบอกด้วยว่า IE8 ได้แยกระบบการ Render ออกเป็นสามแบบแล้ว หลังจากที่ชีวิตอยู่ในแสงรำไรมานาน สุดท้ายแล้วก็เจอทางสว่างเสียที

คำถามแรก ของคนส่วนใหญ่คือ จะเกิดอะไรขึ้น เมื่อเว็บผม เว็บฉัน ไม่ได้มาตรฐาน แต่เอาไปเปิดกับ IE8 ผมคงไม่พูดอธิบายอีกรอบ เพราะบ่นมาเยอะมากแล้ว เอาง่ายๆ วันนี้ลองเอา Opera 9.5 หรือ Firefox 3.0 เปิดเว็บดู คำตอบจะเจอได้ตามร้านขายยาทั่วไป

สิ่งที่ถูกต้อง มันก็คือสิ่งที่ถูกต้องอยู่วันยังค่ำ ผมก็ยังเชื่ออย่างนั้น จากนี้ไป มันกำลังจะแสดงออกมา ว่าเราจะสามารถสู้กับสิ่งที่ถูกต้องนั้นได้ยังไง

ข่าวประกาศจากไมโครซอฟท์

Microsoft Expands Support for Web Standards

ผมนึกถึงตอนที่ผมหัดเขียน CSS เมื่อสองสามปีที่ผ่านมา ตอนนั้นคิดอยู่อย่างเดียวว่า ต้องเขียนให้มันแสดงผลได้ใน IE ก่อน แต่พอศึกษาไป เรื่อยๆ กลับกลายเป็น ต้องเขียนให้ดูได้บน Modern Browsers ก่อน IE ค่อยตามมา ผ่านไปเกือบปี ถึงรู้ว่า ก่อนจะเขียน CSS ให้ไปหัดเขียน XHTML ใหม่เสียก่อน

เพราะถ้าเขียน XHTML ไม่ถูกหรือไม่ดี เขียน CSS ให้ตายก็ยากอยู่วันยังค่ำ

XHTML การเขียนก็แตกต่างกันออกไปอีก เขียน XHTML ให้ผ่าน W3C หรือ Markup ให้ถูกต้องนั้นก็ไม่ได้ยากเย็น แต่สิ่งที่ยากเย็นกว่าคือ เขียนยังไงให้ถูกตามหลักโครงสร้าง และหลัก Web Accessibility

XHTML และ CSS มีหลักการใช้งานแยกออกเป็นหมวดหมู่เหมือนกัน เช่น แต่ละ Element เอาไว้ใช้กับข้อมูลประเภทไหน ส่วน CSS บาง Property ที่เอาไว้ใช้กับ เสียง ภาพ หรือ page ก็จะมีคำสั่งแตกต่างกันออกไป แต่ตอนนี้ส่วนใหญ่เรายังสับสนอยู่แค่ อันไหนมันอินไลน์ อันไหนมัน บล๊อก อันไหนมัน ลิสต์ อันไหนมันตารางวะ

ผมเคยเจอกับตัวเอง ครั้งหนึ่งมีคนมาถามว่า ของบางอย่างมันใช้ยังไงหรือครับ ผมก็ตอบไปตามหลักการและทฤษฎี ที่มันต้องเป็น เขาถามต่อว่าทำไมมันต้องเป็นแบบนั้น เพราะที่เคยทำมาไม่เคยเห็นต้องเขียนแบบนั้นเลย ผมก็ตอบไปว่า ก็มันผิดไงหละครับ ก็ต้องปรับให้มันถูก แล้วมันก็จะสามารถเขียน CSS จัดการได้ง่ายและถูกต้อง ในเมื่ออธิบายเข้าใจยาก ผมก็ส่งลิงค์ W3C ให้อ่าน คำตอบที่ได้มาก็คือ ขี้เกียจอ่าน แต่อยากรู้ว่ามันต้องทำยังไง เล่าให้ฟังได้ไหม ผมก็ขอยอมแพ้หละครับ

ไม่เชื่อก็ต้องเชื่อ ว่าวันหนึ่งผมจะยอมแพ้

css2 และ css3 มีรูปแบบการใช้งาน selectors เพิ่มมากยิ่งขึ้นและแตกต่างกันออกไป มาดูกันว่า css3 มี selectors เพิ่มมา มากน้อยเท่าใด และเราจะเตรียมตัวนำไปใช้ได้อย่างไรกันบ้าง

เราจะเตรียมตัว ต้อนรับการมาถึงของ IE8 กันอย่างไรให้สมศักดิ์ศรี ถึงแม้ว่า ต้นมีนาคมนี้ ความไม่แน่นอน ยังคงมีอยู่สูงว่า จริงๆ แล้วเบต้า จะออกมาให้เราลองใช้กันทันหรือไม่ 5 มีนาเราคงเห็นคำตอบกัน แต่เรานั่งพิจารณาดูกันให้ถี่ถ้วนกันอีกสักนิดว่า เราจะนำ Selectors ทั้งสองเวอร์ชั่นเหล่านี้ มาใช้งานให้คุ้มกันอย่างไรบ้าง

ปัจจุบัน Selectors รูปแบบหลักๆ ที่เราใช้กันบ่อยมาก ก็คงจะมี

หลังจากที่ลองเล่นกับ CSS แบบ Liquid Layout ไปแล้วตอนนี้มาลองเล่นแบบอื่นกันดูบ้างครับ Elastic Layout เป็นรูปแบบการเขียน CSS ที่ผมนำมาเสนอเป็นรูปแบบที่สอง จะเป็นอย่างไรนั้น ตามมาดูกันครับ

การเขียนหน้าเว็บแบบ Elastic Layout มีสูตรที่ผมคิดขึ้นมาง่ายจากปกติ ฟ้อนท์ไซท์ 16px ซึ่งเป็นค่ามาตรฐานของบราวเซอร์ทั่วไป กับค่าเฉลี่ยนความกว้างหน้าเว็บที่ 950px ถ้าตั้งค่า body ให้ฟ้อนท์ขนาด 80% ของ 16px หรือ 0.8em ค่าความกว้างของ div หลักจะอยู่ที่ประมาณ 74em ค่าความกว้างเบื้องต้น ถ้าเรายึดเอาไว้ว่าจะใช้เท่าไหร่แล้ว อย่าพยายามเปลี่ยน เช่น ถ้ามีคนมาบอกว่า ตัวหนังสือในหน้ามันเล็กไป ขยายขึ้นอีกได้ไหม คำตอบคือได้ แต่ ขนาดหน้าเว็บจะขยายตาม เช่น ถ้าเราเปลี่ยน ขนาดตัวหนังสือจาก 80% หรือ 0.8em ไปเป็น 85% หรือ 0.85em หน้าเว็บจะยายกลายเป็นกว้างประมาณ 1008px ทันที ไม่ใช่ 950px อย่างที่เป็นตอนแรก จึงให้พึงระวังตรงนี้ไว้ด้วยนะครับ ถ้าเปลี่ยนไปแล้วอย่าลืมไปลดขนาดความกว้างของ div หลักลงไปด้วย

สำหรับใครที่จะหด ย่อ หรือขยายหน้าให้กว้างกว่านี้ก็เลือกปรับแต่งลองเล่นตามสบาย

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

สำหรับคนที่ยังไม่ได้อ่านรูปแบบการเขียนเลย์เอ้าท์ แบบต่างๆ สามารถอ่านเพิ่มเติมได้ที่ CSS Layout ในรูปแบบต่างๆ และ CSS Liquid Layouts (การเขียนเว็บเต็มหน้าแบบ 100%) จะได้เข้าใจการเขียน สามคอลัมน์แบบนี้มากยิ่งขึ้น

สิ่งที่เพิ่มเข้ามาในการเขียนแบบ สามคอลัมน์ีนี้ก็คือ ข้อมูลฝั่งขวามือ ซึ่งผมใช้ คลาส .added-content ลักษณะการเขียน ผมเขียนต่อจาก class .sidebar ก่อนที่จะขึ้น content จริง แล้วสั่ง float: right เพื่อที่จะให้กล่องลอยไปอยู่ด้านขวา และกลับไปที่ class .content จากเดิมที่ มี margin ทางฝั่งซ้ายอย่างเดียว กลายมาเป็นการเขียน CSS แบบ short hand อยู่ในการสั่ง shorthand property คือ margin: 0 21%; (เดี๋ยวจะมาเล่าอีก ในโอกาสต่อไปครับ) เมื่อเพิ่ม margin เข้าไปฝั่งขวา ก็จะเกิดช่องว่างเพิ่มอีก 21% เพื่อที่จะเหลือไว้ให้ .added-cotent เข้าไปสิงอยู่ได้พอดี

ก่อนหน้านี้ผมได้เขียนอธิบายคร่าวๆ ไว้แล้วว่า การเขียน CSS Layout มีรูปแบบคร่าวๆ กี่แบบ อย่างไรบ้าง ตอนนี้มาดูกันในแบบแรกเรื่อง Liquid Layout ทั้งแบบ 1 คอลัมน์ 2 คอลัมน์ และ 3 คอลัมน์