HTML5 เป็นคำรวมๆ ที่หมายถึง HTML5 และ CSS3 รวมถึง JavaScript ที่มักใช้กันด้วย (เช่น jQuery)
คิดว่าหลายๆ คนที่อ่านบล็อกนี้ น่าจะสามารถใช้งาน HTML กันได้ระดับหนึ่ง (เลยขี้เกียจเขียน) แต่พอมา CSS กลับเจอปัญหากัน บล็อกต่อไปนี้เลยคิดว่าจะแบ่งปันประสบการณ์ใช้งาน ไม่เน้นทฤษฎีมาก เน้นแนวคิดสั้นๆ เท่าที่เห็นว่าจำเป็นสำหรับการเริ่มต้น (น่าจะไม่กี่ตอน) ที่เหลือแนะนำให้ไปหาอ่านต่อเอาคร้าบ
เว็บภาษาอังกฤษ
- W3Schools รวบรวมละเอียดละออสุดแล้ว มีตัวอย่างพร้อม พื้นฐานแน่นเปรี๊ยะ
- CSS Tricks เกร็ดโค้ดน่ารู้ กิ๊บเก๋ยูเรก้า เขียนอ่านสนุก นับถือๆ
- Developer.mozilla.org คุณ Pittaya บอกว่าไม่ค่อยชอบ W3Schools แนะนำตัวนี้มา โอ้ ละเอียดยิบ น่าอ่านจริงๆ
- WebPlatform น้องบิ๊ก @Rabbitinblack แนะนำมา สวย อ่านง่าย ทันสมัย
เว็บภาษาไทย
- ThaiCSS หลักการหนักแน่น อ่านมึนเล็กน้อย หลังๆ เจ้าของหายตัวไปไหนเนี่ย มาเขียนต่อเร็ว 😀
- EnjoyDay อันนี้เค้าสรุปจาก W3Schools และที่อื่นๆ มารวมกัน วางเป็นบทเป็นตอนน่าเรียนมาก ละเอียดละออจริงๆ
- DesignIL เจ้านี้ยังแอคทีฟอยู่ (เย้) มีเปิดสอนด้วยนะครับ ขยันเขียนดีมากน้อง ชื่นชมๆ
- SiamHTML เจ้านี้ก็ทันสมัยมากๆ เขียนบทความดีๆ เยอะมากครับ
ตอนที่ 1 เพราะ Browser เราเกิดมาไม่เท่ากัน
CSS เป็นแนวคิดที่พยายามแยก “การนำเสนอ (Presentation)” ออกจาก “เนื้อหา (Content)” เพราะ HTML สมัยแรกๆ จับทุกอย่างปนกัน โค้ดแสดงทั้งเนื้อหาไปด้วย แสดงขนาด/สี/การจัดวาง ฯลฯ ไปด้วย สุดท้ายโค้ดรก แก้ยาก เลยเกิดการแบ่งเนื้อหาไว้ใน HTML และการนำเสนอไว้ใน CSS
ซึ่ง Browser เอง (เช่น IE, Firefox, Chrome) ก็ดันพัฒนาตามมาตรฐานไม่ทัน ทำให้แต่ละ Browser ตั้งค่าเริ่มต้นไปตามใจ เช่น ระยะระหว่างย่อหน้า, ระยะของบุลเล็ตต่างๆ, ตัวหนา, ตัวยกกำลัง ฯลฯ ทำให้การทำเว็บ ถ้าเราต้องการให้รองรับทุก Browser เหมือนๆ กัน เราควร “ตั้งค่าให้ทุก Browser แสดงผลเหมือนกันก่อน” ซึ่งฝรั่งเรียกว่า Reset (เริ่มต้นใหม่) หรือ Normalize (ทำให้เป็นปกติ)
คีย์เวิร์ดคือคำว่า CSS Reset, CSS Normalize
ตัวอย่างหมายเหตุใน normalize.css
ส่วนตัว ใช้มาหลายตัว พบว่าที่ชอบมากๆ คือ Normalize.css ที่พยายามจะใส่โค้ดน้อยสุด แต่แก้ปัญหาได้เยอะจริงๆ (Bootstrap เองก็ใช้โค้ดชุดนี้ด้วย) ในโค้ดเค้ามีหมายเหตุให้อ่านอยู่ว่าที่ใส่มาแต่ละบรรทัดนั้น เอาไว้แก้ปัญหาอะไรบ้าง
อีกตัวที่ชอบคือ HTML5 Boilerplate ที่แก้ปัญหาเยอะกว่าอีก (ลองอ่านบล็อก 20 Snippets You should be using from Html5 Boilerplate ก็จะเจอที่น่าสนใจเพียบ) แต่ส่วนตัวคิดว่าเยอะไปนิด เลยไม่ค่อยได้ใช้
หรือถ้าอ้วนสุดเท่าที่นิยมกันในตอนนี้ ก็คือ Bootstrap นั่นเลย คือนอกจากจะมีตัวช่วย Normalize แล้ว ยังมาพร้อมกับชุดโค้ดสำเร็จรูปอื่นๆ อีก (เดี๋ยวไว้ทำ Screencast อธิบายตอนอื่นๆ ครับ)
ต้องรองรับ Browser เก่าแค่ไหน?
การทำงานจริงให้ดูว่า เว็บที่เราจะทำ กลุ่มเป้าหมายใช้ Browser อะไรกันบ้าง การรองรับ Browser ยิ่งเก่า ยิ่งเพิ่มภาระในการพัฒนา (ซึ่งหมายถึงต้นทุนการทำเว็บที่เพิ่มขึ้น) ก็ต้องดูว่าคุ้มที่จะทำหรือเปล่า ส่วนตัวผมคิดว่า รองรับ IE8 ขึ้นไป ก็ครอบคลุมคนเกือบทั้งหมดแล้ว ดังนั้นเราก็ไม่ต้องใช้โค้ด CSS Reset รุ่นเก่าๆ ก็ได้ โค้ดจะได้ไม่รก ไม่หนักเครื่องโดยเปล่าประโยชน์
Normalize สำหรับภาษาไทย
สิ่งที่เว็บฝรั่งทำ มักจะดีสำหรับใช้ฟอนต์ฝรั่ง พอมาใช้กับอักษรไทยที่มีทั้งสระ วรรณยุกต์ การจัดวางที่ผมว่าน่าต้องแก้คือ
body {
line-height: 1.6em;
}
เพราะระยะระหว่างบรรทัดสำหรับตัวอักษรไทยที่อ่านง่าย ผมคิดว่าควรจะอยู่ประมาณ 1.5-1.6 เท่าของ ความกว้างตัว m ของขนาดฟอนต์ ณ ตำแหน่งนั้น (Bootstrap ใช้อยู่ที่ 1.42857143 ซึ่งผมว่ามันอึดอัดไปหน่อย)
ส่วนขนาดตัวอักษร เมื่อก่อนจอภาพไม่ละเอียด ตั้งค่าที่ฟอนต์ปกติใน body เป็น 12px ก็ใหญ่อยู่ แต่ตอนนี้หน้าจอละเอียดกันเยอะ (ไม่นับ Retina Display ด้วยนะ) ผมคิดว่าตัวอักษรที่อ่านง่าย น่าจะอยู่ที่ 14-15px ซึ่งใน Windows ถ้าเป็น Tahoma มันไม่ค่อยสวย ผมเองเลยมาลงตัวกับฟอนต์ Boon ในขนาด 16px ตามที่เห็นในเว็บนี้
แต่ผมตั้งฟอนต์ในหน่วย px เฉพาะ body นะ พอเป็น h1,h2,h3 ก็ใช้หน่วย em ดีกว่า เพราะเผื่อเราอยากแก้ขนาดฟอนต์ทีเดียวทั้งเว็บ เราก็เปลี่ยนแค่ฟอนต์หลักที่ body แล้วขนาดก็เปลี่ยนตาม ทำเว็บสะดวกขึ้น
การบ้าน
แนะนำให้ไปโหลดทุกตัวที่กล่าวถึงด้านบนมาเล่น ใส่เนื้อหาจำลอง, h1, h2 ต่างๆ (เอาจาก <html>ipsum ก็ได้) ยิ่งอ่านแนวคิดเบื้องหลังจะยิ่งรู้สึกถึงความอุตสาหะของคนสร้าง โค้ดแต่ละบรรทัดนั้นมีที่มาที่ไปเสมอ เห็นความใส่ใจขนาดนี้แล้วเราก็จะยิ่งรู้สึกว่า เราก็ต้องใส่ใจในงานของเราเช่นกัน
ปล. ชื่อตอน “เพราะ Browser เราเกิดมาไม่เท่ากัน” เอามาจาก บทความเรื่อง Grid อันนี้ เค้าบอกว่า Not All Browsers are Created Equal 😀 ส่วนรูป เอามาจาก หน้านี้ คนเขียนวาดได้สวยและกวนโอ๊ยจริงๆ 😀
