แนวทางการเรียนรู้ CSS3 และ HTML5 ให้เกิดประโยชน์สูงสุด

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

แต่ถ้าหากว่า สิ่งที่มันมีอยู่นั้น มันอยู่ตรงไหนกัน “คำถามนี้ ถือเป็นปัญหาหลัก” ในแวดวงการทำงานในส่วนของ CSS และ HTML ของเมืองไทยเรามาหลายปี หรือจะบอกได้ว่าตั้งแต่เริ่มมีคำว่า Tableless หรือ CSS ไหลเข้ามาในหัวของนักพัฒนาเว็บชาวไทยโน่นเลยก็ว่าได้

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

โดยประสบการณ์แล้วผมเสียเวลาเรียนรู้ด้วยตัวเอง ลองผิด ลองผิดน้อย ลองผิดน้อยลงไปอีก อยู่นานหลายปี กว่าจะเริ่มค่อยๆ เข้าใจหลักการทำงานของภาษา CSS และ HTML ในขั้นต้น ผมไม่อาจกล้าที่จะบอกว่า ผมเข้าใจทั้งหมดทั้งมวลทะลุหูรูดของทั้งสองภาษานั่นแล้ว เพราะเราอยู่กับเทคโนโลยี ที่เปลี่ยนแปลงพัฒนาตัวเองตลอดเวลา หยุดชมโอ้เมื่อไหร่ เราก็ช้าเมื่อนั้น

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

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

Guideline สำหรับ อาชีพเขียน CSS และ HTML

อย่าดูถูก HTML

ทำไมผมจึงต้องเอาเรื่องนี้ขึ้นก่อน ทำไมผมจึงพยายามบอกเสมอว่า HTML ไม่ใช่เรื่องง่าย ผมเคยคิดว่าภาษา HTML ง่ายมาก มาแล้ว และเขียน HTML แบบผิดๆ มานักต่อนัก สาเหตุหลักๆ เพราะไม่รู้จักว่า HTML มันมีอะไรบ้าง ซึ่งเมื่อก่อนเราเขียนเว็บด้วยการใช้ <table> เป็นตัวนำ มีอะไรก็ <table> กว่าจะรู้ว่า <table> นั้น คือ HTML tag หนึ่ง ที่เอาไว้จัดการกับข้อมูลที่แสดงเป็น “ตารางเอกสารเท่านั้น” ก็เสียจริตกันไปนาน

ก่อนที่เราจะเลือกใช้ HTML ในหน้าเอกสารของเรานั้น เราต้องรู้ก่อนเป็นอันดับแรกว่า เนื้อหาที่เรากำลังเขียนอยู่นั้น มันประกอบไปด้วยการแสดงผลแบบไหนบ้าง เช่น แบ่งกลุ่ม Layout ไหม แสดงผลเป็น List ด้วยหรือไม่ มี Form กี่อัน มีตารางหรือเปล่า แทรกรูปภาพตรงไหน

ซึ่งการคิดแยกแยะตามย่อหน้าข้างต้นนั้น ภาษา HTML มี tags เอาไว้จัดการกับเนื้อหาที่แตกต่างกันทั้งหมด เพราะฉะนั้น เราจึงจำเป็นต้องเรียนรู้ภาษา HTML ก่อนเป็นอันดับแรก แยกแยะให้ออกก่อนว่า จะใช้ Element ใด ตรงไหน ไม่ใช่ <div> แหลก

แยกให้ออกว่า อะไรคือ CSS และ อะไรคือ HTML เอามาใช้ร่วมกันยังไง

ผู้ที่เพิ่งเริ่มศึกษาการเขียน CSS โดยส่วนมากแล้วมักจะสับสนว่าสองภาษานี้มันต่างกันตรงไหน ยิ่งทุกวันนี้คำว่า CSS ติดปากเป็นคำเรียกขานรวมเหมาทั้งคนเขียน HTML เข้าไปด้วยแล้วยิ่งไปกันใหญ่

HTML คือ ภาษาโครงสร้าง ไม่มี HTML เราก็ไม่รู้จะเขียน CSS ไปจัดการกับอะไร นอกจากจะไปเขียนจัดการกับ XML หรือภาษาอื่นๆ ที่อนุญาตให้ CSS จัดการได้ แต่ในที่นี้เราพูดถึง HTML

