อุดช่องว่าง

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

ราเชล แอนดรูว์

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

ช่องว่าง Flexbox

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

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

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

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

ปัญหา

เรามีปัญหา 2 ข้อที่นี่ ข้อแรกคือปัญหาเรื่องความสามารถในการทำงานร่วมกัน ซึ่งอาจใช้เวลานานนับจากจุดที่ฟีเจอร์หนึ่งเข้าสู่เบราว์เซอร์หนึ่งจนถึงเมื่อพร้อมใช้งานทุกที่

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

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

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

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

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

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

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

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

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

การสนับสนุนเบราว์เซอร์

  • 84
  • 84
  • 63
  • 14.1

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

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

รูปภาพโดย Cristofer Maximilian