ยุคสมัยของ CSS HTML Layout

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

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

ผมขอแบ่งออกเป็น 3 ยุคใหญ่ๆ ดังนี้

1. Table Layout
2. Floating Layout (Tableless layout)
3. Positioning Layout

Table Layout

ไม่ต้องอธิบายให้มากความ สำหรับยุคสมัยที่ Macromedia Dreamweaver ครองโลก หรือสมัยที่ W3C ยังเข้าไม่ถึงอาจเป็นเพราะการคมนาคมทางอากาศ ไม่สะดวก ภาษา CSS เป็นของแปลก ถึงแปลกมาก ภาษา XHTML ยังไม่ได้รับการประชาสัมพันธ์ HTML4 พ่อทุกสถาบัน และ พี่ใหญ่อย่าง Microsoft พยายามจะสร้างมาตรฐานของตัวเองโดยไม่สนใจโลกภายนอก IE6 เป็นพระเจ้า Firefox เพิ่งจะเกิด Nestcape ยังไม่ตาย

ยุคนี้คือยุค “Best view in 800×600” อย่างแท้จริง

ในเมื่อ W3C ชักช้า ประชาสัมพันธ์ของไม่ทัน Vender ที่ให้บริการมองไม่เห็นผลประโยชน์ที่จะต้องเปลี่ยนภาษาใหม่ การใช้ Tag <table> ของ HTML4 คือคำตอบเดียวที่จะสามารถจัดวางหน้าเว็บให้อยู่ถูกที่ ถูกทางตามที่ Designer ออกแบบมาให้ใกล้เคียงที่สุด Attribute และ Element ของ HTML ที่เป็นส่วนของ UI ถูกนำมาใช้เรียบวุธ

ด้วยการสนับสนุนจาก Adobe Image Ready อีกแรง ทำให้การตัดภาพออกมาง่ายมากแค่กระดิกนิ้ว

กลายเป็นสวรรค์ของ Web Designer ไป

ความเปลี่ยนแปลงที่เรียกได้ว่า นรกบนดิน ค่อยๆ คืบคลานเข้ามา มัจุราจผู้แสนดี หรืออัศวินม้าชาว ก็แล้วแต่ใครจะเรียก คล่อยๆ คืบคลานเข้ามา มันชื่อว่า “Google”

วิธีการเขียนหน้าเว็บเริ่มเปลี่ยนไป ภาษา XHTML+CSS เริ่มถูกนำเข้ามาใช้

คำว่า “การเข้าถึงอย่างเท่าเทียม” เริ่มเสียงดังขึ้น W3C เองก็เริ่มยิ้มออกมองเห็นหนทางในการกู้ชีพการเขียน HTML อย่างถูกวิธีและประโยชน์ในการประชาสัมพันธ์ภาษา XHTML ไปในตัว ภาษา CSS2 ที่เพิ่งจะประชาสัมพันธ์ก็จะได้ขจรขจายซักที

ความผิดเพี้ยนอย่างน่าขันอีกอย่างหนึ่ง ดันมาเกิดขึ้นตอนนี้ W3C เองต้านทานกระแสบางอย่างไม่ไหว คำว่า “การเท่าถึงอย่างเท่าเทียม” ดันถูกแปลความหมายไปไม่หมด แทนที่ คำเรียกทั้งสามทางคือ

1. คนตาบอด หูหนวก หรือมีแค่เม้าส์ ไม่มีคีย์บอร์ด ใช้งานได
2. Robot หรือ เครื่องมือค้นหา ใช้งานได้
3. User ที่รับข้อมูลผ่านทาง Screen ใช้งานได้
4. อื่นๆ

การเท่าถึงอย่างเท่าเทียม กลายเป็นกระแส “SEO” หรือ Search engine optimization ไปซะงั้น แทนที่ข้อมูลทั้งหลายด้านต้องกระจายองค์ความรู้ไปอย่างพร้อมๆ กัน ดันมาค้างอยู่ที่ว่า ทำเว็บให้ติดอันดับ “การค้นหา”

และแล้ว Tableless Layout ก็เข้ามา

Floating Layout

ทำไมผมถึงเรียก Floating layout นั่นหรือ ก็เพราะ เราใช้ Property float ของ CSS ในการจัดหน้าเว็บเป็นหลักนั่นแหละครับ

ปัญหาที่เกิดขึ้นอย่างใหญ่หลวงในยุคแรกๆ ของการไม่ใช้ Table ในการจัดหน้าเว็บคือ ปัญหาการเขียน HTML หรือ XHTML ซึ่งเป็นภาษาใหม่ ซึ่งส่วนใหญ่คิดว่าตัวเองเขียน HTML ได้ (ผมยังไม่รู้ด้วยซ้ำว่ามันคืออะไร) และคิดว่าภาษา HTML นอกจาก <table> แล้ว ก็มี <div> นี่แหละที่เอามาใช้ทดแทนกัน หน้าเว็บจึงกลายเป็น “ป่าดง div” อย่างเลี่ยง ไม่ได้

โทษรัฐบาลไทย ระบบการศึกษาไทย หรือ ครูไทย หรือ หลักสูตรการเรียนการสอนไป ก็เท่านั้น เพราะไม่ค่อยมีใครคิดว่าภาษา HTML มันสำคัญ คิดแต่ว่า “ก็แค่ HTML” เราจึงวนอยู่ในอ่าง จนกระทั่งทุกวันนี้ (ปีนี้เข้าสู่ปี 2553 แล้ว ผมจะของดูอีกสักปี) เพราะเทคโลโลยีมันวิ่งแรงแซงเหลือหลาย อดคิดไม่ได้ว่า มันต้องใช้น้ำมันเครื่องเวลลอย แน่นอน ทุกอย่างดูล้าสมัยไปหมด

Web Designer บ้านเราวิ่งกันฝุ่นตลบ กลายเป็นหนุมานคลุกฝุ่น ไปในบัดดล อยู่ดีดี ก็ต้องมายุ่งกับภาษาคอมพวเตอร์ โอ้ว แมนรับบ่ด้าย

ในเมื่อ แมนรับไม่ได้ ก็ต้องกลายเป็นอย่างอื่น จึงเป็นอาชีพเขียน CSS+HTML ขึ้นมา เพราะว่า แมนรับบ่ได้ นั่นเอง

ปัญหาที่ตามมา ของ Floating Layout คือ เราต้องตาม clear: both; ทุกชาติไป ทำไมนั่นหรือ คนที่สงสัยก็ กลับไปอ่านเรื่อง “ทำไม่เราต้อง clear” ได้

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

Positioning Layout

ขอต้อนรับเข้าสู่โลก Multi-touch

ผมขอค้างอันสุดท้ายไว้ก่อน เดี๋ยวจะมาต่อ เพราะ เรื่องมันยาว

มีความสุขกับการใช้ชีวิตครับ