อุดช่องว่าง

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

Rachel Andrew

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

ช่องว่าง Flexbox

ตัวอย่างพร็อพเพอร์ตี้ที่มีปัญหาคือพร็อพเพอร์ตี้ gap ซึ่งช่วยให้คุณสร้างช่องว่างระหว่างรายการ grid หรือ flex หรือคอลัมน์ในคอนเทนเนอร์ multicol แม้ว่าเราจะมี column-gap ใน multicol มาเป็นเวลานานแล้ว แต่พร็อพเพอร์ตี้นี้ปรากฏครั้งแรกในเลย์เอาต์กริดเป็น grid-gap พร้อมกับ grid-column-gap และ grid-row-gap

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

.box {
  display: flex;
  gap: 1em;
}

Firefox เปิดตัวพร็อพเพอร์ตี้สําหรับเลย์เอาต์ Flex เมื่อเดือนตุลาคม 2018 โดยฟีเจอร์นี้ไม่ปรากฏใน Chrome จนถึงเดือนกรกฎาคม 2020 และใน Safari จนถึงเดือนเมษายน 2021 ซึ่งหมายความว่าเราต้องรออีก 2 ปี 6 เดือนจึงจะใช้ gap ได้อย่างปลอดภัย ในความเป็นจริงแล้ว นักพัฒนาแอปส่วนใหญ่ต้องรอนานกว่านั้นมาก เนื่องจากต้องรองรับเบราว์เซอร์เวอร์ชันเก่ากว่าเวอร์ชันล่าสุด การรองรับ gap ในเลย์เอาต์แบบยืดหยุ่นเป็นปัญหามากขึ้นเนื่องจากเราไม่สามารถใช้การค้นหาฟีเจอร์เพื่อตรวจหาการรองรับช่องว่างในเลย์เอาต์แบบยืดหยุ่น เนื่องจากระบบรองรับพร็อพเพอร์ตี้ gap ในตารางกริด @supports (gap:1em) จึงแสดงผลเป็นจริง

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

เหตุใดจึงมีการหยุดให้บริการ

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

ฟีเจอร์ส่วนใหญ่จะได้รับการสร้างต้นแบบในเบราว์เซอร์เดียว ตัวอย่างเช่น Microsoft เป็นผู้สร้างข้อกำหนดเลย์เอาต์ตารางกริดเป็นรายแรกและนำไปใช้ในรูปแบบเริ่มต้นใน Internet Explorer 10 วิศวกรที่ Mozilla ได้ทุ่มเททำงานอย่างหนักเพื่อหาวิธีที่ Subgrid ควรทำงาน ดังนั้นฟีเจอร์นี้จึงเปิดตัวใน Firefox ก่อน เราเห็นว่า Safari เป็นผู้นำในฟังก์ชันสีใหม่ๆ ที่น่าสนใจ

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

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

ปัญหา

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

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

ความสามารถในการทำงานร่วมกัน

เบราว์เซอร์กำลังทำงานร่วมกันเพื่อแก้ปัญหาการทำงานร่วมกันอยู่แล้ว เมื่อปีที่แล้ว Compat 2021 ช่วยลดช่องว่างในการรองรับฟีเจอร์ต่างๆ ซึ่งรวมถึงพร็อพเพอร์ตี้ช่องว่างในเลย์เอาต์ Flex ในปีนี้ ความพยายามของ Interop 2022 มุ่งเน้นไปที่ฟีเจอร์ 15 รายการ และได้มีการดำเนินการกับฟีเจอร์บางรายการแล้ว

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

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

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

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

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

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

Browser Support

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

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

รูปภาพโดย Cristofer Maximilian