รู้จักกับ CSS Regions พร้อมวิธีการใช้งานบน Adobe Edge Reflow และ Adobe Edge Code

หนึ่งในการเปลี่ยนแปลงของ Web Design เข้าสู่ยุคของ CSS3 ที่น่าตื่นเต้น คือ CSS 3 Module ที่ชื่อ CSS Regions นี่แหละครับ โดยมันจะเปลี่ยนวิธีคิดในการออกแบบ Layout บน Web page ของเราไปเลย และยังสามารถนำไปใช้ใน Responsive web design ได้ดีกว่าเดิมด้วย สามารถศึกษาข้อมูลต่างๆ ที่ผมรวมเอาไว้ที่นี่ได้ด้านล่างครับ

 

CSS Regions คืออะไร และเพื่ออะไร?

ความสามารถหลักของ CSS Regions คืออิสระที่ให้เรากำหนดการ flow ของ content จาก container หนึงไปสู่อีก container หนึงได้ตามต้องการ

ก่อนที่ CSS Regions จะถูกสร้างขึ้นมา content ของพวกเรา ไม่ว่าจะเป็นตัวหนังสือ หรือรูปภาพ ต่างก็ต้องอยู่ในกรอบของ HTML Container ตัวใดตัวหนึ่ง ไม่สามารถกระโดดข้ามไปยังอีกตัวหนึ่งได้ (เลือกได้แค่ว่าจะโชว์ หรือซ่อน หรือ scroll ก็ว่ากันไป) แต่สิ่งที่ CSS Regions ทำได้ คือการที่พวกเราเลือกว่า content ของเราจะ “flow” (ในบางคลาสผมจะเรียกเองว่า “ไหล”)​ จาก HTML Container หนึ่ง ไปยัง Container ตัวอื่นได้อย่างอิสระ ไม่ถูกขังอยู่ใน Container ตัวใด ตัวหนึ่งเหมือนแต่ก่อนครับ

และในเมื่อเราไม่ถูกจำกัดพื้นที่ของ Content เหมือนแต่ก่อนแล้ว ประโยชน์ที่เกิดขึ้นจะเห็นชัดในส่วนของ Responsive web design ที่เน้นการแสดง content ที่เหมาะสม ไม่ว่า web จะถูกแสดงผลบนอุปกรณ์ใดๆ ก็ตาม

ประโยชน์ของ CSS Regions คือ มันจะเปลี่ยนเทคนิค layout เดิมๆ ที่เราใช้นำเสนอข้อมูล ได้พลิกแพลงมากกว่าเดิม คนที่ได้รับประโยชน์เต็มๆ ไปคือคนที่ออกแบบ web แบบ responsive นั่นเองครับ ดูได้จากวิดีโอสาธิตในหัวข้อถัดไปได้เลย

วิธีใช้งาน CSS Regions

การสร้าง CSS Regions ขึ้นมาใน Web layout ของเราจำเป็นต้องรู้จัก CSS property 2 ตัว นั่นคือ flow-into และ flow-from นั่นเอง

1. flow-into

flow-into  จะเป็นตัวกำหนดให้ content ที่อยู่ใน HTML Container ไปแสดงในส่วนเรียกว่า region chain ครับ ซึ่งตอนใช้งานจริง เราจะไม่เห็น HTML Container ตัวดังกล่าว แต่จะเห็น content ของมันอยู่ใน region chain ที่เราสร้างขึ้นด้วย CSS Property ชื่อ flow-from ซึ่งผมอธิบายไว้ด้านล่าง

2. flow-from

เป็น CSS Property ที่เราเอาไว้สร้างสิ่งที่เรียกว่า region chain ครับ พูดง่ายๆ คือการสร้าง “ท่อ” ขึ้นมาระหว่าง HTML Container นั่นเอง โดยการกำหนด value ของ flow-from ของหลายๆ container ให้เป็นชื่อเดียวกับ value ของ flow-into จะทำให้เกิด region chain ที่ content สามารถไหลไปตาม container เป็นทอดๆ นั่นเอง

3. ลองดูของจริงกัน

เอาล่ะ ทีนี้เราลองดูกันว่าเวลา CSS Regions ทำงานจริงๆ จะเป็นยังไง ให้ทดลองเปิดหน้า web นี้บนเครื่อง Desktop แล้วย่อขนาด web browser ดูจะเห็นชัดเจนขึ้น ถ้าดูแล้วไม่เห็นมัน flow ก็แวะดูวิธีเปิดการทำงานของ CSS Regions ก่อนนะครับ (ถ้าใครใช้ IE 10 หรือ Safari ใน OS X Mavericks ก็ไม่มีปัญหา)

[CodePen height=300 show=result href=jBCqz user=teerasej ]

 

 

วิธีใช้ CSS Regions ใน Web Browser ปัจจุบัน

เนื่องจาก CSS Regions Module ยังอยู่ในสถานะ draft ตอนที่เขียนบทความนี้อยู่จึงมี Web Browser ที่สามารถแสดงผลได้ถูกต้องไม่มาก โดยผมเรียงไว้ด้านล่างดังนี้

• Internet Explorer 10 ใช่ครับ อ่านไม่ผิดหรอก
• Safari สนับสนุนด้วย Prefix -webkit-flow-from  และ -webkit-flow-into
• Safari ใน OS X Mavericks และ iOS 7 สนับสนุน Regions อย่างเป็นทางการแล้ว (update เมื่อ 31/10/2013)
• สำหรับ Chrome ก็ต้องตั้งค่า enable-experimental-webkit-features ใน about:flags (ดูวิธีตั้งค่า Google Chrome ให้ทำงานกับ HTML5 หรือ CSS 3 ใหม่ๆ ได้ที่นี่) จากนั้นให้ทดสอบ code ดังกล่าว หรือจะคลิกที่นี่เพื่อดูตัวอย่างภาษาไทยที่ผมสร้างไว้ก็ได้ครับ

แล้วเมื่อไหร่จะใช้ได้เหมือนกันหมดทุก Web browser?

CSS Regions เป็นหนึ่งในคุณสมบัติของ CSS3 ที่เพิ่งเข้าสู่ขั้นตอนการพิจารณาในตอนที่ผมกำลังเขียนบทความนี้อยู่ สามารถดูการสนับสนุนจาก Web Browser ต่างๆ ล่าสุดได้ที่ CanIuse.com ครับ

วิธีสร้าง CSS Regions ใน Adobe Edge Reflow CC

Adobe Edge Reflow ในเวอร์ชั่นปัจจุบันได้เพิ่ม feature ที่ทำให้พวกเราใช้งาน CSS Regions ที่ว่านี้ได้โดยเลือก text frame และที่ต้องการ ดูตัวอย่างการทำงานใน video ด้านล่าง และ download project ตัวอ่างเพื่อทำตามไปพร้อมๆ กันได้จาก link ด้านล่าง video นี้นะ

วิธีทำงานกับ CSS Regions ใน Adobe Edge Code CC

สำหรับคนที่ชอบ HTML, CSS, Javascript ทาง Adobe ก็ได้ใส่ feature ใหม่ลงไปใน Adobe Edge Code CC เพื่อสนับสนุนการทำงานกับ CSS Regions เช่นกัน