จากความสำเร็จของ Interop 2022 และ Interop 2023 เราก็ตื่นเต้นที่จะได้ร่วมงานกับผู้ให้บริการเบราว์เซอร์รายสำคัญและผู้มีส่วนเกี่ยวข้องอื่นๆ ที่เกี่ยวข้องอีกครั้ง วัตถุประสงค์ร่วมกันของเราคือปรับปรุงความสามารถในการทำงานร่วมกันระหว่างแพลตฟอร์มเว็บต่างๆ จึงลดความซับซ้อนในการทำงานของนักพัฒนาแอปและมอบประสบการณ์โดยรวมที่ดียิ่งขึ้นแก่ผู้ใช้อินเทอร์เน็ต
โดยการทำงานร่วมกันคือชุดการทดสอบและการเปรียบเทียบที่ครอบคลุมซึ่งออกแบบมาเพื่อประเมินการปฏิบัติตามข้อกำหนดของแต่ละเบราว์เซอร์ โดยอิงตามความมุ่งมั่นของเราที่มีต่อมาตรฐานเว็บ และสุดท้าย การทำงานร่วมกันจะพยายามขจัดความไม่สอดคล้องกันระหว่างเบราว์เซอร์ และส่งเสริมวิสัยทัศน์ที่เป็นหนึ่งเดียวภายในอุตสาหกรรม
สำหรับการทำงานร่วมกันปี 2024 ได้มีกระบวนการจัดทำข้อเสนอสู่สาธารณะเพื่อจัดหารายการฟีเจอร์เบื้องต้น จากรายการดังกล่าว ทุกฝ่ายได้ทำงานร่วมกันเพื่อสร้างรายการด้านที่ควรมุ่งเน้นสำหรับปี 2024 รายการต่อไปนี้แสดงด้านต่างๆ ที่เราหวังว่าจะผ่านการทดสอบที่เลือกครบ 100% ภายในสิ้นปีนี้
ทุกหัวข้อที่ควรให้ความสำคัญในปี 2024
การทำงานร่วมกันในปี 2024 ประกอบด้วยส่วนโฟกัสใหม่ 12 ด้าน และอีก 5 ส่วนที่ยกมาจากปี 2023 ซึ่งยังต้องดำเนินการแก้ไขบางส่วน ซึ่งพื้นที่ดังกล่าวมีดังนี้
- การช่วยเหลือพิเศษ
- การซ้อน CSS
- พร็อพเพอร์ตี้ที่กำหนดเอง
- Shadow DOM แบบประกาศ
- font-size-adjust
- HTTPS URL สำหรับ WebSocket
- IndexedDB
- เลย์เอาต์
- เหตุการณ์ตัวชี้และเมาส์
- ป๊อปอัป
- ไวยากรณ์สีสัมพัทธ์
- requestVideoFrameCallback
- การจัดรูปแบบแถบเลื่อน
- @starting-style และการเปลี่ยนแปลง-behavior
- ทิศทางของข้อความ
- text-wrap: สมดุล
- URL
หากต้องการดูรายละเอียดเกี่ยวกับด้านที่ควรมุ่งเน้นทั้งหมด ให้ไปที่แดชบอร์ด Interop 2024 ซึ่งแสดงรายละเอียดฟีเจอร์และงานที่จำเป็น รวมถึงคะแนนปัจจุบันของแต่ละเบราว์เซอร์ ในส่วนที่เหลือของบทความนี้ คุณจะพบกับบางส่วนที่ Chrome ต้องทำงานมากที่สุดเพื่อให้ไปถึง 100%
การฝัง
โมดูลการซ้อน CSS จะกำหนดไวยากรณ์สำหรับตัวเลือกการฝังที่ให้ความสามารถในการฝังกฎรูปแบบหนึ่งไว้ในอีกกฎหนึ่ง โดยมีตัวเลือกของกฎย่อยที่สัมพันธ์กับตัวเลือกของกฎหลัก
การซ้อน CSS จะแตกต่างจาก CSS Preprocessor เช่น Sass ตรงที่จะถูกแยกวิเคราะห์โดยเบราว์เซอร์ ไม่ใช่คอมไพล์ล่วงหน้าโดย CSS Preprocessor
การซ้อน CSS ช่วยให้อ่านง่าย แยกเป็นโมดูล และความสามารถในการบำรุงรักษาของสไตล์ชีต CSS นอกจากนี้ยังอาจช่วยลดขนาดไฟล์ CSS ซึ่งช่วยลดปริมาณข้อมูลที่ผู้ใช้ดาวน์โหลด
แม้ว่าเบราว์เซอร์ทั้งหมดรองรับ CSS Nesting แต่มีความแตกต่างบางอย่างในการใช้งานเนื่องจากข้อกำหนดมีการเปลี่ยนแปลง ในระหว่างการทำงานร่วมกันปี 2024 เรามุ่งทำให้เบราว์เซอร์ทั้งหมดเป็นไปตามข้อกำหนดปัจจุบัน
ดูข้อมูลเพิ่มเติมเกี่ยวกับการซ้อน CSS และค้นพบการอัปเดตสำคัญในข้อกำหนดที่เปิดใช้การซ้อนชื่อแท็กองค์ประกอบเปล่า
text-wrap: สมดุล
ค่าสมดุลของพร็อพเพอร์ตี้ text-wrap ของ CSS จะแสดงให้เบราว์เซอร์ทราบว่าคุณต้องการให้เบราว์เซอร์รักษาสมดุลระหว่างบรรทัดข้อความ ซึ่งมักจะใช้ในส่วนหัวหรือส่วนข้อความสั้นๆ อื่นๆ เพื่อหลีกเลี่ยงกรณีที่พิมพ์ไม่ได้
เบราว์เซอร์มีการรองรับเวอร์ชันต่างๆ ทั้งแบบสั้นและแบบยาวของพร็อพเพอร์ตี้นี้ ในระหว่างการทำงานร่วมกันปี 2024 เราตั้งเป้าที่จะทำให้สิ่งเหล่านี้ทำงานร่วมกัน
การสร้างสมดุลระหว่างบรรทัดแรกกับส่วนข้อความสั้นๆ อื่นๆ เป็นฟีเจอร์ที่นักพัฒนาซอฟต์แวร์ขอเข้ามาบ่อย ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์นี้ใน CSS text-wrap: balance โพสต์เรื่องจุดสิ้นสุดของตัวอักษรพิมพ์ใหญ่บนเว็บ หรือ CSS Text Balancing with text-wrap: balance
HTTP URL สำหรับ WebSocket
เดิมตัวสร้าง WebSocket ต้องใช้ URL ws: และ wss: ซึ่งป้องกันไม่ให้ใช้ URL สัมพัทธ์และโค้ดวิธีหลีกเลี่ยงปัญหา
ข้อกำหนดได้รับการอัปเดตให้อนุญาตรูปแบบ HTTP ดังนั้น URL สัมพัทธ์ จึงได้รับการปรับให้เป็นมาตรฐานสำหรับ ws: และ wss:
ในระหว่างการทำงานร่วมกันปี 2024 เราจะอัปเดตการใช้งานให้รองรับรูปแบบ HTTP
ไวยากรณ์สีสัมพัทธ์
ไวยากรณ์สีสัมพัทธ์มีการกำหนดไว้ใน ข้อกำหนด CSS Color 5 และมอบวิธีจัดการสีใน CSS เช่น ทำให้มืด สว่างขึ้น หรือทำให้สีจางลง
ไวยากรณ์สีสัมพัทธ์จะทำงานร่วมกันคร่าวๆ ได้ แต่เบราว์เซอร์ยังไม่ได้นำคีย์เวิร์ด currentcolor มาใช้ โดยการทดสอบเหล่านี้รวมอยู่ในการทำงานร่วมกันปี 2024
เรียนรู้เกี่ยวกับทุกสิ่งที่คุณสามารถทำได้ด้วยฟีเจอร์นี้ในไวยากรณ์สีที่เกี่ยวข้องกับ CSS
แดชบอร์ดการทำงานร่วมกันปี 2024
เราจะเผยแพร่คะแนนปัจจุบันสำหรับเบราว์เซอร์รุ่นทดลองและเวอร์ชันเสถียรในแดชบอร์ดอย่างเช่นปีที่ผ่านๆ มาเพื่อให้คุณดูได้ว่าคะแนนเป็นอย่างไร
เรารู้สึกตื่นเต้นจริงๆ ที่จะได้เห็นว่าควรจะปรับปรุงด้านต่างๆ ที่มุ่งเน้นในปีนี้ได้มากเพียงใด