ผมยังนั่งงงอยู่กับชื่อหัวข้อบทความที่ผมเพิ่งตั้งไป เพราะไม่รู้จริงๆ ว่าจะตั้งชื่อบทความนี้ว่ายังไง อาจจะด้วยเรื่องของความด้อยในด้านภาษาไทย ไม่แกร่งในภาษาอังกฤษ หัวเรื่องบทความก็เลยออกมาในลักษณะนี้ ในเมื่อหัวข้อเรื่องไม่สามารถที่จะอธิบายให้เห็นภาพได้ เอาเป็นว่า ดูภาพตัวอย่าง แล้วเดี๋ยวผมจะค่อยๆ สาธยายเอาเองแล้วกันครับ
เรากำลังอยู่ในช่วงไหนของการเดินทาง กับการเขียน CSS Layout กันแน่ หลายคนยังสงสัย หลายคนก็ไม่สงสัยหรืออีกไม่น้อยไม่อยากจะรู้ ขอแค่เพียงทำมาหากินได้ก็พอ เพราะของบางอย่างไม่ต้องรู้เพราะมองไม่เห็นประโยชน์ ว่ามันจะเอามาช่วยประคองชีวิตต่อไปอย่างไรได้
เรื่อง ยุคสมัยของการเขียน CSS Layout นี้ จริงๆ มันก็ไม่ใช่เรื่องใหญ่ขนาดกู้วิกฤติการเมืองได้ แต่มันพอที่จะให้เรามองเห็นอนาคตข้างหน้าว่า ต่อไปแล้ว ชีวิตของเราในอาชีพนี้จะเดือนไปทางไหน
ผมขอแบ่งออกเป็น 3 ยุคใหญ่ๆ ดังนี้
ถ้าหากจะบอกว่าการทำความเข้าใจความหมายและรูปแบบการเขียน Selector ของ CSS นั้นมันไม่สำคัญ ก็คงจะไม่ใช่ เพราะว่าแท้จริงแล้วมันก็สำคัญในระดับพื้นฐาน บางคนอาจจะหลงลืมไป หลายๆ คนอาจจะไม่อยากใส่ใจมัน เพราะว่า "คิดว่า" มันไม่สำคัญ เพราะว่ามันก็แค่ชื่อเรียกใช่หรือไม่ เพราะในความเป็นจริงแล้ว ลูกค้าหน้าไหนจะเข้าใจถ้าเราไปนั่งอธิบายว่า อันนั้นคืออะไร อันนี้คืออะไร
เมื่อไม่นานมานี้ ผมเพิ่งเข้าใจว่า ผมไม่ได้เขียนเรื่องราวการทำเว็บ แต่เป็นเพียงแค่ส่วนหนึ่ง ผมกำลังพูดถึงการเขียนภาษาที่เกี่ยวข้องกับการทำเว็บอยู่ 2 ภาษา นั่นคือ HTML กับ CSS จึงสรุปได้ว่า นั่นคือสิ่งที่ผมกำลังทำ และจะทำต่อไป ผมไม่ได้เขียนบทความ หรือสร้างเนื้อหา พาคนมาทำเว็บ แต่กำลังแลกเปลี่ยนความรู้ ประสบการณ์ ของการเขียน CSS และ HTML ผมจึงไม่ค่อยสนใจเรื่องการทำเว็บ แต่ใส่ใจในหน้าที่ที่ต้องทำ เพราะอาชีพของผมคือ "เขียน HTML และ CSS" เพราะฉะนั้น ผมจึงขอพูดแค่นั้น เพราะอย่างอื่นไม่สันทัด
หลายๆ คนอาจจะสับสน ตีเหมารวมไปหมดว่า แค่สองอย่างนี้มันคือการทำเว็บทั้งหมด ซึ่งมันไม่ใช่ในความรู้สึกของผม ไม่ว่ามันจะใหม่ จะเก่าในเรื่องเนื้อหา บราวเซอร์ไม่รองรับ ลูกค้าไม่ต้องการ หรือคนอื่นมันยังไม่รู้เรื่อง แต่ผมก็คิดว่า นั่นมันเรื่องของเว็บ หรือเรื่องของคนทำเว็บ ไม่ใช่เรื่องของ "CSS หรือ HTML" ที่ผมทำอยู่ เพราะฉะนั้น ในเมื่อภาษามันเปลี่ยนแปลง มันก้าวหน้าไป ผมก็ต้องทำหน้าที่เพื่อที่จะศึกษาและพัฒนาในส่วนของงาน
วันนี้ มาดูกันแค่สั้นๆ กันลืม
จำเป็นแค่ไหน ที่เราต้อง Hack บราวเซอร์ เมื่อมาเขียน CSS
สามข้อข้างบน เลือกคำตอบเอาตามสบาย ไม่เลือกก็ไม่ว่ากัน เพราะต่างคนต่างมีเหตุผลและความรู้ ความคิดเป็นของตัวเองอยู่ในขั้นพื้นฐานกันอยู่แล้ว แต่สิ่งที่ต้องการมากที่สุดในแต่ละคำตอบคือ การสร้างความเข้าใจ
ในคำตอบนั่นต่างหาก หรือ ถ้าเลือกได้ ก็เลือกที่จะไม่ Hack หรือ ยังไงก็ Hack ไม่มีทางที่จะเป็น ฮอลล์ เด็ดขาด
ผมมี 2 คำถาม ที่ดูเหมือนกวนบาทาเป็นอย่างมาก แต่คำตอบนั้น แตกต่างกันโดยสิ้นเชิงและไม่ได้แสดงอาการกวนช่วงล่างของขาแต่อย่างใด
อาการ ไม่ไหวจะเคลียร์ เกิดขึ้นเมื่อ เลย์เอ้าท์ ที่อยู่ติดกันสองอัน กระโดดไป"ซ้นดากกัน" หรือภาษากลางเรียก ไปซ้อนกัน ทำให้หน้าเว็บเละ และพัง ดูแล้วเหมือนใส่น้ำปลาเยอะไป สาเหตุเกิดมาจากการใช้ Float property ของ CSS นั่นเอง
คำถามมีอยู่ว่า ทำไม เมื่อใช้ float แล้ว มันต้องเป็นอย่างนั้นด้วย เคยสงสัยถามกันบ้างใหม หรือว่า เห็นเขาพากันทำมาอย่างนั้น มันจึงต้องเคลียร์ ไม่รู้เลยว่าเคลียร์ มันมายังไง แค่เคลียร์แล้วมันหายก็จบ เสร็จแล้วก็คิดไม่พบ พอเจอปัญหาก็ clear:both; (บางคนออกเสียง เคลียโบ้ท แปลเป็นไทยถึกๆ ว่า "สละเรือ" หึหึ)
ผมคิดว่าเพื่อน ๆ หลายคนคงเคยใช้ grid system ร่วมกับการ design หน้า web page กันบ้างแล้วนะครับ ซึ่งการคำนวณ grid ใน design ของเรานั้นก็จะได้จาก สูตรนี้
เนื่องจาก designer บางท่านอาจจะไม่สันทัษเท่าไรนักในเรื่องการ coding อาจจะทำให้เกิด case ที่ผิดพลาดขึ้นได้ เช่น วาง object ไม่พอดี กับ บริเวณที่ Unit อยู่ ไปเกยอยู่ใน บริเวณของ Gutter ซึ่งเมื่อนำไปเขียน CSS นั้นจะมีปัญหา
อาจจะต้องทำการแก้ไขกัน (หรือ อาจจะเกิดการทะเลาะวิวาทกัน ระหว่าง coder และ designer ได้) ผมเลยพยายามยกตัวอย่างให้พอเห็นภาพกันก่อนเพื่อให้เกิด wired frame และ นำไปสู่การกำหนด framework เพื่อความเข้าใจตรงกันในทุกฝ่าย
ตัวอย่าง ผมจะลองกำหนดการรองรับค่าต่าง ๆ ไว้ เพื่อให้เกิดการเข้าใจในทิศทางเดียวกันในการกำหนด wire frames และ framework ในงานงานหนึ่ง หากผมต้องการ 1 Unit จะได้เท่ากับกี่ pixel และ ถ้า 2 Units จะได้เท่ากับกี่ pixel