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

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

Mariko Kosaka

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

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

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

ทีม Chrome กำลังทำงานร่วมกับเครื่องมือของเบราว์เซอร์อื่นๆ และชุมชนเว็บเพื่อให้เกิดความชัดเจนมากขึ้น ซึ่งรวมถึงการทำงานในโปรเจ็กต์ต่างๆ เช่น Interop 2023 ที่ช่วยปรับปรุงความสามารถในการทำงานร่วมกันของชุดฟีเจอร์หลัก แล้วฟีเจอร์ที่เปิดตัวในช่วง 2-3 ปีที่ผ่านมาล่ะ ฟีเจอร์ทดลองที่เราได้ทราบเมื่อ 2 ปีก่อนพร้อมให้ใช้งานแล้วหรือยัง

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

องค์ประกอบกล่องโต้ตอบ

เอลิเมนต์ <dialog> คือเอลิเมนต์ HTML ใหม่ที่ใช้สร้างพรอมต์กล่องโต้ตอบ เช่น ป๊อปอัปและโมดอล

การรองรับเบราว์เซอร์

• 37
• 79
• 98
• 15.4

แหล่งที่มา

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

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

การรองรับเบราว์เซอร์

• 104
• 104
• 72
• 14.1

แหล่งที่มา

อ่านคำอธิบายโดยละเอียดเกี่ยวกับการเปลี่ยนแปลงนี้ได้ที่หัวข้อการควบคุมการเปลี่ยนรูปแบบ 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);

การรองรับเบราว์เซอร์

• 98
• 98
• 94
• 15.4

แหล่งที่มา

โปรดดูรายละเอียดเพิ่มเติมที่หัวข้อการคัดลอกแบบเจาะลึกใน JavaScript โดยใช้ structuredClone

คลาสจำลอง :focus-visible

ในฐานะนักพัฒนาเว็บ เราทุกคนคุ้นเคยกับ "วงโฟกัส" ที่ปรากฏขึ้นเมื่อคุณไปยังส่วนต่างๆ ของหน้าด้วยแป้นพิมพ์หรือคลิกองค์ประกอบอินพุต ฟีเจอร์นี้เป็นฟีเจอร์ที่จำเป็นสำหรับการช่วยเหลือพิเศษ แต่บางครั้งก็รบกวนการออกแบบภาพสำหรับผู้ใช้บางราย พсевโดคลาส :focus-visible CSS จะตรวจสอบว่าเบราว์เซอร์เชื่อว่าโฟกัสควรแสดงหรือไม่ ตอนนี้คุณระบุสไตล์ได้เฉพาะเมื่อควรแสดงโฟกัสเท่านั้น

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

การรองรับเบราว์เซอร์

• 86
• 86
• 85
• 15.4

แหล่งที่มา

ดูข้อมูลเพิ่มเติมได้ที่ส่วน "เน้นที่" ใน "เรียนรู้ CSS"

อินเทอร์เฟซ TransformStream

อินเทอร์เฟซ TransformStream ของ Streams API ช่วยให้ส่งผ่านสตรีมไปยังอีกสตรีมหนึ่งได้

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

การรองรับเบราว์เซอร์

• 67
• 79
• 102
• 14.1

แหล่งที่มา

สรุป

ยังมีฟีเจอร์อีกมากมายที่เพิ่งเริ่มทำงานร่วมกันได้และใช้งานได้อย่างเสถียรบนแพลตฟอร์มเว็บ ในอนาคต เราจะทำงานร่วมกับกลุ่มชุมชน WebDX เพื่อเพิ่มความชัดเจนให้กับชุดฟีเจอร์พื้นฐานเหล่านี้ โปรดดูรายละเอียดเพิ่มเติมที่ web.dev/baseline

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

เราอยากทราบว่าสิ่งที่เราทํามีประโยชน์กับคุณหรือไม่ หรือคุณต้องการการสนับสนุนประเภทอื่น โปรดติดต่อเราที่ WebDX Community Group