CSS

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

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

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

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

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

เมื่อก่อนนี้ ผมคิดหาทางแก้ไขอยู่เหมือนกัน ว่าจะเขียนยังไงให้มันง่ายสำหรับคนทั่วไป

คิดไปคิดมา ก็ถึงบางอ้อ ว่า "ThaiCSS ไม่ได้มีสำหรับคนทั่วไป" นี่หว่า แสดงว่าหลุดกลุ่มเป้าหมาย เพราะฉะนั้น กลุ่มเป้าหมายมี ห้าคน ที่นั่งฟัง เราก็ไม่จำเป็นที่จะต้องพูดเสียงดังๆ เพื่อให้คนที่เดินผ่านมาผ่านไปได้ยินหรือพยายามให้เขาเข้าใจด้วย รบกวนเขาเปล่าเปล่า ถ้ามีคนอื่นสนใจ เดี๋ยวเขาจะมานั่งฟังเอง แต่บางที ถ้าห้าคนที่นั่งอยู่หนีหมด ก็แสดงว่าหมดอนาคต ผมพับเสื่อกลับบ้านได้เลย

ไม่ฉะนั้น มันจะหลุดกลุ่มเป้าหมาย

ส่วนใหญ่แล้ว คนที่คิดเขียน CSS ในตอนแรก คงคิดว่ามันง่ายๆ อะไรก็ได้ เช่น ผัดไทประตูผี หรือ ข้าวต้มราชวงศ์ อะไรประมาณนั้น แต่หารู้ไม่ว่า CSS มัน ซุปหน่อไม้ใส่ใบขิง ชัดๆ จัดเป็นอาหารเฉพาะกลุ่ม คิดจะกิน ต้องกินเป็นอาชีพ กินแบบพาร์ทไทม์ไม่ได้ แต่ก็อย่างว่า ตลาดมันไม่ค่อยกว้าง เสี่ยงต่อการอดตายสูง หากกินผิดหลัก ถ้าปฏิบัติตามมาตรฐาน อย. แล้ว รับรอง ได้ใบประกาศ แน่นอน ส่วนประกาศว่าเป็นอะไรนั่น ก็อีกอย่างหนึ่ง

การเขียน CSS แบบ Attribute Selector มีประโยชน์มากมาย มหาศาล แต่เรายังไม่ค่อยเห็นว่ามันแพร่หลายหรือเกลื่อนกลาดมากนัก นั่นก็เพราะว่า Attribute Selector เป็น CSS Version 2.1-3.0 ซึ่ง IE6 ไม่รองรับนั่นเอง จึงยังไม่เป็นที่นิยม

แต่สำหรับ CSS3 แล้ว ความหลากหลายของ Attribute Selector ได้ถูกเพิ่มเข้ามา คนที่ยังไม่เคยเห็น ผมขอแนะนำเอาไว้ตรงนี้ครับ

1. E[foo] คือ Element ใดๆ ที่มี Attribute ชื่อ foo เช่น div id=”main-contents”> ถ้านำมาเขียน CSS ก็จะเป็น div[id]{} หมายถึง div ที่มี attribute id อยู่

   ตัวอย่างที่ 1

   CSS:

   
div[id] {
width: 74em;
border: solid 0.02em rgb(200, 200, 200);
margin: 0 auto;
min-height: 5em;
}


บทที่ 1: เกริ่น

ถ้าหากจะบอกว่าการทำความเข้าใจความหมายและรูปแบบการเขียน Selector ของ CSS นั้นมันไม่สำคัญ ก็คงจะไม่ใช่ เพราะว่าแท้จริงแล้วมันก็สำคัญในระดับพื้นฐาน บางคนอาจจะหลงลืมไป หลายๆ คนอาจจะไม่อยากใส่ใจมัน เพราะว่า "คิดว่า" มันไม่สำคัญ เพราะว่ามันก็แค่ชื่อเรียกใช่หรือไม่ เพราะในความเป็นจริงแล้ว ลูกค้าหน้าไหนจะเข้าใจถ้าเราไปนั่งอธิบายว่า อันนั้นคืออะไร อันนี้คืออะไร

