ดูข้อมูลเกี่ยวกับฟีเจอร์บางอย่างที่เป็นส่วนหนึ่งของเกณฑ์พื้นฐาน
เว็บมีการพัฒนาอยู่เสมอและเบราว์เซอร์จะอัปเดตอยู่เสมอเพื่อให้นักพัฒนาซอฟต์แวร์มีเครื่องมือใหม่ๆ ในการพัฒนานวัตกรรมบนแพลตฟอร์ม สิ่งที่ก่อนหน้านี้ต้องใช้ไลบรารีตัวช่วยจะกลายเป็นส่วนหนึ่งของแพลตฟอร์มเว็บและรองรับในเบราว์เซอร์ทั้งหมด รวมทั้งวิธีการออกแบบโค้ดองค์ประกอบที่สั้นหรือง่ายขึ้น
แม้ว่าการพัฒนาและการปรับตัวอย่างต่อเนื่องนี้จะมีประโยชน์ แต่ก็สร้างความสับสนได้เช่นกัน การสำรวจการอัปเดตทั้งหมดเหล่านี้อาจเป็นเรื่องยาก ในฐานะนักพัฒนาซอฟต์แวร์ เรามีคำถามเช่น "เครื่องมือเบราว์เซอร์ทั้งหมดจะรองรับฟีเจอร์ใหม่นี้เมื่อใด" "ฉันจะเริ่มใช้ฟีเจอร์ดังกล่าวในโค้ดเวอร์ชันที่ใช้งานจริงได้เมื่อใด" "เราควรสนับสนุนเบราว์เซอร์รุ่นเก่านานเท่าใด"
คำตอบที่แท้จริงคือ "ขึ้นอยู่กับ" สิ่งที่จำเป็นและใช้งานได้จริงจะขึ้นอยู่กับฐานผู้ใช้ ชุดซอฟต์แวร์โครงสร้างพื้นฐาน โครงสร้างทีม และอุปกรณ์ที่รองรับ แต่สิ่งหนึ่งที่เราทุกคนต่างเห็นด้วยคือ สถานการณ์ของเว็บในปัจจุบันทำให้การตัดสินใจเหล่านั้นเป็นเรื่องยาก
ทีม Chrome กำลังทำงานร่วมกับเครื่องมือเบราว์เซอร์อื่นๆ และชุมชนเว็บเพื่อเพิ่มความชัดเจน ซึ่งรวมถึงโครงการต่างๆ อย่าง Interop 2023 ที่ช่วยปรับปรุงความสามารถในการทำงานร่วมกันของชุดฟีเจอร์หลัก แล้วฟีเจอร์ต่างๆ ที่มีให้ใช้ในช่วง 2-3 ปีที่ผ่านมาล่ะ ฟีเจอร์ทดลองที่เราได้เรียนรู้เมื่อ 2 ปีที่แล้วพร้อมใช้งานไหม
ในโพสต์นี้ ฉันอยากจะเน้นคุณลักษณะบางอย่างที่พร้อมใช้งานกับเครื่องมือเบราว์เซอร์หลักๆ ทั้งหมด 2 เวอร์ชันหลักที่ผ่านมา จุดนี้เป็นจุดตัดที่เรารู้สึกว่านักพัฒนาแอปส่วนใหญ่จะรู้สึกว่าฟีเจอร์ใช้งานได้อย่างปลอดภัย และเป็นชุดฟีเจอร์ที่เราเรียกว่า "พื้นฐาน" โปรดดูประกาศเกี่ยวกับเกณฑ์พื้นฐานที่นี่เพื่อดูข้อมูลเพิ่มเติม
องค์ประกอบกล่องโต้ตอบ
องค์ประกอบ <dialog>
เป็นองค์ประกอบ HTML ใหม่ที่ใช้สร้างพรอมต์กล่องโต้ตอบ เช่น ป๊อปอัปและโมดัล
หากต้องการใช้ฟีเจอร์นี้ ให้กำหนดองค์ประกอบโมดัล จากนั้นเปิดกล่องโต้ตอบโดยเรียกใช้เมธอด showModal()
ในองค์ประกอบกล่องโต้ตอบ
<dialog id="d">
<form method="dialog">
<p>Hi, I'm a dialog.</p>
<button>ok</button>
</form>
</dialog>
<button onclick="d.showModal()">
Open Dialog
</button>
ในฐานะองค์ประกอบ HTML ของระบบ ฟีเจอร์ต่างๆ เช่น การจัดการโฟกัส การติดตามแท็บ และการเก็บบริบทการซ้อนจะสร้างขึ้น โปรดอ่านข้อมูลเพิ่มเติมที่หัวข้อการสร้างคอมโพเนนต์กล่องโต้ตอบ
คุณสมบัติการเปลี่ยนรูปแบบ CSS แต่ละรายการ
การใช้การแปลง CSS เป็นวิธีที่มีประสิทธิภาพในการเพิ่มการเคลื่อนไหวให้กับเว็บไซต์ของคุณ
คุณอาจคุ้นเคยกับการเขียนเรื่องการแปลง CSS ที่มีพร็อพเพอร์ตี้ 3 รายการในบรรทัดเดียว
ตอนนี้คุณระบุคุณสมบัติ Transform แยกกันได้แล้วตอนนี้ เมื่อใช้คุณสมบัติ Transform แต่ละรายการ ซึ่งมีประโยชน์เมื่อคุณเขียนภาพเคลื่อนไหวของคีย์เฟรมที่ซับซ้อน
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
สำหรับคำอธิบายโดยละเอียดเกี่ยวกับการเปลี่ยนแปลงนี้ โปรดอ่านการควบคุมการแปลง CSS อย่างละเอียดด้วยคุณสมบัติการเปลี่ยนรูปแบบแต่ละรายการ
หน่วยวิวพอร์ตใหม่
ขนาดวิวพอร์ตในอุปกรณ์เคลื่อนที่จะมีผลจากการมีหรือไม่มีแถบเครื่องมือแบบไดนามิก
บางครั้งคุณก็สามารถแสดงแถบ URL และแถบเครื่องมือการนำทางได้ แต่บางครั้งระบบจะถอนแถบเครื่องมือเหล่านั้นกลับทั้งหมด
ขนาดจริงของวิวพอร์ตจะแตกต่างออกไปโดยขึ้นอยู่กับว่าแถบเครื่องมือมองเห็นได้หรือไม่
หน่วยวิวพอร์ตใหม่อย่าง svh
และ lvh
ช่วยให้นักพัฒนาเว็บควบคุมได้ละเอียดยิ่งขึ้นเมื่อออกแบบสำหรับอุปกรณ์เคลื่อนที่ ดูข้อมูลเพิ่มเติมได้ในบทความหน่วยวิวพอร์ตขนาดใหญ่ ขนาดเล็ก และแบบไดนามิก
การสนับสนุนเบราว์เซอร์
- 108
- 108
- 101
- 15.4
การคัดลอกแบบเจาะลึกใน JavaScript
ก่อนหน้านี้ หากต้องการสร้างสำเนาโดยละเอียดของออบเจ็กต์โดยไม่มีการอ้างอิงไปยังออบเจ็กต์ต้นฉบับ การแฮ็กที่ได้รับความนิยมจะมีการรวม JSON.stringify
เข้ากับ JSON.parse
วิธีนี้เป็นการแฮ็กที่พบได้ทั่วไปซึ่ง V8 (เครื่องมือ JavaScript ของ Chrome) ได้ปรับปรุงประสิทธิภาพของเคล็ดลับนี้อย่างมาก แต่คุณไม่จำเป็นต้องใช้เคล็ดลับนี้อีกแล้วกับ structuredClone
const original = {id: 0, prop: {name: "Tom"}}
/* Old hack */
const deepCopy = JSON.parse(JSON.stringify(original));
/* New way */
const deepCopy = structuredClone(original);
โปรดดูรายละเอียดเพิ่มเติมที่หัวข้อการทำสำเนาแบบเจาะลึกใน JavaScript โดยใช้ที่มีโครงสร้างโคลน
คลาสเทียม :focus-visible
ในฐานะนักพัฒนาเว็บ เราทุกคนคุ้นเคยกับ "วงแหวนโฟกัส" ที่แสดงขึ้นเมื่อคุณไปยังส่วนต่างๆ ของหน้าด้วยแป้นพิมพ์หรือคลิกองค์ประกอบอินพุต ฟีเจอร์นี้จำเป็นสำหรับการช่วยเหลือพิเศษ แต่บางครั้งอาจขัดขวางการออกแบบภาพสำหรับผู้ใช้แต่ละคน คลาส Pseudo-class ของ :focus-visible
จะตรวจสอบว่าเบราว์เซอร์เชื่อว่าควรมองเห็นโฟกัสหรือไม่ ตอนนี้คุณสามารถระบุรูปแบบเฉพาะเวลาที่โฟกัสควรปรากฏให้เห็น
/* focus with tab key */
:focus-visible {
outline: 5px solid pink;
}
/* mouse click */
:focus:not(:focus-visible) {
outline: none;
}
ดูข้อมูลเพิ่มเติมได้ที่ส่วนโฟกัสที่การเรียนรู้ CSS
อินเทอร์เฟซของ TransformStream
อินเทอร์เฟซ TransformStream ของ Streams API ทำให้สามารถเชื่อมต่อสตรีมเข้าด้วยกันได้
เช่น คุณสามารถสตรีมข้อมูลจากที่หนึ่ง แล้วบีบอัดสตรีมข้อมูลไปยังตำแหน่งอื่นเมื่อมีการรับส่งข้อมูล บทความคำขอสตรีมมิงด้วย API การดึงข้อมูลจะอธิบายกรณีการใช้งานตัวอย่างนี้
สรุป
ยังมีฟีเจอร์อื่นๆ อีกมากมายที่เพิ่งเริ่มทำงานร่วมกันและเสถียรสำหรับการใช้งานในแพลตฟอร์มเว็บ ในอนาคต เราจะทำงานร่วมกับ WebDX Community Group เพื่อทำให้ชุดฟีเจอร์พื้นฐานเหล่านี้ชัดเจนยิ่งขึ้น โปรดดูรายละเอียดที่ web.dev/baseline เพื่อดูรายละเอียดเพิ่มเติม
หากคุณต้องการติดตามข่าวสารคราวล่าสุด ทีมของเราจะเผยแพร่บทความเมื่อฟีเจอร์ใช้งานร่วมกันได้ และเผยแพร่ข้อมูลอัปเดตรายเดือนเกี่ยวกับสิ่งที่เกิดขึ้นบนแพลตฟอร์มเว็บ ตั้งแต่ฟีเจอร์ทดลองไปจนถึงฟีเจอร์ใหม่ที่เพิ่งทำงานร่วมกัน
เราอยากทราบเสมอว่าสิ่งที่เราทําอยู่จะช่วยเหลือคุณได้หรือไม่ หรือหากต้องการการสนับสนุนในลักษณะต่างๆ โปรดติดต่อเราที่ WebDX Community Group