อ่านจบใน 1 นาที
โลกของ CSS Layout กำลังจะเปลี่ยน แล้วคุณพร้อมหรือยัง
เคยรู้สึกมั้ยว่า CSS Layout คือเรื่องปวดหัวของคนทำเว็บเสมอ ไม่ว่าจะ Flexbox หรือ Grid ใช้ไม่ถูกก็พัง Layout ง่ายๆ แถมบางทียิ่งรู้มาก ยิ่งสับสน
แล้วถ้าบอกว่ามีแนวทางใหม่จากทีมพัฒนา WebKit ที่อาจรวมสองโลกนี้ไว้ด้วยกันล่ะ คุณจะสนใจมั้ย
ในบทความนี้เราจะพาไปรู้จักกับแนวคิดใหม่ที่ชื่อว่า Item Flow หรืออาจเปลี่ยนชื่อเป็น Flow-based Layout ในอนาคต ที่อาจเปลี่ยนวิธีเขียน Layout ของคุณไปตลอดกาล
Item Flow คืออะไร แล้วเกี่ยวอะไรกับ Flex กับ Grid
Item Flow เป็นแนวคิดใหม่จากทีม WebKit (ผู้อยู่เบื้องหลัง Safari) ที่พยายามสร้างภาษากลางระหว่าง Flexbox และ Grid ผ่านชุด property ใหม่ เช่น
- flow-wrap (แทน flex-wrap หรือ grid-auto-flow)
- flow-direction
- flow-pack
- flow-tolerance
แนวคิดนี้ไม่ได้จะลบ Flexbox หรือ Grid ทิ้ง แต่ต้องการ “ทำให้คิดเป็นภาษาเดียวกัน” มากขึ้น เหมือนตอนเรามี gap แยกสำหรับ Grid (grid-gap) แล้วต่อมาทำให้ใช้ได้กับ Flex จนกลายเป็นแค่ gap ธรรมดา
ลองจินตนาการว่าแทนที่ต้องจำว่า Grid ใช้ grid-auto-flow แต่ Flex ใช้ flex-wrap เราแค่ใช้ flow-wrap เท่านั้น
แนวคิดนี้น่าสนใจมากเพราะจะช่วยลด Cognitive Load หรือความซับซ้อนในการเรียนรู้ CSS ลงได้เยอะ
สิ่งที่ Item Flow จะทำให้ดีขึ้น (ถ้าทำได้จริง)
- ลดคำสั่งซ้ำซ้อนระหว่าง Flex และ Grid
- สร้างภาษา CSS ที่ใช้ร่วมกันได้ทั้งสองระบบ
- ทำให้ UI component ยืดหยุ่นขึ้นโดยไม่ต้อง rewrite layout เยอะ
- ลดโอกาสเกิด Tab Order ผิดพลาดใน Layout ที่มี reorder
แต่แนวคิดนี้เวิร์กจริงไหม มุมมองจาก WPMartech
สิ่งที่น่าสนใจ
- Flow wrap และ flow pack ทำให้เข้าใจการจัดวางในสองระบบได้ในชุดคำเดียว ช่วยให้ทีม dev ที่ไม่ถนัด Grid หรือ Flex ใช้ได้ง่ายขึ้น
- คำใหม่อย่าง flow-tolerance (หรือชื่อเดิมคือ item-slack) ช่วยให้การจัดเรียงแบบ masonry หรือ responsive row balance ทำได้แบบฉลาดขึ้นมาก
สิ่งที่ยังต้องจับตา
- ยังไม่มี implementation จริงใน browser ใด ต้องรอ prototyping
- ปัญหา Tab Order ยังเป็นเรื่องใหญ่ ถ้า layout มีการ reorder ควรมี property เสริม เช่น tab-flow เพื่อแก้ไข
- คำสั่งบางอย่างอาจมี behavior ต่างกันใน Flex กับ Grid แม้ชื่อเหมือนกัน เช่น flow-pack อาจจัดตำแหน่งไม่เหมือนกันทุกบริบท
ตัวอย่าง property ที่เสนอมา (แบบที่น่าจะใช้ในอนาคต)
| ชื่อใหม่ | แทนคำสั่งเดิม | ใช้ได้กับ | ความสามารถ |
|---|---|---|---|
| flow-wrap | flex-wrap / grid-auto-flow | Flex, Grid | ควบคุมการ wrap item ใน cross axis |
| flow-pack | justify-content / align-content | Flex, Grid | จัดตำแหน่ง item ให้ balance หรือ dense |
| flow-tolerance | ไม่มีในตอนนี้ | Flex, Grid | ควบคุมว่า item จะ wrap เมื่อใด (เช่น ค่าระยะห่างน้อยกว่า 1rem ถึงจะถือว่าใกล้พอ) |
| flow-direction | flex-direction / grid-direction | Flex, Grid | ตั้งค่าการวางแนว content |
สรุป ปรับวิธีคิดวันนี้ ใช้ชีวิตง่ายขึ้นในอนาคต
Item Flow คือความพยายามของทีมพัฒนา browser ที่อยากให้ CSS Layout มีภาษากลาง ไม่ต้องเลือกค่ายว่าจะรัก Flex หรือ Grid
ถ้าแนวคิดนี้ไปไกลจริง มันจะกลายเป็นจุดเปลี่ยนที่ทำให้คนทำเว็บเรียน CSS ได้ง่ายขึ้น ใช้งานได้กว้างขึ้น และลดการเขียนโค้ดที่ซ้ำซ้อน
ลองนึกภาพตอนที่คุณไม่ต้องเลือกแล้วว่า component นี้จะใช้ Flex หรือ Grid แต่แค่ใช้ layout system เดียว ที่ออกแบบมาครอบคลุมทั้งหมดได้เลย
เราขอชวนคุณเริ่มจากเรื่องง่ายๆ อย่างศึกษาคำสั่ง logical properties และติดตาม CSS proposal ล่าสุดไว้ แล้ววันหนึ่งคุณจะพร้อมใช้ของใหม่ก่อนใคร
ดูเพิ่มเติมได้ที่ https://youtu.be/lCnwX2QXTxk?si=_yeuzELw3nCda0Hf
บทความโดย WPMartech แหล่งรวมกลยุทธ์ WordPress + SEO + Frontend + Martech สำหรับยุคใหม่ที่เร็วและเบากว่าเดิม
WordPress Support at WPMartech
Founder at WPMartech
พัฒนาเว็บไซต์ wordpress ในโซลูชันต่างๆด้านการตลาดโดยใช้ Plugin , Theme และ รีวิว SAAS ใหม่ๆ , ChatGPT , AI Tools , Content AI , ProductHunt และ Inbound marketing , Martech โดยศึกษา Tech Stack จาก Chiref marketing , Hupspot และต่างประเทศโดยประยุกต์ใช้เป็น Case Study ต่างๆ ของไทยและอยู่ในราคาที่ SME เอื้อมถึงได้
พัฒนาเว็บไซต์ wordpress ในโซลูชันต่างๆด้านการตลาดโดยใช้ Plugin , Theme และ รีวิว SAAS ใหม่ๆ , ChatGPT , AI Tools , Content AI , ProductHunt และ Inbound marketing , Martech โดยศึกษา Tech Stack จาก Chiref marketing , Hupspot และต่างประเทศโดยประยุกต์ใช้เป็น Case Study ต่างๆ ของไทยและอยู่ในราคาที่ SME เอื้อมถึงได้
Latest posts by อาทิตย์ เอี่ยมปา (see all)
