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

ข้อที่8: Descendant selectors ก้าวใหม่ของการเขียน CSS rules

เมื่อคุณย่างก้าวที่จะเข้าสู่โลกของการ design แบบ tableless layout นั้น สิ่งที่คุณต้องคิดถึงไม่ใช่แต่เพียงคิดว่าจะจัดวาง container elements ของคุณอย่างไรแต่สิ่งที่คุณไม่ควรมองข้ามคือการจัดการ selector ของคุณด้วย ทั้ง id และ class ในความเป็นจริงเราไม่จำเป็นต้องยัดเยียดให้ทุก ๆ element นั้นถูกกำหนดการแสดงผลด้วย selector id หรือ class เสมอไป descendent selectors สามารถทำให้เราประหยัด class ประหยัด id ไปได้อีกเยอะ หรือ สามารถกำหนดเงื่อนไขอะไรให้กับงานของเราได้มากกว่าเมื่อก่อน ตัวอย่างเช่น

#bodycopy blockquote.critical {float: right; width: 30%; padding: .5em; margin: .5em;}

จากตัวอย่างข้างบน code ที่คุณเห็นนั้นหมายถึง blockquote ที่อยู่ใน #bodycopy เท่านั้นที่สามารถจะเรียก .critical ใช้ได้ จะเห็นได้ว่าเราสามารถเพิ่มลูกเล่นอะไรเข้าในเวปได้มากกว่าเมื่อก่อน ที่ใช้แค่กำหนดสีของตัวหนังสือ หรือสีเส้นขอบของตารางต่าง ๆ แค่นั้น

ข้อที่9: ความสนุกกับการ Hacks

ในการทำงานจริงนั้นแม้ว่าเจ้าหนู CSS และ Standards มากมายของเรานั้นจะถูกบัญญัติ หรือสร้างมาเพื่อความเป็นอันหนึ่งอันเดียวกัน แต่การ render การแสดงผลของแต่ละ browser ในแต่ละค่ายนั้นมันไม่เหมือนเพราะต่างฝ่ายต่างก็อยากจะตั้งบัญญัติของตัวเองขึ้นมาเหมือนกัน ดังนั้นบางครั้งการที่เรานั้นอยากจะให้งานของเรานั้นแสดงผลเหมือนกันในทุก ๆ browser เราก็ต้องใช้วิธีการอย่างหนึ่งซึ่งเรียกว่าการ hacks ความหมายของ css hack นั้นคือ การนำจุดบกพร่องของ browser หนึ่งมาทำให้อีก browser หนึ่งทำงาน หรือ แสดงผลได้ตามที่เราต้องการ ปัจจุบันมี hacks มากมายให้เราได้ศึกษาตาม internet แม้ว่าบางตัวอาจจะใช้ไม่ได้ไปแล้วเนื่องจากมีการแก้ไขไป หรือ บางตัวก็ยังคงใช้ได้อยู่ หรือ อาจจะมีการค้นพบอะไรใหม่ ๆ ขึ้นเพิ่มขึ้นมาเรื่อย ๆ ก็เป็นได้ ตราบที่ browser ทั้งหลายยังคงพัฒนากันอยู่

ข้อที่10: การทำงานกับ Rendering Bugs เรื่องเล็ก ๆ ที่ไม่ควรมองข้าม

การแสดงผลของ browser แต่ละตัวไม่เหมือนกัน และ browser แต่ละ version ด้วย บางครั้งเราก็ไม่ควรที่จะละเลยมันเพราะ user บางคนไม่ได้ติดตามเทคโนโลยีอย่างพวกเรา เราก็ควรที่จะเตรียมการสำหรับเรื่องนี้ด้วย บางอย่างก็หยวน ๆ บางอย่างสำหรับเรานั้นเป็นเรื่องเล็ก แต่ลูกค้าอาจจะเป็นเรื่องใหญ่ก็ได้ เพราะฉะนั้นเรื่องของการเก็บ requirement นั้นสำคัญมากนะครับ

ข้อที่11: เมื่อลงมือควบคุม layout ด้วย CSS แล้วอย่าลืมตรวจตราการ float การ clear ให้ถี่ถ้วน