CSS คือภาษาที่เอาไว้ทำให้ HTML แสดงผลให้สวยงามตามท้องเรื่องในอุปกรณ์ต่างๆ (User Agents)

เพราะฉะนั้น ทั้งสองภาษาจึงควบคู่กันไป

เริ่มศึกษา HTML อย่างมีหลักการ

ผมคงไม่สามารถขอให้ทุกๆ คนเข้าไปอ่านวีธีการเขียน HTML หรือ หลักการของภาษา HTML ใน W3C ได้ทั้งหมด ซึ่งที่ที่สามารถศึกษาได้เป็นอย่างดีก็คือ เว็บของ W3C อยู่วันยังค่ำ

โดยเราควรเริ่มจากเรียนรู้ว่า HTML5 มีพฤติกรรมข้อมูลอยู่ 7 ประเภท และกลุ่ม Element อยู่ 15 หมวดหมู่ โดย 7 ประเภทของ HTML5 นั้นเอาไว้แยกแยะรูปแบบการวางโครงสร้างของเอกสาร ส่วน 15 หมวดหมู่นั้น เอาไว้จัดการกับเนื้อหาแบบต่างๆ ที่เกิดขึ้น เช่น <article> เราต้องบอกได้ว่า tag <article> นั้น อยู่ในหมวดหมู่ Sections (จาก 15 หมวดหมู่) ซึ่งมีพฤติกรรมข้อมูล เป็น Flow content และ Sectioning content (จาก 7 ประเภท)

เมื่อมองย้อนกลับไปยัง XHTML การแยกแยะหมวดหมู่ของภาษา ไม่ได้แยกเหมือน HTML5 เพราะ XHTML นั้นถือเอาการวางโครงสร้างเอกสารเป็นหลัก XHTML จะแยก Element ออกตาม Modules ซึ่งแต่ละ Module นั้นจะดูจากการใช้งาน เช่น Text Module มีอะไรบ้าง หรือ List Module มีอะไรบ้าง หรือ Form Module มีอะไรบ้าง (ทั้งหมดประมาณ 17 Modules) แล้วค่อยไปเจาะจงอีกทีว่า ค่าพื้นฐานแสดงผลแบบไหน แล้วมีกฎการใช้งานยังไง ซึ่งจะสวนทางกับ HTML5 เพราะ HTML5 นั้นวางกฎการใช้งานตามประเภทมาก่อน เพื่อที่จะแยกแยะรูปแบบการเขียนทีหลัง

หมวดหมู่ Elements ของ HTML5

The Root Element

html

Document metadata

head, title, base, link, meta, style

Scripting

script, noscript

Sections

body, section, nav, article, aside, h1-h6, hgroup, header, footer, address

Grouping contents

p, hr, pre, blockqoute, ol, ul, li, dl, dt, dd, figure, figcaption, div

Text-level semantics

a, em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd, sub, sup, i, b, mark, ruby, rt, rp, bdo, span, br, wbr

Edit

ins, del

Embedded content

img, iframe, embed, object, param, video, audio, source, canvas, map, area

Tabular data

table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th

Forms

form, fieldset, legend, label, input, button, select, datalist, optgroup, option, textarea, keygen, output, progress, meter

APIs for the text field selections

Interactive

details, summary, command, menu

Link and link type

Common idioms without dedicated elements

Matching HTML elements using selectors

หัวใจสำคัญของการศึกษา HTML5 สำหรับทำเว็บ ให้เน้นทำความเข้าใจ 3 หมวดหมู่หลักนี้ก่อนครับ Sections, Grouping content และ Text-level Semantics หลังจากนั้น ค่อยขยับขยายไปหาอีก 12 หมวดหมู่ที่เหลือ

กฎการใช้งาน HTML5 Elements แยกตามพฤติกรรม

เมื่อเรารู้แล้วว่า Elements แต่ละตัว อยู่ในหมวดหมู่ไหน ขั้นต่อไป ให้ตามไปดูพฤติกรรมของเหล่า Element นั้นๆ คำว่า พฤติกรรมของเหล่า Element นั้นคืออะไรหรือ เอากันง่ายๆ ว่ากันซึ่งๆ หน้า คือ สิ่งที่จะบอกว่า “เราสามารถเขียน tag A เข้าไปใน tag B ได้หรือไม่” เพราะในภาษา HTML5 นั้น มีกฎเกณฑ์ควบคุมเอาไว้หมดแล้วครับ โดยที่ทั้ง 7 พฤติกรรมนั้น มีประมาณนี้

