Sitthiphorn Anthawonksa

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

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

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

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

1. Liquid Layout (การวางหน้าเว็บแบบเต็มหน้า)

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

การเขียน Liquid Layout ข้อจำกัดอีกรูปแบบหนึ่งที่มีคือ การวางโครงสร้างของ Element ในกรณีที่เป็น 3 Columns ทำให้ Column ตรงกลางส่วนของข้อมูลหลัก จะถูกนำไปเขียนไว้เป็น Element สุดท้าย เพื่อที่จะใช้ CSS จัดการแสดงผลได้ถูกต้อง

ข้อดี

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

ผู้ใช้สามารถเลือกใช้ขนาดตัวหนังสือได้โดยที่หน้าเว็บไม่ผิดเพี้ยนไป

ข้อเสีย

ไม่สามารถใช้กราฟฟิคหวือหวา หรือรูปแบบเฉพาะบางอย่างในหน้าเว็บได้

ก่อนหน้านี้ไม่กี่สัปดาห์ ผมเขียนเรื่อง "IE8 ข่าวร้าย หรือข่าวดี" วันที่ 15 ธันวาคม หลังจากนั้นไม่กี่วัน วันที่ 19 ธันวาคม ทีมพัฒนา IE นำ IE ตัวใหม่เข้าทดสอบความเป็นมาตรฐานกับ Acid 2 ผลปรากฎว่า IE8 รันผ่านมาตรฐานการเป็นเว็บบราวเซอร์ ตามที่มาตรฐานกำหนดไว้ ถือเป็นข่าวดีรับปีใหม่กันเลยทีเดียว

สำหรับคนที่ยังไม่ได้เขียนเว็บเข้าสู่โหมดมาตรฐานอาจจะยังเฉยกับข่าวนี้ เพราะอาจจะคิดไม่พบว่า เมื่อ IE8 เข้าสู่โหมดมาตรฐานแล้ว จะส่งผลกระทบกับชีวิตการทำงานอย่างไรบ้าง เรามาดูแนวโน้มความเปลี่ยนแปลงกันตามประสาสักเล็กน้อยครับ ถ้าอยากจะรู้ว่า IE8 จะแสดงผลหน้าเว็บยังไง สามารถเปรียบเทียบได้กับการใช้ Opera 9.5 ในการเข้าเว็บ ทำไมถึงไม่แนะนำให้ใช้ Firefox ก็เพราะ Firefox 3 ยังไม่ฉลุยกับ Acid 2 นั่นเอง ในที่นี้ผมขอเพิ่มเติมเข้าไปในส่วนการ Render หน้าเว็บ ที่ใช้ CSS ของ Opera เข้าไปด้วย Opera รู้จัก Selector ของ CSS3 ที่อยู่ในสถานะ Candidate Recommendationและ Last Call อย่างหมดเปลือก ทั้งๆ ที่ Firefox 3 ยัง ทดสอบไม่ผ่านอีกบาน (last-child: ยังผ่านไม่หมดเลย) นั่นเลาๆ ได้ว่า IE8 คงฉลาดพอกัน (ผมอาจจะฝันไปเอง)

ทำอย่างไรจะให้ผู้ใช้ทั่วโลกหันมาใช้ IE8 กันถ้วนหน้า

กลับมาที่ html กับ xhtml กันต่อ สองภาษานี้คล้ายกันแต่ไม่เหมือนกันและถูกแยกออกเป็นคนละภาษา แต่สร้างขึ้นมาจากโครงสร้างภาษาเดียวกัน งงไหมครับ ถ้างง ก็นี่เลยครับ “สองภาษานี้เขียนไม่เหมือนกัน อย่าเอาไปผสมกัน” ง่ายๆ เลย ถึงแม้ว่า DOCTYPE

