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

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

เผยแพร่: 10 พฤษภาคม 2023

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

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

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

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

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

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

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

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

อ่านคำอธิบายโดยละเอียดเกี่ยวกับการเปลี่ยนแปลงนี้ได้ที่หัวข้อการควบคุมการเปลี่ยนรูปแบบ CSS ที่ละเอียดยิ่งขึ้นด้วยพร็อพเพอร์ตี้การเปลี่ยนรูปแบบแต่ละรายการ

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

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

คลาสจำลอง :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 ช่วยให้ส่งผ่านสตรีมไปยังอีกสตรีมหนึ่งได้

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

สรุป

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

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

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