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 จะต้องด้อยกว่า หรือ ต้องเลิกใช้มันไปอย่างแน่นอน

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

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

Back to Top

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

  1. kaotest

    ที่น่ากลัวคงเพราะไม่เห็นภาพมั้งครับ

    เหมือนสมัยพี่จะเด็กๆ (7ปีก่อน 555)

    เริ่มเขียนเว็บด้วย notepad, editplus ตอนนั้นรู้สึกว่ายากชิป อะไรก็ไม่รู้ภาพก็

    ไม่เห็นว่าเว็บจะออกมายังงัย

    แต่ด้วยความตั้งใจ พี่พยามคิดว่าจะทำไงดีให้เราเขียน ออกมาโดยไม่ต้องเห็นภาพ พี่พยามปรึกษา ทั้งอาจารย์ เพื่อน แต่ก็ไม่ค่อยได้สาระไร(จอก) จนวันนึงได้เจอกับฝรั่งคนนึงในเว็บบอร์ด (experts-exchange.com) ก็เลยคุย

    กัน พี่ก็ถามเค้าว่า "เอ่อ.. คุณครับผมจะไปเอลเนลกี้ ฮอลล์ได้ยังงัยครับ เอ๊ยไม่ช่าย 555 ผมอยากเก่ง HTML มีทูลอะไรที่ช่วยผมได้บ้าง ช่วยแนะนำผมหน่อย" เค้าก็ตอบมาว่าได้จัยความประมาณว่า "คุณก็ต้องท่อง ๆ ๆ แล้วก็ลองทำ ๆ ๆ"

    นับแต่นั้นมา ก็ก็ท่อง ๆๆ แล้วก็ลองทำ ๆๆ ทั้ง HTML 2.0, 3.0, 4.0, ASP 1.0, 2.0, CSS 1.0 ท่องมันซ่ะจนจำได้เลย ตั้งแต่นั้นมา สิ่งเหล่านี้ก็กลายมาเป็นพื้นฐานที่ดี ต่อการทำงานของผมเลยครับ

    Reply

  2. Jack The Ripper

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

    ตรงนี้อยากให้ไปศึกษากันที่ csszengarden.com จะดีมากๆ แล้วลองโหลด html+css ของเค้ามาลองเล่นดูก็ได้ แก้แต่ที่ css อย่างเดียว ห้ามแตะ html ถ้าคิดว่าทำแล้วเจ๋ง ส่งไปโชว์เลยครับ ให้มันรู้มั่งว่า web designer ของไทยก็แจ๋วจริงเหมือนกัน

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

    Reply

  3. i-pum-

    ไม่กลัว css

    Reply

  4. tiamkeaw

    รออีก11ข้อ

    Reply

  5. javasci

    อยากใช้ กำลังรวมความกล้า

    Reply

  6. Artofid

    จริงๆกรณี ทำใหม่ดีกว่ามั๊ย ไม่ได้เกิดเฉพาะตอนแก้ไขงานแบบ table เท่านั้น ยังเกิดตอนที่ เราหัดทำ css แล้วอีก 5 เดือนกลับมาแก้อีกที จะพบว่า "ตอนนั้นกูทำอะไรลงไปวะ"

    *เดือนนี้ ครบ 1 ปีที่ผมหัด css พอดี(ถึงไม่ค่อยได้ทำก็เหอะ)

    Reply

  7. AnGiKo

    ถ้า database เยอะ ๆ ก็ต้องเอาตารางมาช่วยในการทำ…และยิ่งใช้กับ asp.net T-T เศร้าเลยพี่ปลา มัน gen code ออกมาเป็น table อีก

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top