อุดช่องว่าง

ช่วยให้สร้างแอปสำหรับเว็บได้ง่ายขึ้น

เมื่อพูดคุยกับนักพัฒนาซอฟต์แวร์ ไม่ว่าจะเป็นแบบรายบุคคลหรือผ่านแบบสำรวจ เช่น สถานะของ 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: 84
  • Edge: 84
  • Firefox: 63
  • Safari: 14.1

หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับวิสัยทัศน์ของ Chrome สําหรับเว็บและสิ่งที่เรากําลังทดลองใน Origin และเวอร์ชันทดลองของนักพัฒนาซอฟต์แวร์ คุณจะเห็นเนื้อหาดังกล่าวมากขึ้นในเว็บไซต์น้องของเราที่ developer.chrome.com เนื้อหาในเว็บไซต์ดังกล่าวอาจเป็นเวอร์ชันทดลองหรือรองรับเฉพาะใน Chrome เท่านั้นในตอนนี้ แต่เรายินดีให้คุณลองใช้และแสดงความคิดเห็น

นี่เป็นช่วงเวลาที่น่าตื่นเต้นสําหรับเว็บ เราหวังว่าจะช่วยให้คุณใช้งานฟีเจอร์หลักได้เร็วขึ้น และชัดเจนเกี่ยวกับช่องว่างที่มีอยู่ ซึ่งจะทำให้การพัฒนาเว็บสนุกขึ้นและลดความหงุดหงิด

รูปภาพโดย Cristofer Maximilian