1. Metadata content คือ กลุ่มของ Elements ที่เอาไว้ตั้งค่าหรือบอกพฤติกรรมหลักของเอกสาร  หรือเอาไว้แสดงความสัมพันธ์กับเอกสารอื่นๆ มี base, command, link,meta, noscript, script, style, title
2. Flow content โดยกฎพื้นฐาน Element เกือบทั้งหมดของ HTML5 นั้นมีพฤติกรรมเป็น Flow content อยู่แล้ว ข้อสำคัญที่สุดคือ ห้ามมี tag เปล่า
3. Sectioning content คือ กลุ่มที่เอาไว้แสดงรูปแบบความเป็นหน้าเอกสาร มี article, aside, nav, section
4. Heading content คือ กลุ่มที่เอาไว้บอกการเป็น “หัวข้อ” โดยหลักๆ แล้วเอาไว้ใช้ร่วมกับ Sectioning content โดยมี h1-h6 และ hgroup
5. Phrasing content คือ หน่วยที่ติดต่อโดยตรงกับ “ตัวหนังสือ” หรือ Element ที่เป็น Phrasing content ด้วยกันเอง หรือ ถ้าอยากจำให้ง่าย มันคือ “inline element” ตามแบบฉบับของ XHTML นั่นเอง ห้ามเอา Phrasing content ไปเขียนครอบ Element ใดๆ ที่ไม่ใช่ Phrasing content โดยเด็ดขาด เช่น อย่าเอา span ไป ครอบ aside หรือ อย่าเอา em ไปครอบ section
6. Embedded content คือ กลุ่มที่เอาไว้ แทรกเนื้อหาที่เป็น Media ทั้งหลาย หรือแทรกเนื้อหาจากแหล่งอื่น มี audio, canvas, embed, iframe, img, math, object, svg, video
7. Interactive content คือ กลุ่มของ Element ที่ทำหน้าที่ ปฏิสนธิกับผู้ใช้โดยตรง เช่น ปุ่มกดต่างๆ ส่วนมากจะอยู่ในหมวดหมู่ของ Form และ tag <a> ถือเป็น Interactive content ด้วย

โดยใน HTML5 Element ใดๆ นั้น สามารถมีพฤติกรรมได้มากกว่า 1 อย่าง ดั่งเช่น <article> ที่ผมยกตัวอย่างมาไว้ก่อนหน้า ซึ่งมีพฤติกรรมเป็นทั้ง Flow content และ Sectioning content

ขั้นตอนการเรียนรู้ CSS3

CSS3 แตกต่างไปจาก CSS2 แบบยกเครื่อง การเริ่มต้นเรียนรู้จึงจำเป็นต้องปรับเปลี่ยนรูปแบบไปด้วย ใน CSS3 นั้น ระบบการทำงานแต่ละอย่างจะถูกแยกออกมาเป็น Module เดี่ยวๆ ของใครของมัน รวมไปถึง Selectors ของ CSS3 เองด้วย ใน CSS2 Selectors นั้น W3C ได้รวมเอา Selectors เป็นองค์ประกอบหลักของการเขียน CSS ใน ทุกๆ Models (CSS2 เรียก Model ส่วน CSS3 เรียก Module)

CSS3 นั้นแยกเนื้อหาออกเป็น Modules ซึ่งในแต่ละ Module นั้นจะมี CSS Properties และ Values เพื่อใช้ในการควบคุมการแสดงผล ของ HTML โดยสื่อสารผ่าน Selectors

ใน CSS3 ทาง W3C ได้ยกเรื่องของ Selectors ออกมาเป็น CSS Selectors Module Level 3 ซึ่งถือเป็น Module แรกสุดของ CSS3 ที่ประกาศเป็นสถานะ PR (Proposed Recommendation) แต่ในขณะเดียวกัน CSS2.1 ยังอยู่ในสถานะ CR (Candidate Recommendation) อยู่เลยครับ

CSS3 Modules ที่จำเป็นต้องเรียนรู้ก่อนเมื่อมีเวลา

1. CSS Selectors
2. CSS Background and Borders
3. CSS Color
4. CSS Fonts
5. CSS Basic Box model
6. CSS Multi-column layout
7. CSS 2D Transformations
8. CSS Transitions
9. CSS Animation
10. CSS Basic user interface
11. CSS Values and Units

ตัวอย่างการเริ่มต้นศึกษาก็เช่น CSS Basic Box Model คืออะไร และมันมีอะไรบ้าง

ส่วนประกอบ (Properties) ของ Module นี้ มีอะไรบ้าง คือคำถามหลักที่เกิดขึ้น เมื่อเราได้ยินคำว่า “Box Model” ให้จดจำเอาไว้ว่า มันมีประมาณนี้

1. ประเภทของ Box
   1. Display
   2. Block-Level
   3. Run-in การสั่ง run-in นั้น กระทำก็ต่อเมื่อ เราต้องการเอา Element ที่เป็น formattedBlock มาเรียงต่อกันกัน ให้สั่ง display: run-in;
   4. Compact
2. Padding
3. Margin ซึ่ง Margin แยกออกเป็น 2 แบบ
   1. Margin properties ปรกติ
   2. Collapsing Margins ใน Collapsing นี้ มันจะอยู่ใน <table>
4. Width และ Height
5. min-width, min-height, max-width, max-height
6. กฎการคำนาณ ความกว้าง สูงและ margins
7. Float
8. Overflow
9. Visibility

* หมายเหตุ คำถามต่อมา หลายคนคงอยากถามว่า แล้วไอ้ Element ของ HTML5 ที่มันเป็น Block element มันมีอะไรบ้างหละ? วิธีการจดจำ ให้มองไปที่ หมวดหมู่ของ HTML5 ในส่วนของ Sections และ Grouping Contents

เมื่อเรารู้ว่า HTML Element ที่เรากำลังสั่งงานอยู่นั้น คืออะไร เราก็สามารถที่จะใช้ Properties สั่งงานได้ถูกต้อง เช่น เช่น เราต้องการสั่งงาน <aside> ซึ่ง tag <aside> นั้นถือเป็น formattedBlock Candidate สามารถที่จะใช้ Properties ต่างๆ ที่เป็นของ Basic box model นั้น สั่งงานได้เลย

การสังเกตว่า Element ไม่มีคุณสมบัติเป็น Block Element ให้จดจำง่ายๆ คือ HTML5 เกือบทุกตัวที่มีพฤติกรรมเป็น Phrasing content โดยถ้าเราอยากให้ Elements เหล่านี้ต้องการเปลี่ยนรูปแบบการแสดงผลเป็น Block และสามารถใช้ Box model properties สั่งงานได้อย่างสมบูรณ์ เราสามารถทำได้โดย สั่งให้ Element นั้นๆ display เป็น block ก่อนได้ เช่น ถ้าเราต้องการสั่งงาน <abbr> ให้แสดงผลแบบ <footer> ให้ได้ เราสามารถเขียนได้ ประมาณนี้
abbr {display: block;} หลังจากสั่ง display เป็น block แล้ว เราก็สามารถใช้ properties อื่นๆ ที่สามารถใช้ได้กับ Block element โดยตรง

ง่ายๆ สำหรับหลักการ ในการเรียนรู้อย่างเป็นระบบคือ ให้มุ่งไปที่ Modules ต่างๆ ของ CSS3 ก่อน แล้วจดจำ Properties ที่มีอยู่ให้ได้ รวมถึงใช้ Values ให้เป็น

ผมขอ พักบทความยาวเยื้อยชิ้นนี้เอาไว้ตรงนี้ก่อนนะครับ บทความต่อๆ ไป ผมจะค่อยๆ แนะนำไม่ว่าจะเป็น CSS3 ในแต่ละ Modules หรือ HTML5 ในแต่ละกลุ่มพฤติกรรมข้อมูล และการนำไปใช้งานจริง ต่อไปเรื่อยๆ

มีความสุขกับการใช้ชีวิต ตามอัตภาพบ้าง จะเป็นไรไป อย่างน้อยชีวิตนี้ เราก็ไม่ได้ทุกข์ไปซะหมด