ช่วยให้สร้างแอปสำหรับเว็บได้ง่ายขึ้น
เมื่อพูดคุยกับนักพัฒนาซอฟต์แวร์ ไม่ว่าจะเป็นแบบรายบุคคลหรือผ่านแบบสำรวจ เช่น สถานะของ CSS เราได้ยินเรื่องเดิมๆ ซ้ำๆ นักพัฒนาซอฟต์แวร์พบว่าการสร้างเว็บไซต์และแอปพลิเคชันที่ทํางานได้ดีในเบราว์เซอร์ต่างๆ นั้นเป็นเรื่องยาก และพบว่าการทราบว่าฟีเจอร์ใหม่ที่น่าตื่นเต้นใช้งานได้อย่างปลอดภัยเมื่อใดนั้นเป็นเรื่องยาก
ระยะห่างของ Flexbox
ตัวอย่างพร็อพเพอร์ตี้ที่มีปัญหาคือ พร็อพเพอร์ตี้ gap
ซึ่งช่วยให้คุณเว้นช่องว่างระหว่างรายการ grid หรือ flex หรือคอลัมน์ในคอนเทนเนอร์ multicol ได้ แม้ว่าเราจะมี column-gap
ในหลายคอลัมน์มานานแล้ว แต่พร็อพเพอร์ตี้นี้ปรากฏในเลย์เอาต์ตารางกริดเป็นครั้งแรกเป็น grid-gap
พร้อมกับ grid-column-gap
และ grid-row-gap
ไม่นานหลังจากที่เลย์เอาต์ตารางกริดเปิดตัวในเบราว์เซอร์ เราได้เปลี่ยนชื่อพร็อพเพอร์ตี้เป็น gap
พร้อมกับ row-gap
และ column-gap
จากนั้นมีการระบุให้ทำงานในเลย์เอาต์ Flex ด้วย การเปลี่ยนชื่อหมายความว่าเราไม่มีพร็อพเพอร์ตี้หลายรายการที่ทําสิ่งเดียวกัน
.box {
display: flex;
gap: 1em;
}
Firefox เปิดตัวพร็อพเพอร์ตี้สำหรับเลย์เอาต์ Flex ในเดือนตุลาคม 2018 ฟีเจอร์นี้ไม่ได้ปรากฏใน Chrome จนกว่าจะถึงเดือนกรกฎาคม 2020 และตามมาด้วย Safari ในเดือนเมษายน 2021 ซึ่งหมายความว่ามีช่วงเวลา 2 ปี 6 เดือนก่อนที่เราจะสามารถใช้ gap
อย่างปลอดภัย แต่ในทางปฏิบัติ นักพัฒนาแอปส่วนใหญ่ต้องรอนานกว่านั้นมาก เนื่องจากต้องรองรับเบราว์เซอร์เวอร์ชันเก่ากว่าเวอร์ชันล่าสุด การรองรับ gap
ในเลย์เอาต์ Flex ทำให้เกิดปัญหามากขึ้นเนื่องจากเราใช้การค้นหาฟีเจอร์เพื่อตรวจหาการรองรับช่องว่างในเลย์เอาต์ Flex ไม่ได้ เนื่องจากตารางกริดรองรับพร็อพเพอร์ตี้ gap
@supports (gap:1em)
จึงแสดงผลเป็น "จริง"
ปัญหาเพิ่มเติมคือเมื่อฟีเจอร์ใหม่เปิดตัวในเบราว์เซอร์หนึ่ง ผู้คนจะเริ่มพูดถึงและแชร์การสาธิต ซึ่งมักจะเริ่มขึ้นก่อนที่ฟีเจอร์จะพร้อมใช้งานในเบราว์เซอร์เวอร์ชันเสถียร ซึ่งอาจทำให้นักพัฒนาแอปสับสนหรืออย่างน้อยก็หงุดหงิด ฟีเจอร์ใหม่สุดเจ๋งได้รับการพูดถึงอยู่ทุกหนทุกแห่ง แต่คุณกลับพบว่าใช้งานไม่ได้เนื่องจากไม่มีการสนับสนุน
เหตุใดจึงมีช่องว่างในการสนับสนุน
โพสต์นี้ไม่ได้ชี้นิ้วไปที่เบราว์เซอร์หนึ่งๆ ว่าช้า หากดูฟีเจอร์ต่างๆ ของแพลตฟอร์มต่างๆ คุณจะเห็นได้ว่าเบราว์เซอร์แต่ละตัวมีฟีเจอร์ที่โดดเด่นแตกต่างกันไป
ฟีเจอร์ส่วนใหญ่จะมีการสร้างต้นแบบในเบราว์เซอร์เดียว ตัวอย่างเช่น Microsoft ได้สร้างข้อกำหนดของเลย์เอาต์ตารางกริดขึ้นเป็นครั้งแรกและนำมาใช้งานในรูปแบบเริ่มต้นใน Internet Explorer 10 วิศวกรของ Mozilla ทํางานอย่างหนักเพื่อหาวิธีทํางานของตารางกริดย่อย ดังนั้นฟีเจอร์นี้จึงเปิดตัวใน Firefox ก่อน เราเห็นว่า Safari เป็นผู้นำด้านฟังก์ชันสีใหม่ๆ ที่น่าตื่นเต้น
แม้ว่าเบราว์เซอร์หนึ่งอาจเป็นผู้นําในการพัฒนาต้นแบบ แต่ตัวแทนของเบราว์เซอร์ทั้งหมด (และองค์กรอื่นๆ) ในกลุ่มทํางาน CSS จะเป็นผู้พูดคุยเกี่ยวกับฟีเจอร์ CSS ฟีเจอร์ต้องใช้งานได้ในเบราว์เซอร์ทุกประเภท และไม่ได้ออกแบบมาเพื่อใช้งานในเบราว์เซอร์บางประเภทไม่ได้ ซึ่งจะทำให้เกิดช่องว่างในการรองรับและการใช้งานฟีเจอร์นี้อย่างถาวร
อย่างไรก็ตาม เมื่อพูดถึงการใช้งานฟีเจอร์ คุณต้องจัดลําดับความสําคัญของฟีเจอร์นั้นควบคู่ไปกับฟีเจอร์อื่นๆ ที่เป็นไปได้ทั้งหมดสําหรับเบราว์เซอร์นั้น และบางครั้งก็อาจเกิดความล่าช้าเนื่องจากมีงานอื่นๆ ที่ต้องดำเนินการเพื่อทำให้เบราว์เซอร์ดีขึ้น ตัวอย่างที่ยอดเยี่ยมของเรื่องนี้คืองาน RenderingNG ใน Chromium การดำเนินการนี้ปูทางให้ใช้งานตารางย่อยได้ แต่ช่องว่างที่นานมากระหว่าง Firefox กับ Chromium ที่ใช้งานตารางย่อยได้นั้นเกิดจากความจำเป็นในการใช้เลย์เอาต์ตารางในเครื่องมือแสดงผลใหม่ก่อน
ปัญหา
ปัญหามี 2 อย่าง ประการแรกคือปัญหาการทำงานร่วมกัน นั่นคือการที่ฟีเจอร์หนึ่งๆ อาจใช้เวลานานนับตั้งแต่เปิดตัวในเบราว์เซอร์หนึ่งๆ ไปจนถึงที่พร้อมให้บริการในทุกเบราว์เซอร์
ปัญหาที่ 2 คือปัญหาเกี่ยวกับการรับส่งข้อความ เราจะอธิบายช่องโหว่ในการรองรับให้ชัดเจนได้อย่างไร เราจะแชร์ฟีเจอร์ใหม่ๆ ได้อย่างไรโดยไม่ทำให้ทุกคนต้องค้นคว้าอย่างละเอียดเกี่ยวกับแต่ละฟีเจอร์เพื่อดูว่าฟีเจอร์นั้นรองรับได้ดีเพียงใด
ความสามารถในการทำงานร่วมกัน
เบราว์เซอร์ต่างๆ กำลังทำงานร่วมกันเพื่อแก้ปัญหาการทำงานร่วมกันอยู่แล้ว เมื่อปีที่แล้ว Compat 2021 ได้ช่วยปิดช่องโหว่ในการรองรับฟีเจอร์ต่างๆ รวมถึงพร็อพเพอร์ตี้ gap ในเลย์เอาต์ Flex ปีนี้ Interop 2022 จะมุ่งเน้นที่ฟีเจอร์ 15 รายการ และฟีเจอร์บางรายการก็เริ่มดำเนินการแล้ว
คุณติดตามความคืบหน้าได้ในแดชบอร์ด Interop 2022
การรับส่งข้อความ
ปัญหาที่ 2 คือปัญหาที่เรายินดีให้ความช่วยเหลือเมื่อพูดถึงฟีเจอร์ต่างๆ ใน web.dev และ developer.chrome.com เราต้องการให้สถานะของฟีเจอร์มีความชัดเจนมากเมื่อคุณอ่านเนื้อหาของเรา และเราต้องการให้เรามีวิธีแก้ปัญหาที่ใช้งานได้จริง
เราได้เปิดตัวหลักสูตรพื้นฐานหลายหลักสูตรและจะเปิดตัวหลักสูตรอื่นๆ เพิ่มเติมในอนาคต หลักสูตรเหล่านี้จะช่วยให้คุณเรียนรู้วิธีสร้างเว็บสมัยใหม่โดยใช้เทคโนโลยีแพลตฟอร์มเว็บหลัก เช็คเอาท์:
เรากำลังพยายามมุ่งเน้นเนื้อหาในเว็บไซต์นี้ไปที่สิ่งที่คุณใช้ได้อย่างปลอดภัย เรายังไม่ถึงจุดนั้นอย่างสมบูรณ์ แต่คุณจะเริ่มเห็นการเปลี่ยนแปลงเล็กๆ น้อยๆ ไปสู่การใช้งานจริงในช่วงไม่กี่เดือนข้างหน้า
นอกจากนี้ เรายังมีส่วนร่วมในเอกสารประกอบของเว็บแบบเปิดผ่านการสนับสนุนโปรเจ็กต์ Open Web Docs ซึ่งช่วยให้เรามีเอกสารประกอบชั้นยอดใน MDN พร้อมข้อมูลความเข้ากันได้กับเบราว์เซอร์ที่เป็นปัจจุบัน จากนั้นเราจะใช้ข้อมูลนี้ใน web.dev เพื่อแสดงการรองรับฟีเจอร์ ต่อไปนี้เป็นรายการที่รองรับใน gap
ในเลย์เอาต์ Flex ในปัจจุบัน
การรองรับเบราว์เซอร์
หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับวิสัยทัศน์ของ Chrome สําหรับเว็บและสิ่งที่เรากําลังทดลองใน Origin และเวอร์ชันทดลองของนักพัฒนาซอฟต์แวร์ คุณจะเห็นเนื้อหาดังกล่าวมากขึ้นในเว็บไซต์น้องของเราที่ developer.chrome.com เนื้อหาในเว็บไซต์ดังกล่าวอาจเป็นเวอร์ชันทดลองหรือรองรับเฉพาะใน Chrome เท่านั้นในตอนนี้ แต่เรายินดีให้คุณลองใช้และแสดงความคิดเห็น
นี่เป็นช่วงเวลาที่น่าตื่นเต้นสําหรับเว็บ เราหวังว่าจะช่วยให้คุณใช้งานฟีเจอร์หลักได้เร็วขึ้น และชัดเจนเกี่ยวกับช่องว่างที่มีอยู่ ซึ่งจะทำให้การพัฒนาเว็บสนุกขึ้นและลดความหงุดหงิด
รูปภาพโดย Cristofer Maximilian