คำว่ามาตรฐานกับความนิยมในสองอย่างนั้นแตกต่างกันยังไงผมขอเล่าความสั้นๆ ก่อนนะครับ ว่า html กับ xhtml จะอยู่ร่วมโลกกันอย่างไร การจะเขียนอะไรลงไปในหน้าเอกสาร หรือหน้าเว็บนั้นให้เหลือบมองไปที่ DOCTYPE กันก่อนว่าเอกสารนั้นอยู่ภายใต้ภาษาอะไร ประเภทไหน ถึงแม้ว่าเราจะใช้ Adobe Dreamweaver ในการเขียนหน้าเอกสารขึ้นมาก็ตาม ขอให้ลืมการแสดงผลหน้าเอกสารของ IE6 และ IE7 ไปก่อน การที่เราเขียนเอกสาร วางโครงสร้างให้ถูกต้องตามหลักมาตรฐาน ใน User Agents ที่ได้มาตรฐานจะ Render หน้าเอกสารออกมาได้อย่างถูกต้อง แล้วทำไม IE แสดงผลไม่ถูกต้อง ก็เพราะว่า IE6 และ IE7 ผลิตขึ้นมาไม่ได้เข้าหลักมาตรฐานตามที่ W3C กำหนดนั่นไงหละครับ จึงแสดงผลหน้าเอกสารที่เขียนแบบ ผิดๆ ได้ แต่ Firefox หรือ Opera แสดงผลเพี้ยน ก็เพราะหน้าเอกสารเขียนผิด User Agents ทั้งสองที่ยึดหลักมาตรฐานก็แสดงผลออกมาผิดๆ นั่นเอง ในขณะเดียวกัน ที่ผ่านมา คนนิยมใช้ IE กันทั่วโลก ความถูกต้องจึงถูกละเลย จะไปสนใจบราวเซอร์อื่นทำไม ในเมื่อไออีแสดงผลได้ถูกต้องใช่ไหมครับ แต่เราลืมไปว่า สักวันข้างหน้าความจริงจะปรากฎ เฉกเช่นชั่วโมงนี้ เมื่อบราวเซอร์อื่นๆ ที่ไม่ใช่ ไออีเริ่มแย่งส่วนแบ่งทางการตลาดและคำว่า Web Standards เริ่มแพร่กระจาย อ้าแขนต้อนรับ Semantic Web เพื่อที่จะไปยุค Web 3.0 ยุคที่ความสำคัญของทุกอย่างไม่ว่าจะหน้าบ้านหรือหลังบ้านเท่าเทียมกันหมด เข้าถึงข้อมูลได้เหมือนๆ กัน

ไม่น่าเชื่อว่าผมจะใจจดใจจ่อกับการมาถึงของ IE8 ได้ขนาดนี้ เมื่อประมาณเดือนตุลาคม 2549 ผมเขียนบทความเรื่อง “มันมาแล้ว! บราวเซอร์ห่วย? หรือเปล่า” เพื่อก้มมอง IE7 เล็กๆ แต่ไม่คิดว่า แค่เพียงหนึ่งปีให้หลัง IE8 จะตามมาเร็ววันขนาดนี้

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

ผมลองๆ นึกดู ว่าการทำเว็บ XHTML CSS สามารถช่วยลดปัญหาโลกร้อนได้เป็นอย่างดีอีกทาง อย่างไร ก็ง่ายๆ ครับ แค่เขียนเว็บให้ถูกหลัก Web Standards และเป็นไปตามหลักการของ Semantic Web ใช้ External CSS แค่นี้ก็ช่วยได้ในระดับหนึ่งแล้วครับ มาดูกระบวนการแนวคิดมั่วๆ ของผมกัน

หลายคนอาจจะไม่ค่อยสนใจเท่าไหร่ว่า ลักษณะการเขียน CSS Selector ที่ใช้อยู่นั้นมันเรียกว่าการเขียนแบบไหน รู้แค่เพียงว่ามันใช้ประโยชน์ อย่างไรและเขียนแบบนี้แล้วแสดงผลแบบนั้นเป็นสำคัญ โดยหลักๆ แล้ว Class Selector (.) และ ID Selector (#) มักจะถูกนำมาใช้งานมากและบ่อยที่สุดก็น่าจะว่าได้ แล้ว Selector แบบอื่นที่เราเห็นหละ มันเรียกว่าอย่างไร มีหลักการใช้งานยังไงกันบ้าง

ตอนนี้ผมจะขอยกตัวอย่างการเขียน CSS ในการควบคุมการแสดงผลของ Navigation แล้วขออธิบายเป็นลำดับไปนะครับ โดยในที่นี้อยากจะเน้นไปที่การเขียน CSS แบบ Descendant selectors เป็นหลัก แต่ไม่ได้หมายความว่าผมจะละเลยการอธิบายเรื่องราวการเขียน CSS ในรูปแบบอื่นๆ ไป

Descendant selectors คือการเขียน CSS แบบสืบทอดคุณสมบัติตามแบบฉบับลูกหลานของ Element ใดๆ ที่อยู่ภายใต้ Element หลักที่เราสั่งงาน เช่นตัวอย่างต่อไปนี้จะแสดงถึง h1 ซึ่งเป็น ลูกของ div จะทำงานก็ต่อเมื่อ อยู่ใน div เท่านั้น