- การรองรับ
ResizeObservers
จะแจ้งให้คุณทราบเมื่อสี่เหลี่ยมผืนผ้าเนื้อหาขององค์ประกอบเปลี่ยนขนาด - ตอนนี้โมดูลจะเข้าถึงโฮสต์ข้อมูลเมตาที่เฉพาะเจาะจงด้วย import.meta ได้แล้ว
- ตัวบล็อกป๊อปอัปมีสัญญาณแรง
window.alert()
ไม่เปลี่ยนโฟกัสแล้ว
และยังมีอื่นๆ อีกมากมาย
ฉันชื่อ Pete LePage มาเจาะลึกกันเลยและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 64 กัน
หากต้องการดูรายการการเปลี่ยนแปลงทั้งหมด ดูรายการการเปลี่ยนแปลงที่เก็บของแหล่งที่มา Chromium
ResizeObserver
การติดตามเมื่อขนาดองค์ประกอบเปลี่ยนแปลงอาจเป็นเรื่องยาก ส่วนใหญ่แล้วคุณจะต้องแนบ Listener เข้ากับเหตุการณ์ resize
ของเอกสาร จากนั้นจึงเรียกใช้ getBoundingClientRect
หรือ getComputedStyle
แต่ทั้ง 2 อย่างนี้อาจทำให้
เลย์เอาต์เกิดข้อขัดข้อง
แล้วถ้าหน้าต่างเบราว์เซอร์ไม่เปลี่ยนขนาด แต่มีการเพิ่มองค์ประกอบใหม่
ลงในเอกสารล่ะ หรือคุณได้เพิ่ม display: none
ลงในองค์ประกอบแล้ว ทั้ง 2 อย่างนี้สามารถเปลี่ยนขนาดขององค์ประกอบอื่นๆ ภายในหน้าเว็บได้
ResizeObserver
จะแจ้งให้คุณทราบเมื่อองค์ประกอบมีการเปลี่ยนแปลงขนาด รวมถึงระบุความสูงและความกว้างใหม่ขององค์ประกอบ ซึ่งจะช่วยลดความเสี่ยงในการเกิดการจัดรูปแบบขึ้น
เช่นเดียวกับ Observer อื่นๆ การใช้งานนั้นค่อนข้างง่าย นั่นคือสร้างออบเจ็กต์ ResizeObserver
และส่งโค้ดเรียกกลับไปยังตัวสร้าง โค้ดเรียกกลับจะได้รับอาร์เรย์ ResizeOberverEntries
–1 รายการต่อองค์ประกอบที่สังเกตได้ ซึ่งมีมิติข้อมูลใหม่สำหรับองค์ประกอบดังกล่าว
const ro = new ResizeObserver( entries => {
for (const entry of entries) {
const cr = entry.contentRect;
console.log('Element:', entry.target);
console.log(`Element size: ${cr.width}px × ${cr.height}px`);
console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
}
});
// Observe one or multiple elements
ro.observe(someElement);
ลองดู ResizeObserver
: เหมือนกับ document.onresize
สำหรับ Elements
สำหรับรายละเอียดเพิ่มเติมและตัวอย่างในโลกความเป็นจริง
ตัวป้องกันป๊อปอัปที่ได้รับการปรับปรุง
ฉันไม่ชอบแท็บอันเดอร์ นั่นก็คือตอนที่หน้าเว็บเปิดป๊อปอัปไปยังปลายทางบางแห่งและนำทางไปยังหน้าเว็บดังกล่าว ปกติแล้วหนึ่งในนั้นจะเป็นโฆษณาหรือ สิ่งที่คุณไม่ต้องการ
ตั้งแต่ใน Chrome 64 เป็นต้นไป ระบบจะบล็อกการไปยังส่วนต่างๆ แบบนี้ และ Chrome จะแสดง UI เนทีฟบางอย่างแก่ผู้ใช้ ซึ่งจะช่วยให้ผู้ใช้ติดตามการเปลี่ยนเส้นทางได้ หากต้องการ
import.meta
เมื่อเขียนโมดูล JavaScript คุณมักจะต้องการเข้าถึงข้อมูลเมตาเฉพาะโฮสต์เกี่ยวกับโมดูลปัจจุบัน ตอนนี้ Chrome 64 รองรับพร็อพเพอร์ตี้ import.meta
ภายในโมดูลแล้ว และแสดง URL ของโมดูลเป็น import.meta.url
ซึ่งจะเป็นประโยชน์มากเมื่อคุณต้องการแก้ไขทรัพยากรที่เกี่ยวข้องกับไฟล์โมดูล ไม่ใช่เอกสาร HTML ปัจจุบัน
และอีกมากมาย
ทั้งหมดนี้เป็นการเปลี่ยนแปลงเพียงบางส่วนใน Chrome 64 สำหรับนักพัฒนาซอฟต์แวร์
- ตอนนี้ Chrome รองรับการบันทึกที่มีชื่อและอักขระหลีกของพร็อพเพอร์ตี้ Unicode ในนิพจน์ทั่วไปแล้ว
- ค่าเริ่มต้น
preload
สำหรับองค์ประกอบ<audio>
และ<video>
คือmetadata
ซึ่งทำให้ Chrome ทำงานสอดคล้องกับเบราว์เซอร์อื่นๆ และช่วยลดการใช้แบนด์วิดท์และทรัพยากรด้วยการโหลดเฉพาะข้อมูลเมตา โดยไม่โหลดตัวสื่อ - ตอนนี้คุณสามารถใช้
Request.prototype.cache
เพื่อดูโหมดแคชของRequest
และพิจารณาว่าคำขอเป็นคำขอโหลดซ้ำหรือไม่ - เมื่อใช้ Focus Management API คุณจะโฟกัสองค์ประกอบได้โดยไม่ต้องเลื่อนไปที่องค์ประกอบนั้นด้วยแอตทริบิวต์
preventScroll
window.alert()
อ๊ะ ขออีก 1 รายการนะ ถึงจะไม่ใช่ "ฟีเจอร์สำหรับนักพัฒนาซอฟต์แวร์"
แต่ก็ทำให้ผมมีความสุข window.alert()
จะไม่นำแท็บพื้นหลังมาไว้เบื้องหน้าอีกต่อไป แต่ระบบจะแสดงการแจ้งเตือนเมื่อผู้ใช้เปลี่ยนกลับไปที่แท็บนั้นแทน
ไม่มีการสลับแท็บแบบสุ่มแล้ว เนื่องจากมีบางอย่างทำให้ window.alert
เริ่มทำงาน
ฉันดู Google ปฏิทินเก่าของเธออยู่
อย่าลืมติดตามช่อง YouTube ของเรา และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ผมชื่อ Pete LePage และทันทีที่มีการเปิดตัว Chrome 65 ผมจะมาบอก ว่ามีอะไรใหม่ใน Chrome!