ความรู้พื้นฐานของ CSS

Floatting หรือการจับ element(s) ให้อยู่ชิดซ้าย ชิดขวา หรืออยู่ตรงกลาง ด้วยคำสั่ง float: left;, float: right; และ float: none;

ในการทำเว็บแบบ tableless นั่น การใช้ float เพื่อควบคุม div tag เป็นเรื่องสำคัญอย่างมาก ในการวางเลเอ๊าท์ให้กับหน้าเว็บเพจ เช่นการวางหน้าเว็บแบบ 3 คอลัมน์ โดยการสั่ง div tags เป็น float: left; ทั้งหมด ซึ่งถ้าหากเราต้องการจัดกลางหน้าเว็บ ด้วยการให้ div tag ซึ่งเป็น ตัวหลัก ครอบทั้ง 3 อันนี้ไว้ ต้องให้ค่า div หลักอันนั้นมี float เป็น none เป็นต้น

มาดูตัวอย่างการใช้ floats กับ div tags กันครับ ซึ่งมีข้อแม้เล็กๆ น้อยๆ ว่า กรณีที่ท่านได้ให้ค่า float ต่อ element(s) ใดๆ แล้ว ควร กำหนดความกว้างให้ element(s) เข้าไปด้วยนั่นเองครับ

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

– Fonts

Font Properties ไม่สามารถทำงานได้ตามปกติ การเพิ่มขนาด font ให้กับ heading ไม่สามารถกำหนด font-weight โดยใช้ bold กับ strong ได้ การเลือกใช้สีที่ไม่ถูกต้องตามอารมณ์ของมัน จะถูกแสดงผลออกมาเป็น สีเขียวสะท้อนแสง แทนที่จะเป็นสีจริง ๆ ที่เรากำหนด

– Margins และ Borders

Block elements ในส่วน top and bottom margins แสดงผลไม่ถูกต้อง ความสูงระหว่างบรรทัดทำให้ เหลื่อมล้ำ และ ซ่อนส่วนของภาพ ต้องมีการกำหนด border ที่ถูกต้อง การใช้ border กับ inline elements จะทำให้การแสดงผลใน browser พัง

– Background

สีพื้นใช้กับ Element and borderได้ไม่เต็ม ตำแหน่ง backgrounds ผิดเพี้ยนไป ชุดสีสำหรับ backgrounds ที่อยู่ใน anchor tags มองไม่เห็นภาพ background-image และ สีหายไปจาก elements ที่กำหนดไว้

– List

แสดงผลเฉพาะ bullet แต่ไม่แสดง text ออกมาให้เห็น list-style-type แสดงผลผิดไป การจัดวาง margin และ padding ไม่สามารถใช้ได้ในส่วนนี้

– Table

คราวที่แล้วพูดถึงการใช้ การเขียน Comment ของ CSS หลอกเจ้าลุง Browser ตัวนี้ไปแล้ว คราวนี้มาว่าต่อด้วยวิธีป่วน ลุง Browser ตัวนี้ต่อ เป็นวิธีที่เรียกว่า “วิธีง่าย ๆ” ก็ได้มั้ง ลุง Browser ตัวนี้เนี่ยแกจะไม่ทำงานกับ ID selector ใดใดที่มีการเขียนให้เรียกใช้แบบ จำเพาะเจาะจง งงมั้ยครับ ดูตัวอย่างข้างล่างนี้ละกัน

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

เหมือนเวลาที่ท่านเคยทำอะไรบางอย่างมานาน ทำแล้วทำอีก ทำแล้วทำอีก แล้วอยู่ๆ วันหนึงก็มี เงาลึกลับมาบอกท่านว่า ที่ท่านกำลังทำนั้น มันผิด มันมีทางที่ถูกต้อง ท่านควรลองศึกษาทางใหม่ดูบ้าง

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

การเรียนรู้สิ่งใหม่มันไม่ใช่เรื่องยาก มากมายอะไร แต่การบังคับจิตใจตัวเองให้ยอมรับนั้น มันยากยิ่งกว่าต่างหาก

ย้อนกลับไป เมื่อหลายปีก่อน ตอนที่ผมเพิ่งเริ่มทำเว็บใหม่ๆ เครื่องมือที่ใช้ก่อร่างสร้างเว็บก็ไม่ใช่ใครอื่นใด คือ ดรีมวีฟเว่อร์ 3 นั่นเอง

Netscape 4 Browser ตัวนี้หลาย ๆ คนใน ThaiCSS คงเลิกใช้ไปแล้วมั้งครับ แต่ผลการสำรวจทั่วโลกนั้นยังมีคนที่ยังใช้อยู่ ถึงแม้จะเป็นเพียงไม่ถึง 10% แต่ผู้ใช้เหล่านี้อยู่ในธุรกิจใหญ่ ๆ ที่เราไม่อาจมองข้ามไปได้เลยนะครับ

เช่น โรงงานอุตสาหกรรมใหญ่ ๆ ในหลาย ๆ ประเทศ, ห้องสมุดใหญ่ ๆ ตามมหาวิทยาลัยดัง ๆ ต่าง ๆ (รวมถึงมหาวิทยาลัยของผมด้วย) และ โรงพยาบาลดัง ๆ ในหลายประเทศ

ถึงตอนนี้คุณคงเกิดคำถามแล้วสิว่า “ทำไมวะ ทำไมมันยังใช้กันอยู่”

แหงสิครับถึงเค้าเหล่านั้นจะเป็น นักธุรกิจ หรือ คุณหมอ หรือว่าบรรณารักษ์คนเก่งของนักศึกษา แต่เค้าก็ไม่มีโอกาสที่จะเลือก เครื่องคอมพิวเตอร์ที่ทันสมัยไว้ใช้งาน หรือ ไม่มีความรู้เรื่องคอมพิวเตอร์มากเท่าเรา (จริงรึเปล่า Designer บางคนผมเห็นยังลงโปรแกรมเองไม่เป็นเลย) เพราะฉะนั้นไม่ต้องไปว่าใครหรอกนะครับ

“ลูกค้า คือ พระเจ้า” ท่องเข้าไว้

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

ผมเคยแนะนำไปแล้วว่าเราสามารถใช้ Comment ตบตา Netscape 4 แต่คราวนี้เรา จะมาใช้ Comment ตบตา Modern Browser ให้มองไม่เห็นคำสั่งบ้าง ให้คุณลุง Netscape 4 แกมองเห็นเพียงแต่คนเดียว

วิธีนี้ใช้ได้ผลชงัดแถม Valid กับ CSS Validator ด้วย เป็นเทคนิคที่ค้นพบโดย Fabrice Pascal วิธีนี้สามารถตบตาได้หมด ยกเว้น Browser ดังต่อไปนี้นะครับ

1. Netscape 4
2. Opera 4 และ 5 (Windows)
3. Opera 5 (Mac)

คราวนี้ก็เป็นประโยชน์สำหรับพวกเราล่ะ ถ้าเราต้องการเขียน CSS ให้ทำงานกับ Browser 3 ตัวที่ผมพูดถึงข้างบน ก็เขียนง่าย ๆ ดังตัวอย่างข้างล่างนี้ครับ