อุดช่องว่าง

ทำให้การสร้างเว็บเป็นเรื่องง่ายขึ้น

Rachel Andrew

เวลาพูดคุยกับนักพัฒนาซอฟต์แวร์ ไม่ว่าจะเป็นรายบุคคลหรือผ่านแบบสำรวจ เช่น สถานะของ 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 ในเลย์เอาต์แบบยืดหยุ่น ปีนี้ Interop 2022 จะมุ่งเน้นที่ฟีเจอร์ 15 รายการ และฟีเจอร์บางรายการก็เริ่มดำเนินการแล้ว

คุณติดตามความคืบหน้าได้ในแดชบอร์ด Interop 2022

การรับส่งข้อความ

ปัญหาที่ 2 คือปัญหาที่เรายินดีให้ความช่วยเหลือเมื่อพูดถึงฟีเจอร์ต่างๆ ใน web.dev และ developer.chrome.com เราต้องการให้สถานะของฟีเจอร์มีความชัดเจนมากเมื่อคุณอ่านเนื้อหาของเรา และเราต้องการให้เรามีวิธีแก้ปัญหาที่ใช้งานได้จริง

เราได้เปิดตัวหลักสูตรพื้นฐานหลายหลักสูตรและจะเปิดตัวหลักสูตรอื่นๆ เพิ่มเติมในอนาคต หลักสูตรเหล่านี้จะช่วยให้คุณเรียนรู้วิธีสร้างเว็บสมัยใหม่โดยใช้เทคโนโลยีแพลตฟอร์มเว็บหลัก เช็คเอาท์:

• เรียนรู้ CSS
• ดูข้อมูลเกี่ยวกับฟอร์ม
• ดูข้อมูลเกี่ยวกับการออกแบบ
• ดูข้อมูลเกี่ยวกับ PWA

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

นอกจากนี้ เรายังมีส่วนร่วมในเอกสารประกอบของเว็บแบบเปิดผ่านการสนับสนุนโปรเจ็กต์ Open Web Docs วิธีนี้ช่วยให้มั่นใจได้ว่าเรามีเอกสารชั้นหนึ่งเกี่ยวกับ MDN รวมถึงข้อมูลความเข้ากันได้ของเบราว์เซอร์ล่าสุด จากนั้นเราจะใช้ข้อมูลนี้ใน web.dev เพื่อแสดงการรองรับฟีเจอร์ ต่อไปนี้เป็นรายการที่รองรับใน gap ในเลย์เอาต์ Flex ในปัจจุบัน

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

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

รูปภาพโดย Cristofer Maximilian