ไม่ได้เจอกันนานเลย วิดีโอ "มีอะไรใหม่ใน Chrome" กลับมาแล้วพร้อมข้อมูลต่อไปนี้
- กล่องข้อความ CSS ซึ่งช่วยให้คุณควบคุมระยะห่างแนวตั้งได้อย่างแม่นยำโดยใช้เมตริกแบบอักษร
- File System Access API ที่ตอนนี้รองรับใน Android และ Webview
- วิธีรักษาสถานะเพื่อย้ายองค์ประกอบ DOM ด้วย
moveBefore - Light dismiss ปรากฏในองค์ประกอบ
<dialog> - และยังมีการอัปเดตอีกมากมายในพื้นฐานและอื่นๆ
และ Mariko จะเป็นผู้ดูแลคุณในวันนี้ มาเจาะลึกกันว่ามีอะไรใหม่ใน Chrome ในช่วง 3 เวอร์ชันที่ผ่านมา
กล่องข้อความ CSS
พร็อพเพอร์ตี้ text-box ของ CSS ช่วยให้คุณควบคุมการเว้นวรรคแนวตั้งได้อย่างแม่นยำโดยใช้เมตริกแบบอักษร
แต่ละแบบอักษรจะมีระยะห่างเหนือและใต้อักขระแตกต่างกัน ซึ่งจะเป็นตัวกำหนดขนาดขององค์ประกอบ
ก่อนหน้านี้คุณไม่สามารถควบคุมขนาดของพื้นที่ทำงานเหล่านี้ได้
พร็อพเพอร์ตี้ text-box-trim ใหม่จะระบุด้านที่จะตัดด้านบนหรือด้านล่าง และพร็อพเพอร์ตี้ text-box-edge จะระบุวิธีตัด
เช่น ตัดที่ความสูงของตัวอักษรตัวพิมพ์ใหญ่ ซึ่งเป็นส่วนบนของตัวอักษรตัวพิมพ์ใหญ่
คุณยังเขียนโดยใช้พร็อพเพอร์ตี้ text-box แบบย่อได้ด้วย
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้พร็อพเพอร์ตี้ใหม่เหล่านี้ได้ในบทความ CSS text-box-trim
File System Access API
รายการพื้นฐาน DOM Node.prototype.moveBefore ที่เพิ่มเข้ามาใน Chrome 133 ช่วยให้คุณย้ายองค์ประกอบไปรอบๆ ต้นไม้ DOM ได้โดยไม่ต้องรีเซ็ตสถานะขององค์ประกอบ
เมื่อนำองค์ประกอบออกแล้วแทรกกลับเข้าไปใหม่เพื่อย้ายองค์ประกอบ DOM ระบบจะรีเซ็ตสถานะขององค์ประกอบนั้น เมื่อใช้พรอมิเตอใหม่นี้ ระบบจะเก็บสถานะของโหนดไว้
ดังนั้น iframe จะยังคงโหลดอยู่ องค์ประกอบที่ใช้งานอยู่จะยังคงอยู่ในโฟกัส รายการต่างๆ เช่น ข้อความป๊อปอัปและกล่องโต้ตอบจะยังคงเปิดอยู่ และการเปลี่ยนภาพหรือภาพเคลื่อนไหว CSS จะยังคงทำงานต่อไป
วิธีย้ายองค์ประกอบ DOM โดยเก็บสถานะไว้
File System Access API พร้อมใช้งานใน Chrome บนเดสก์ท็อปมาระยะหนึ่งแล้ว API นี้ช่วยให้เว็บแอปโต้ตอบกับไฟล์ในระบบไฟล์ในเครื่องของผู้ใช้ได้ ตั้งแต่ Chrome 132 เป็นต้นไป API นี้พร้อมใช้งานใน Android และใน WebView ด้วย
หากต้องการอ่านไฟล์ ให้เรียกใช้ showOpenFilePicker() เมธอดนี้จะแสดงเครื่องมือเลือกไฟล์ จากนั้นจะแสดงผลแฮนเดิลไฟล์ที่คุณใช้อ่านไฟล์ได้
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
หากต้องการบันทึกไฟล์ลงในดิสก์ คุณสามารถใช้ตัวแฮนเดิลไฟล์เดียวกับที่ได้ก่อนหน้านี้ หรือเรียกใช้ showSaveFilePicker() เพื่อรับตัวแฮนเดิลไฟล์ใหม่
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
การปิดแบบเบาๆ มาถึงองค์ประกอบ <dialog>
หากคุณเคยใช้ Popover API เพื่อสร้าง popover คงทราบดีว่าหนึ่งในฟีเจอร์ที่ยอดเยี่ยมของ Popover API คือลักษณะการปิดแบบเบา ผู้ใช้สามารถคลิกพื้นหลังและองค์ประกอบป๊อปอัปจะปิดลงโดยไม่ต้องกดปุ่มปิดโดยเฉพาะ
ตอนนี้องค์ประกอบ <dialog> รองรับความสามารถในการปิดไฟแล้ว
เมื่อคุณตั้งค่าแอตทริบิวต์ closedby เป็น any คุณจะปิดกล่องโต้ตอบได้โดยคลิกนอกกล่องโต้ตอบหรือกดแป้น Escape
<dialog closedby="any">...</dialog>
ลักษณะการทำงานนี้จะเหมือนกับเมื่อตั้งค่าป๊อปอัปเป็นอัตโนมัติ
การอัปเดตในเกณฑ์พื้นฐาน
และนี่คือข่าวเกี่ยวกับ Baseline
เกณฑ์พื้นฐานที่กลับมาเปิดให้จองอีกครั้ง
รายการแรกคือ "เพิ่งเปิดตัว" ซึ่งเป็นฟีเจอร์ที่เพิ่งเปิดตัวในเบราว์เซอร์หลักทั้ง 4 รายการ
scrollbar-gutter และ scrollbar-width
พร็อพเพอร์ตี้ CSS scrollbar-gutter ช่วยให้คุณจองพื้นที่สำหรับแถบเลื่อนได้เพื่อหลีกเลี่ยงการเปลี่ยนแปลงเลย์เอาต์ที่ไม่ต้องการเมื่อแถบเลื่อนปรากฏขึ้นหรือหายไป scrollbar-width ช่วยให้คุณสร้างแถบเลื่อนที่แคบลงหรือซ่อนแถบเลื่อนไปเลยได้โดยไม่ส่งผลต่อการเลื่อน
ruby-align
พร็อพเพอร์ตี้ CSS ruby-align ช่วยให้คุณระบุการจัดแนวของข้อความฐาน Ruby และข้อความคำอธิบายประกอบ Ruby ได้
Promise.try
Promise.try เป็นเมธอดที่สะดวกสำหรับการจัดการข้อผิดพลาดสำหรับคำขอแบบซิงโครนัส การใช้วิธีนี้จะช่วยให้คุณไม่ต้องใช้ฟังก์ชัน Callback เมื่อพยายามส่งคำขอด้วย Promise.resolve
การเพิ่มประสิทธิภาพการเรียกเก็บขยะและ Tail Call ของ Wasm
ตอนนี้ WebAssembly รองรับการเก็บขยะและการเพิ่มประสิทธิภาพการเรียกใช้โค้ดส่วนท้ายแล้ว
เกณฑ์พื้นฐานพร้อมให้บริการในวงกว้าง
อาร์เรย์ findLast() และ findLastIndex()
เมธอด findLast() และ findLastIndex() ของอาร์เรย์เป็นเมธอดที่สะดวกมากในการรับรายการจากท้ายอาร์เรย์ เบราว์เซอร์หลักทั้งหมดรองรับฟีเจอร์นี้มาเป็นเวลา 30 เดือนแล้ว ซึ่งหมายความว่าตอนนี้ฟีเจอร์นี้พร้อมให้บริการใน Baseline กันอย่างแพร่หลาย
พร็อพเพอร์ตี้การเปลี่ยนรูปแบบแต่ละรายการ
พร็อพเพอร์ตี้การเปลี่ยนรูปแบบแต่ละรายการซึ่งช่วยให้คุณควบคุมการเปลี่ยนรูปแบบ CSS ได้อย่างละเอียดยิ่งขึ้นพร้อมใช้งานในเวอร์ชันเบย์สไลน์แบบกว้างแล้ว
ข้อมูลเพิ่มเติมเกี่ยวกับพื้นฐาน
หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับ Baseline และความแตกต่างระหว่าง "ใหม่" กับ "พร้อมให้บริการในวงกว้าง" โปรดดูวิดีโอสั้นๆที่เราจัดทำขึ้น
นอกจากนี้ คุณยังดูข้อมูลเพิ่มเติมเกี่ยวกับสถานะพื้นฐานของฟีเจอร์ได้ที่หน้าแดชบอร์ดสถานะแพลตฟอร์มเว็บ
โปรเจ็กต์การทำงานร่วมกันกลับมาอีกครั้งในปี 2025
และสุดท้าย โปรเจ็กต์การทำงานร่วมกันจะกลับมาในปี 2025 พร้อมรายการพื้นที่ที่มุ่งเน้น ซึ่งรวมถึงการเปลี่ยนมุมมอง การวางตำแหน่งจุดยึด CSS และ Navigation API อย่าลืมอ่านประกาศเกี่ยวกับโปรเจ็กต์
สมัครใช้บริการ
หากต้องการติดตามข่าวสารล่าสุด โปรดติดตามช่อง YouTube ของนักพัฒนาซอฟต์แวร์ Chrome แล้วคุณจะได้รับอีเมลแจ้งเตือนทุกครั้งที่เราเปิดตัววิดีโอใหม่
ฉันชื่อ Mariko Kosaka และเราจะกลับมาอีกในอีก 3 เดือนเพื่อบอกคุณเพิ่มเติมเกี่ยวกับ "มีอะไรใหม่ใน Chrome"