เมื่อไม่นานมานี้ ผมเพิ่งเข้าใจว่า ผมไม่ได้เขียนเรื่องราวการทำเว็บ แต่เป็นเพียงแค่ส่วนหนึ่ง ผมกำลังพูดถึงการเขียนภาษาที่เกี่ยวข้องกับการทำเว็บอยู่ 2 ภาษา นั่นคือ HTML กับ CSS จึงสรุปได้ว่า นั่นคือสิ่งที่ผมกำลังทำ และจะทำต่อไป ผมไม่ได้เขียนบทความ หรือสร้างเนื้อหา พาคนมาทำเว็บ แต่กำลังแลกเปลี่ยนความรู้ ประสบการณ์ ของการเขียน CSS และ HTML ผมจึงไม่ค่อยสนใจเรื่องการทำเว็บ แต่ใส่ใจในหน้าที่ที่ต้องทำ เพราะอาชีพของผมคือ "เขียน HTML และ CSS" เพราะฉะนั้น ผมจึงขอพูดแค่นั้น เพราะอย่างอื่นไม่สันทัด

หลายๆ คนอาจจะสับสน ตีเหมารวมไปหมดว่า แค่สองอย่างนี้มันคือการทำเว็บทั้งหมด ซึ่งมันไม่ใช่ในความรู้สึกของผม ไม่ว่ามันจะใหม่ จะเก่าในเรื่องเนื้อหา บราวเซอร์ไม่รองรับ ลูกค้าไม่ต้องการ หรือคนอื่นมันยังไม่รู้เรื่อง แต่ผมก็คิดว่า นั่นมันเรื่องของเว็บ หรือเรื่องของคนทำเว็บ ไม่ใช่เรื่องของ "CSS หรือ HTML" ที่ผมทำอยู่ เพราะฉะนั้น ในเมื่อภาษามันเปลี่ยนแปลง มันก้าวหน้าไป ผมก็ต้องทำหน้าที่เพื่อที่จะศึกษาและพัฒนาในส่วนของงาน

วันนี้ มาดูกันแค่สั้นๆ กันลืม

จำเป็นแค่ไหน ที่เราต้อง Hack บราวเซอร์ เมื่อมาเขียน CSS

1. – จำเป็นมาก จนถึงมากที่สุด เพราะเราต้องทำมาหาเลี้ยงชีพ ลูกค้ายังจุดธูปเทียนบูชา IE6 กับ IE7 ทุกวันอย่างนี้ ไม่ Hack ได้ไง
2. – ไม่จำเป็น Hack ทำไม เพราะเว็บที่กำลังทำอยู่ไม่ได้ต้องการทำมาค้าขาย ไม่เน้นการแสดงผลทางสายตา แต่เน้นด้านการสื่อสารข้อมูลเป็นสำคัญ
3. – ไม่รู้ว่าจะเลือกอธิบาย หรือเอาคำตอบไหน พี่ๆ เขาพาทำอย่างนี้ พี่ๆ เขาบอกว่า ฝรั่งทำเอาไว้ ทำตามไป ส่งงานได้เหมือนกัน

สามข้อข้างบน เลือกคำตอบเอาตามสบาย ไม่เลือกก็ไม่ว่ากัน เพราะต่างคนต่างมีเหตุผลและความรู้ ความคิดเป็นของตัวเองอยู่ในขั้นพื้นฐานกันอยู่แล้ว แต่สิ่งที่ต้องการมากที่สุดในแต่ละคำตอบคือ การสร้างความเข้าใจ ในคำตอบนั่นต่างหาก หรือ ถ้าเลือกได้ ก็เลือกที่จะไม่ Hack หรือ ยังไงก็ Hack ไม่มีทางที่จะเป็น ฮอลล์ เด็ดขาด

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

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

คำถามมีอยู่ว่า ทำไม เมื่อใช้ float แล้ว มันต้องเป็นอย่างนั้นด้วย เคยสงสัยถามกันบ้างใหม หรือว่า เห็นเขาพากันทำมาอย่างนั้น มันจึงต้องเคลียร์ ไม่รู้เลยว่าเคลียร์ มันมายังไง แค่เคลียร์แล้วมันหายก็จบ เสร็จแล้วก็คิดไม่พบ พอเจอปัญหาก็ clear:both; (บางคนออกเสียง เคลียโบ้ท แปลเป็นไทยถึกๆ ว่า "สละเรือ" หึหึ)