หลังจากลงมือทำ design ที่มีการแบ่งข้อมูลที่เป็นลักษณะที่แยกแยะข้อมูลเป็น column เยอะ ๆ หรือ ระหว่างที่ทำควรทำการตรวจเชคเสมอ ๆ ว่า container elements ใดที่มีการ float หรือ clear ต่อเนื่องกันนั้นมีปัญหาการแสดงผลหรือไม่ตรวจสอบกับ browser ด้วยทุกครั้ง เพราะบาง browser จะมีปัญหาเกี่ยวกับการแสดงผล layout ที่มีการ float เยอะ ๆ เพราะฉะนั้น สืบเนื่องจากข้อที่แล้ว เราไม่ควรละเลยในการตามวิวัฒนาการของ browser และ ก็ไม่ควรละเลยที่จะสำรวจความเรียบร้อยของงานตัวเองด้วย (ขอให้แฟน หรือ เพื่อน ๆ เป็น tester ให้ก็ได้ ถ้าทำ code แล้วตาลายมาทั้งวัน)

ข้อที่12: Background Image จะทำให้ความรู้สึก และ มิติในการทำงานนั้นแตกต่างไป การจัดการกับพื้นที่ว่างนั้นจะง่ายขึ้นกว่าเมื่อก่อน

ต้องขอบคุณ CSS Box Model ที่เป็น concept ที่ยอดเยี่ยมความยืดหยุ่นของ CSS ทำให้เราทำอะไรได้มากกว่าแต่ก่อนอย่างที่ผมเคยบอกเราไม่ต้องปวดหัวว่าจะจัดช่องตารางอย่างไร จะเอาอะไรยัด ๆ ลงไปตามช่องตาราง เรารังสรรค์มันออกมาได้เลย เราสามารถทำ elastic layout ได้สะดวกขึ้น (อาจจะปวดหัวเรื่อง code นิดนึง แต่ก็เอาน่า อย่างน้อยมันก็เป็น Standard จริงมะ) ความยืดหยุ่นนี้ มันทำให้คุณสามารถเอา CSS มาปรุงแต่ง หรือ ใช้แทนภาพบางภาพได้ เช่น สีเส้นขอบ, ทำโปร่งใส หรือว่าจะเป็น การกำหนด position ของ background ไว้ที่ไหนก็ได้ของ container elements อีกอย่างยังทำให้ภาพเป็นตัวหนังสือเพื่อให้ได้ผลทาง SEO และ ใช้ได้กับ screen reader อีกด้วย (การใช้ภาพเป็นหัวข้อต่าง ๆ เราสามารถเอา CSS มาประยุกต์ใช้ เช่น background-image, text-indent, span, visibility และ อื่น ๆ) ซึ่งมันจะทำให้ความสวยงาม อยู่กับความเป็นประโยชน์สูงสุดในการใช้งานได้โดยสมบูรณ์

สุดท้าย

หวังว่าสิ่งที่ผมเขียนมาทั้งหมด คงจะเป็นประโยชน์ให้กับเพื่อน ๆ พี่ ๆ น้อง ๆ designer, programmer และ ผู้ที่สนใจ ได้นำไปใช้ หรือ เป็นความรู้เพิ่มเติมนอกรอบ เพียงน้อยนิดก็รู้สึกดีมาก ๆ แล้ว ในอนาคตตลาดของ Web 2.0, CSS และ Web Standard คงจะโตขึ้น หวังว่าคงจะได้นำไปเป็นเคล็ดในการนำไปประยุกต์ใช้ประโยชน์ในภายภาคหน้า

จะมีอยู่ จะหายใจ ใครจะสน

เพียงชีวิตหนึ่ง ของหนึ่งคน ค้นความหมาย

บางครั้งการเดินทาง มันช่างไร้ความหมาย หาสิ่งใด ไซร้ไม่มี

ขอบคุณ comment ทุก ๆ comment ขอบคุณความท้อแท้ ความเหนื่อย และ ความผิดหวัง แล้วผมจะกลับมาอีกในวันที่สภาพจิตใจดีกว่านี้ ขอบคุณ