12 ข้อคิดสำหรับผู้ที่กลัว CSS และ Standards

ย้อนกลับไปเมื่อ 1 ปีเกือบ ๆ สองปี ที่แล้วที่ผมยังใหม่สำหรับ CSS-XHTML อยู่ มีอะไรหลายอย่าง ๆ ที่ต้องปรับตัวปรับระบบความคิดต่าง ๆ หลาย ๆ อย่าง ด้วยความคุ้นชินกับการ design ในแบบ old school อยู่ ปัญหาของผมมันมีหลายอย่างมากมายมโหระทึกเลย จะเอาเจ้านี่ไว้ตรงนั้น แล้วจะเอาเจ้านั่นลอยไว้ตรงนี้ มันอะไรของมันนักหนาฟะ …

สารพัดจะสบถตามประสาคนปากจัดน่ะนะ เวลาคร่าว ๆ ในการปรับตัวให้คุ้นชินกับมันก็ประมาณเกือบ ๆ 5 เดือนเลยทีเดียว และ อีกประมาณ 2 – 3 เดือนสำหรับการปรับตัวให้หลุดพ้นจากการคิด การออกแบบในแบบเดิม ๆ (เป็นอิสรภาพจากตาราง) ถึงกระนั้นเวลา 1 ปี ผมก็ยังไม่ได้เข้าถึงขั้น advance coding เท่าไรนัก เพิ่งเริ่ม hand coding รวบรัดตัดตอนก็เมื่อ 4 เดือนที่ผ่านนี้เท่านั้นเอง
มองไปยังสิ่งแวดล้อมที่เป็นอยู่ ณ ปัจจุบัน คุณจะเห็นว่า มีนักเขียนเก่ง ๆ หลาย ๆ ท่านที่มีประสบการณ์เขียนหนังสือดีดีเกี่ยวกับเรื่องนี้ (แต่ยังไม่ใช่ในบ้านเรา) เขียนเกี่ยวกับ CSS เขียนเกี่ยวกับการออกแบบ การลำดับความคิด เกี่ยวกับการทำงานอย่างไรให้ถูกต้องเป็นไปตาม Standards จะมีใครบ้างที่เห็นว่าเรื่องนี้มันเป็นเรื่องท้าทาย และ น่าทดลองทำในบ้านเราบ้าง (แต่เป็นเรื่องน่ายินดี ที่ตอนนี้ website ใหญ่ ๆ ในไทยเริ่มเคลื่อนไหวกันแล้ว เช่น sanook.com (เฝ้ารอวัน debut ในเร็ววันนี้อย่างใจจดใจจ่อ), kapook.com, mThai.com, pantip.com และ อื่น ๆ ที่ผมยังไม่ได้ตรวจทานทั้งหมด

แม้ว่า 3 site หลังนั้นยังเป็นการเขียนแบบกระท่อนกระแท่น แต่ผมก็เอาใจช่วยครับ ถือว่าคุณนั้นได้เล็งเห็นความสำคัญของ Standards แล้ว พยายามเพื่อ Standards ที่คุณคาดหวังไว้ครับ ต่อไปนี้มันคงจะไม่เป็นแบบเดิมแน่นอนเมื่อมีการแข่งขันนี้เกิดขึ้นในไทยแล้ว แต่ผมขอแนะนำอะไรซักอย่างหนึ่ง คือ การคิดใหม่ทำใหม่ตั้งแต่การคิด การจัดเตรียม content การ design การจัดลำดับความสำคัญไม่ใช่แค่ design เพียงผิวเผินเท่านั้น design ความคิดของคุณด้วย อะไรที่ไม่จำเป็นก็ควรตัดออกไปเสียบ้างใช้เท่าที่จำเป็น และ ไม่เป็นพิษเป็นภัยต่อผู้บริโภค

มันอาจจะดูสามหาวสำหรับมดตัวเล็ก ๆ อย่างผมที่เสนอความคิดเห็นนี้ออกมาก็ได้ (ตัวอย่าง portal site ยุคใหม่ที่นำ standard เข้ามาใช้ในการปรับปรุงออกแบบ MSN และ Yahoo) anyway กลับมาสู่เรื่องราวของเรา ประสบการณ์ทั้งหมดในการทำงานใน field นี้มันทำให้ผมพอมองเห็นประเด็นที่ควรเก็บมาคิดคำนึงเป็นข้อคิด หรือ บทเรียนสำหรับคนที่ยังมี “ความกลัว” หรือ “เกลียดชัง” คำว่า “CSS” และ “Web Standards” อยู่ผมก็เขียนจากเรื่องน่าเบื่อ น่าบ่นจากตัวของผมเอง และ เพื่อน ๆ designer ในสิ่งแวดล้อมรอบตัวผมนี่ล่ะ หวังว่าคงเป็นประโยชน์ไม่มากก็น้อยวะ (ป่านนี้คงจะมีคนด่า ว่าไอ้ห่า เมื่อไหร่มันจะเข้าเรื่องซักทีฟระ) โอเคลุยกันเลย

ข้อที่1: ทุกสิ่งทุกอย่างที่คุณรู้มันผิดหมด … เช่น

ครั้งแรกเลยผมต้องโยนทุกสิ่งทุกอย่างที่ผมเคยทำ เคยเรียนออกไปจากหัวเลย ไม่ว่าจะเป็นการ design การวางแผนที่จะ slice layout ออกมา เราเคย design แบบต้อง layout ด้วย table แต่เมื่อมาใช้ CSS ในการควบคุม layout แล้วเราสามารถ design อะไรได้แตกต่างไป ทีแรกผมก็ติดที่ว่า เฮ้ยยย !!! มันต้องมีที่มันทำไม่ได้มั่งแหละน่าทีแรก ๆ มันก็ใช่ แต่พอรู้ลึก ๆ ไปแล้วมันก็ทำได้เหมือนกัน และ ยืดหยุ่นกว่าด้วยซ้ำ ผลที่ได้ออกมาคือ ผมไม่จำเป็นต้องมานั่งหั่นนั่งซอยบรรจงให้ รูปภาพมันเล็กเพื่อลด bandwidth ในการโหลด หรือ ผมต้องมานั่งทำ table cell เพื่อเอาไอ้ภาพเหล่านั้นที่ผมหั่นอย่างกับเนื้อหมูมานั่งต่อเรียงกันเป็นตัวต่ออีก

ทีแรก ๆ ผมก็หั่นเหมือนอย่างเคยแล้วก็มานั่ง div ตะพึดตะพือ เรือหาย (ship หาย) วายป่วง แล้วเป็นไงล่ะ ผมก็ต้องสบถว่า แง่งเอ้ย ไมมันออกมางี้ฟะ ด้วยความโง่ของผมแหละครับเดาสุ่มสี่สุ่มหกไป ทั้ง ๆ ที่ site ฝรั่งที่เป็นตัวอย่างมีเยอะแยะ ขอโทษกูหยิ่งกูไม่เปิดดู กูจะดันทุรังทำของกูจะทำไมฟะ สุดท้ายผมก็ต้องมาเปิดดูมานั่งแกะ code เค้า มานั่งดูว่าเค้าหั่นกันยังไง ก็แปลกใจ อะไรฟะ ทำไมหั่นภาพใหญ่ ๆ เป้ง ๆ แบบนั้นมาเลยมันไม่หนักมันไม่โหลดช้ากว่าเดิมรึ … ไม่เลย เราตัดมาแต่ส่วนที่จำเป็นจะใช้จริง ๆ ไม่ต้องติดพ่วงไอ้ส่วนที่เราไม่ต้องการ หรือเล่นกับมันด้วยการซ้อนทับได้อีกต่างหาก ถ้าคุณเขียนได้เก๋าเกมจริง ๆ ไอ้เรื่องพวกนี้เราก็เอาไปประยุคใช้กับการ layout content ได้อีก เช่นข้อความนี้อยากให้อยู่ตำแหน่งไหน มันได้สบายบุรีเลยไม่ว่าจะ “อยาก” อะไร นี่เป็น ตัวอย่างในหลาย ๆ ความแตกต่างที่ผมยกมาให้ดู ลองมาเปรียบเทียบ ความแตกต่างระหว่าง การ code ด้วย TABLE MARKUP และ SEMENTIC MARKUP (CSS XHTML) กันดู

TABLE MARKUP
– เรียงกันเป็นแถว
– ดำเนินเป็นระบบระเบียบ
– ที่อยู่ของ content ต่าง ๆ ขึ้นอยู่กับลำดับของตาราง ที่ใส่มันลงไป
-เมื่อแก้ไข แทบจะต้องมานั่งไล่แก้ไปทีละตัว

SEMANTIC MARKUP

– ความยืดหยุ่นสูง
– ดำเนินเป็น object
-ที่อยู่ของ content ต่าง ๆ เรียงเป็นลำดับได้ไม่ว่าเราจะวางมันไว้ตรงไหน

-เมื่อแก้ไข ไม่ต้องมานั่งไล่แก้ทีละตัว ให้มันปวดหัวจะเห็นได้ว่า ข้อแตกต่างข้างบนมันก็โขอยู่ใช่มั้ยครับ มาเปรียบเทียบไปทีละข้อละกัน จากข้อแรก (เรียงกันเป็นแถว กับ ความยืดหยุ่นสูง)

ลองคิดดูว่า ถ้าเรา design ตามหลักการเขียน ไม่ได้ตาม content หรือ สิ่งที่เราต้องการจะสื่อนั้นมันจะรู้สึกอึดอัดอย่างไร คุณจะต้องบรรจุทุก ๆ อย่างของคุณลงไปตามช่องตารางเหล่านั้นเป็นลำดับ กับ คุณจะสั่งให้อะไรอยู่ตรงไหนก็ได้มันจะรู้สึกอย่างไร?
ข้อที่สอง (ดำเนินการเป็นระเบียบ กับ ดำเนินการเป็น object)

ใน CSS ทุกอย่างถูกมองเป็น “กล่อง” คุณอยากให้กล่องนั้นมันบรรจุอะไรก็ได้ และ อยู่ตรงไหนก็ได้ แต่กับ Table นั้นคุณต้องค่อย ๆ ลำดับบรรจุมันลงไปอย่างเป็นระเบียบ ลองทำไม่เป็นระเบียบดูสิ ความหายนะจะมาหาคุณ
ข้อที่สาม (ที่อยู่ต่าง ๆ ของ content ขึ้นอยู่กับลำดับของตารางที่คุณใส่มันลงไป กับ ที่อยู่ของ content ต่าง ๆ เรียงเป็นลำดับตามความสำคัญได้ ไม่ว่าในการ design  นั้นคุณจะเอามันวางไว้ตรงไหน)

อย่างที่ผมบอก การคิดแบบและมอง อย่างนักเขียน การที่คุณต้องการจะทำตาม Standard นั้นคุณจำเป็นจะต้องเรียงลำดับการ coding content ตามลำดับความสำคัญด้วย ซึ่ง table นั้นทำไม่ได้ เพราะเราต้องเอาข้อมูลใส่ไปในช่องตารางตามลำดับการ design ไม่ใช่ การเขียน content ตามลำดับ แล้ว กำหนดให้เป็นไปตามที่ design ด้วย CSS

ข้อสุดท้าย (เมื่อมีการแก้ไข แทบจะต้องมานั่งไล่แก้ไปทีละตัว กับ เมื่อมีการแก้ไข เราแค่ไปแก้ที่ CSS เพียงไฟล์เดียว)

จำได้สินะครับว่าเมื่อก่อนถ้ามีการปรับแก้ layout หรืออะไรบางอย่างมันแทบจะพูดเป็นเสียงเดียวกันว่า “ทำใหม่ เลยดีกว่ามั้ย” แต่กับ CSS แล้วไม่จำเป็นต้องถึงขนาดนั้นเราก็แค่เพียงแก้ ที่ไฟล์ CSS ที่เป็นตัว mock up layout ทุก ๆ อย่างเพียงไฟล์เดียวก็พอแล้ว

แต่อย่างไรก็จงจำไว้ว่า มีบางอย่างที่ Table can do และบางอย่างที่ CSS can do เพราะฉะนั้นก็ใช้วิจารณญาณกันไปแล้วแต่ใครจะคิดหรืออย่างไร แต่ผมว่ามันก็ไม่ได้ทำให้ CSS จะต้องด้อยกว่า หรือ ต้องเลิกใช้มันไปอย่างแน่นอน

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

พบกันรอบหน้าครับผม