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

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

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

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

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

ทีม 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 แบบละเอียดด้วยพร็อพเพอร์ตี้ Transform แต่ละรายการ

หน่วยวิวพอร์ตใหม่

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

คลาสเทียม :focus-visible

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

/* 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 เพื่อเพิ่มความชัดเจนให้กับชุดฟีเจอร์พื้นฐานเหล่านี้ โปรดดูรายละเอียดเพิ่มเติมที่ web.dev/baseline

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

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