มาประยุกต์ใช้ comments ใน CSS อย่างมืออาชีพกันเถอะ

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

ฝึกเขียนโค๊ต html และ css ให้ถูกต้องด้วย Markup Validation Services จาก W3C

ปัญหาอย่างหนึ่งที่มือใหม่หัดเขียนโค๊ตหน้าเว็บต้องเจอกันเป็นประจำก็คือ ไม่รู้ว่าหน้าเว็บที่เราเขียนนั้นมีความถูกต้องมากน้อยแค่ไหน และมีส่วนไหนที่จะต้องได้รับการปรับปรุง จากประสบการณ์ผมพบว่าแต่ละคนจะมีรูปแบบการเขียนที่ผิดบ่อยๆไม่เหมือนกัน เช่น บางคนอาจจะชอบเขียนสะกดผิด, บางคนชอบลืมเขียนแท็กปิด หรือบางคนมักจะลืมใส่ค่า attribute สำคัญของแท็กอย่างแท็ก <img> หรือ <a> ซึ่งตัวผมเองก็ประสบกับปัญหาต่างๆอย่างนี้เหมือนกัน แล้ววันหนึ่งผมก็พบว่าเครื่องมือที่จะช่วยดัดนิสัยการเชียนโค๊ตแบบผิดๆของเราได้ดีที่สุดคือ การเอาหน้าเว็บที่เราเขียนไปตรวจสอบความถูกต้องบนเว็บของ W3C* นั่นเอง

ยันต์แท็ก META มีติดหน้าเว็บแล้วจะดี… จริงรึ?

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

ความสำคัญของแท็ก DOCTYPE และวิธีการเลือกใช้

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

ID ปะทะ Class จะเลือกใช้อะไรดี?

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

มารู้จักหลักการ Specificity ใน CSS กัน

ต่อเนื่องจากบทความที่แล้วที่ผมได้อธิบายถึงหลักการ Cascade ไปแล้ว คราวนี้ลองมาทำความเข้าใจกับอีกหลักการหนึ่งที่คนเขียน CSS ทุกคนจะต้องเข้าใจ นั่นก็คือหลักการ Specificity หรือหลักการเฉพาะเจาะจง สรุปให้เข้าใจกันง่ายๆสำหรับหลักการ Specificity นี้ก็คือ เมื่อเว็บบราวเซอร์เจอกับคำสั่ง CSS ที่สั่งไปที่แท็กเดียวกัน เว็บบราเซอร์จะเลือกแสดงผลจากคำสั่งที่มีการเขียน Selector ที่เฉพาะเจาะจงกว่าเป็นหลัก เช่น

การเข้าใจหลักการ Cascade นั้นสำคัญไฉน

ผมจำได้ว่าครั้งแรกที่ไปค้นหาว่า CSS ย่อมาจากอะไร ซึ่งย่อมาจาก Cascading Style Sheet ผมสงสัยกับคำแรกมากๆว่ามันแปลว่าอะไร พอไปเปิดพจนานุกรมไทย-อังกฤษแทนที่จะเข้าใจมากขึ้นกลับงงกว่าเดิมที่ Cascade แปลว่า ที่ตกลงมาลดลั่นเป็นขั้นๆ สรุปว่า Cascading Style Sheet คือ แผ่นระบุสไตล์ที่ลดลั่นลงมาเป็นขั้นๆรึ? บ้าไปแล้ว สารภาพเลยว่าตอนนั้นแอบด่าฝรั่งมันอยู่ในใจว่าคิดคำน่าปวดหัวอย่างนี้มาได้ยังไง โดยหารู้ไม่ว่าเป็นหลักการที่สำคัญมากๆหลักการหนึ่งที่ผู้เขียน CSS จะต้องรู้

มาฉีดวัคซีนป้องกันโรค Divitus หรือโรคบ้า div กันเถอะ

สำหรับหลายท่านๆที่เคยผ่านงานเขียนหน้าเว็บมาก่อน จะต้องเคยเปิด Source Code ของบางหน้าเว็บขึ้นมาดู คงจะเคยงงกับหลายๆเว็บที่เปิดดู เพราะเห็นใช้แต่แท็ก <div> เต็มไปหมด หรือที่ฝรั่งเค้าเรียกกันว่าเป็นโรค Divitus หรือโรคบ้า div คือใช้แท็ก <div> กับข้อความทุกๆอย่างทุกๆเรื่องเสมือนกับไม่มีแท็กอื่นใดใน HTML ให้ใช้อีกแล้วนอกจากแท็ก <div> ซึ่งเป็นสัญญาณบอกได้เลยว่าผู้ที่เขียนหน้าเว็บนั้นขาดความเข้าใจในการเขียนให้ถูกต้องตามหลัก Web Standards อย่างแรง

ทำไมถึงต้องทำการ Reset ค่าคำสั่งของ CSS

ก่อนอื่นเราต้องรู้ก่อนว่าบราวเซอร์แต่ละตัวที่เราใช้ๆกันอยู่ ไม่ว่าจะเป็น Firefox, Internet Explorer, Chrome หรือ Safari ต่างก็มี Style Sheet หรือ CSS ที่เป็นค่าเริ่มต้นของตัวเอง เพื่อใช้ในกรณีที่หน้าเว็บที่เปิดไม่มี Style Sheet ของตัวเองในการแสดงผลบนหน้าเว็บบราวเซอร์ ซึ่งก็เหมือนๆกับหน้าเว็บที่เรายังไม่ได้ใส่ CSS เพื่อช่วยในการแสดงผลนั่นเอง

margin ปะทะ padding

ผมเชื่อว่าทุกคนที่หัดเขียน CSS ใหม่ๆจะต้องมีอาการมึนๆงงๆกับเจ้าคำสั่ง margin กับ padding กันทุกคน และผมก็เป็นหนึ่งในนั้น กว่าผมจะเข้าใจความแตกต่างและใช้ได้ถูกต้อง ก็ต้องใช้งมโข่งอยู่นานเหมือนกัน แต่ถ้าคุณได้อ่านหลักงานง่ายๆที่ผมอธิบายในบล็อกนี้จะรู้เลยว่าไม่ได้ยากอะไรเลย(จริงๆ)