เราคุยกันเรื่อง CSS Shape มาได้พอสมควรแล้ว (จริงๆ ก็มาพร้อมกับ CSS Region นั่นแหละ น่าเสียดายยังไม่ใกล้เหมือน CSS Shape) ในที่สุด CSS Shape ก็ใกล้จะคลอดมาให้กับ Web Browser ต่างๆ ได้เอาไปใช้งานกันซะที
วันนี้ก็เลยสรุปเอาเรื่องๆ ต่างที่เราเคยคุยกันไว้ใน CSS Shape มาให้ตามดูกันอีกครั้งครับ
Gallery รวมตัวอย่าง CSS Shape และ code
สำหรับใช้ที่ศึกษาการใช้ CodePen ของผมครั้งก่อนไปแล้ว ก็สามารถเข้าไปดู CodePen Gallery ที่ทีม Adobe Web รวมรวมตัวอย่างของ CSS Shape ได้ที่นี่ โดยปัจจุบันถ้า Web Browser ของคุณยังไม่รองรับ CSS Shape ก็ต้องไปเปิดความสามารถก่อนด้วยนะ
ดูวิธีเปิดการทำงานของ CSS Shape บน Google Chrome ได้จากที่ผมสอนไว้ทีนี่ครับ
ตรวจสอบว่า Web Browser รองรับ CSS Shape หรือไม่ ด้วย Modernizr
คนทำเว็บที่รอบคอบจะต้องรองรับการแสดงผลที่เปลี่ยนไป เมื่อ Web Browser บางตัว ไม่สามารถแสดง CSS Shape อย่างถูกต้องได้ การใช้ Javascript Framework ยอดนิยมอย่าง Modernizr ก็ช่วยได้
ซึ่ง Modernizr ในเวอร์ชั่นปัจจุบัน ก็ได้รองรับการทดสอบความสามารถของ Web browser ต่างๆ ว่ารองรับ CSS Shape ได้ไหม โดยผมสรุปแนวทางการใช้งานดังกล่าวไว้แล้ว
ดูวิธีการใช้ Modernizr กับ CSS Shape ได้ที่นี่
ทำงานสร้าง CSS Shape ได้ง่ายขึ้นกับ Brackets และ Adobe Edge Code CC
Editor ที่ดีต้องทำให้เราทำงานเสร็จเร็วขึ้น และ Brackets กับ Edge Code CC ก็เป็นหนึ่งในเครื่องมือเหล่านั้น ซึ่งพวกมันมีความสามารถที่จะทำให้เรากำหนดค่าต่างๆ ของ CSS Shape ที่เราสร้างขึ้นได้โดยตรงบน Web Browser เลย
ดูวิดีโอแนะนำการใช้งาน CSS Shape Editor ที่นี่
หรือเรียนพื้นฐานวิธีใช้งาน Brackets และ Adobe Edge Code CC ทั้งหมดได้ที่นี่ครับ