ฟีเจอร์พื้นฐานที่ใช้ได้ในปัจจุบัน

ดูข้อมูลเกี่ยวกับฟีเจอร์บางอย่างที่เป็นส่วนหนึ่งของเกณฑ์พื้นฐาน

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

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

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

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

การคัดลอกแบบเจาะลึกใน 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