Thursday 17 April 2008

CSS ความสำคัญสำหรับทุก Browser

ในที่นี้ใครต่อใครหลายคนคงรู้จัก CSS(Cascading Style Sheets) กันมาบ้างแล้ว แต่สำหรับคนที่ไม่รู้ผมจะสรุปง่ายๆคือมันเป็นการปรับแต่ง หน้าตาของ Website ให้ดูดีมีโครงสร้าง ไม่ต้องมาดู HTML ที่เต็มไปด้วย attribute มากมาย แถมยังทำให้ website โหลดช้า ดังนั้นเลยเกิด CSS ขึ้นมาช่วย แต่วันนี้ผมจะมาพูดถึงปัญหาของมัน ซึ่งจริงๆไม่ใช่ความผิดของ HTML หรือ CSS เลยเป็นความผิดที่ Browser แต่ละอันมีมาตรฐานไม่เหมือนกัน เช่น Firefox , IE , Opera , Safari ดังนั้นเวลาเราทำ Web แบบ Default โดยไม่ค่อยได้กำหนดค่าอะไรมาก เช่น ไม่ได้กำหนด Font-size เป็น 14 , Font-family เป็น Tahoma

เวลาไปเปิดใน IE ก็แบบหนึ่ง Firefox ก็แบบหนึ่ง แล้วไหนจะเรื่อง Margin กับ Padding สำหรับคนที่ยังไม่รู้ลองไปศึกษาเพิ่มเติมนะครับ โดยเรื่อง Default นั้นเคยเป็นปัญหาโลกแตกของผมมาแล้วครับ วิธีแก้ทำให้ทุกๆ Browser อ่านเหมือนกัน ถ้าพูดเป็นภาษาไทยให้เข้าใจง่ายก็คือ "จงบอก อย่าให้เขาคิดเอง" เขาที่หมายถึงคือ Browser นั้นเองไม่งั้นมันจะคิดของมันไปเอง ดังนั้น มีวิธีบอกง่ายๆดังนี้

body {
margin-top:0px;
margin-left:0px;
font-size:14px;
font-family:Tahoma;
}

หมายถึงในส่วนของ body ทั้งหมดให้ margin-top , margin-left เป็น 0 แล้วบอกว่าให้มันใช้ font tahoma ที่มีขนาด 14px ซึ่งถ้าไม่ทำเวลาเราไปเปิดใน Browser มันจะแสดงผลต่างกัน หวังว่าบทความนี้จะพอเป็นแนวทางให้ท่านสร้าง Web Page ที่ Run ได้ทุก Browser นะครับโดยหลักการทำง่ายๆครับ "เริ่มจากรากฐานแล้วค่อยไปส่วนอื่น" ดังนั้นทำ Default ก่อนเป็นเรื่องสำคัญมาก

No comments: