ใช้งาน CSS3 และ HTML5 ให้เกิดประโยชน์สูงสุด สำหรับทำเว็บไซต์

ในการพัฒนาเว็บไซต์ด้วย CSS ซึ่งทุกคนมีความถนัดกันอยู่แล้ว ซึ่ง 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)

สำหรับส่วนต่างๆใน 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

 

ส่วนประกอบ (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

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