สิ่งที่จำเป็นต้องทราบมีดังนี้
- ฟีเจอร์ CSS ใหม่ 3 รายการช่วยให้คุณเพิ่มภาพเคลื่อนไหวเข้าและออกที่ราบรื่น
- ประมวลผลชุดข้อมูลลำดับที่สูงขึ้นด้วยการจัดกลุ่มอาร์เรย์
- เครื่องมือสำหรับนักพัฒนาเว็บทำให้การลบล้างในเครื่องง่ายขึ้น
- และยังมีอื่นๆ อีกมากมาย
ฉันชื่อ Adriana Jara มาเจาะลึกกันเลยและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 117
ฟีเจอร์ CSS ใหม่สำหรับภาพเคลื่อนไหวเข้าและออก
ฟีเจอร์ CSS ใหม่ทั้ง 3 อย่างนี้ช่วยให้เพิ่มภาพเคลื่อนไหวเข้าและออกได้อย่างง่ายดาย รวมถึงภาพเคลื่อนไหวที่ไหลเข้าและออกจากองค์ประกอบที่ปิดได้ของเลเยอร์บนสุดอย่างกล่องโต้ตอบและป๊อปอัปได้อย่างลื่นไหล
ฟีเจอร์แรกคือ transition-behavior
หากต้องการเปลี่ยนพร็อพเพอร์ตี้ที่แยกกัน เช่น display
ให้ใช้ค่า allow-discrete
สำหรับ transition-behavior
.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}
.card.fade-out {
opacity: 0;
display: none;
}
จากนั้นจึงใช้กฎ @starting-style
เพื่อทำให้เอฟเฟกต์รายการจาก display: none
เคลื่อนไหวไปยังเลเยอร์บนสุด ใช้ @starting-style
เพื่อใช้สไตล์ที่เบราว์เซอร์ค้นหาได้ก่อนที่องค์ประกอบจะเปิดในหน้าเว็บ
/* 0. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 1. IS-OPEN STATE */
/* The state at which the element is open + transition logic */
.item {
height: 3rem;
display: grid;
overflow: hidden;
transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}
/* 2. EXITING STATE */
/* While it is deleting, before DOM removal in JS, apply this
transformation for height, opacity, and a transform which
skews the element and moves it to the left before setting
it to display: none */
.is-deleting {
opacity: 0;
height: 0;
display: none;
transform: skewX(50deg) translateX(-25vw);
}
สุดท้าย หากต้องการจางลง popover
หรือ dialog
จากเลเยอร์บนสุด ให้เพิ่มพร็อพเพอร์ตี้ overlay
ลงในรายการทรานซิชันของคุณ รวมภาพวางซ้อนในการเปลี่ยนภาพหรือภาพเคลื่อนไหวเพื่อทำให้โฆษณาซ้อนทับเคลื่อนไหวร่วมกับองค์ประกอบอื่นๆ และทำให้อยู่ในเลเยอร์บนสุดขณะเคลื่อนไหว วิธีนี้จะดูเนียนขึ้นมาก
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
ดูฟีเจอร์ CSS ใหม่ 4 รายการเพื่อให้ภาพเคลื่อนไหวเข้าและออกที่ราบรื่นเพื่อดูรายละเอียดเกี่ยวกับวิธีใช้ฟีเจอร์เหล่านี้เพื่อปรับปรุงประสบการณ์การเคลื่อนไหวของผู้ใช้
การจัดกลุ่มอาร์เรย์
ในการเขียนโปรแกรม การจัดกลุ่มอาร์เรย์เป็นการดำเนินการที่พบได้บ่อยมาก ซึ่งพบบ่อยที่สุดเมื่อเราใช้คำสั่ง GROUP BY ของ SQL และการเขียนโปรแกรม MapReduce (ซึ่งดีกว่าเรียกว่า การลดรายกลุ่ม แผนที่)
ความสามารถในการรวมข้อมูลเข้าเป็นกลุ่มช่วยให้นักพัฒนาซอฟต์แวร์คํานวณชุดข้อมูลที่มีลําดับที่สูงขึ้นได้ เช่น อายุเฉลี่ยของกลุ่มประชากรตามรุ่น หรือค่า LCP รายวันของหน้าเว็บ
การจัดกลุ่มอาร์เรย์จะเปิดใช้สถานการณ์เหล่านี้ได้โดยการเพิ่มเมธอดแบบคงที่ Object.groupBy
และ Map.groupBy
groupBy
จะเรียกใช้ฟังก์ชันเรียกกลับที่ให้ไว้ 1 ครั้งสำหรับแต่ละองค์ประกอบในการทำซ้ำ ฟังก์ชันเรียกกลับควรแสดงผลสตริงหรือสัญลักษณ์ที่ระบุกลุ่มขององค์ประกอบที่เกี่ยวข้อง
ในตัวอย่างต่อไปนี้ จากเอกสารประกอบ MN มีอาร์เรย์ของผลิตภัณฑ์ที่มีเมธอด groupBy
ซึ่งใช้ในการแสดงผลกลุ่มผลิตภัณฑ์ที่จัดกลุ่มตามประเภท
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 5 },
{ name: "fish", type: "meat", quantity: 22 },
];
const result = Object.groupBy(inventory, ({ type }) => type);
/* Result is:
{
vegetables: [
{ name: 'asparagus', type: 'vegetables', quantity: 5 },
],
fruit: [
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
meat: [
{ name: "goat", type: "meat", quantity: 23 },
{ name: "fish", type: "meat", quantity: 22 }
]
}
*/
ดูรายละเอียดเพิ่มเติมได้ในเอกสารประกอบของ groupBy
เพิ่มประสิทธิภาพการลบล้างในเครื่องในเครื่องมือสำหรับนักพัฒนาเว็บ
ตอนนี้มีการปรับปรุงฟีเจอร์การลบล้างในเครื่องแล้ว คุณจึงสามารถจำลองส่วนหัวการตอบกลับและเนื้อหาเว็บของทรัพยากรระยะไกลจากแผงเครือข่ายได้อย่างง่ายดายโดยไม่ต้องเข้าถึง
หากต้องการลบล้างเนื้อหาเว็บ ให้เปิดแผงเครือข่าย คลิกขวาที่คำขอ แล้วเลือกลบล้างเนื้อหา
หากคุณตั้งค่าการลบล้างในเครื่องไว้แต่ปิดใช้ เครื่องมือสำหรับนักพัฒนาเว็บจะเปิดใช้การตั้งค่าดังกล่าว หากยังไม่ได้ตั้งค่า เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงข้อความในแถบการดำเนินการด้านบน เลือกโฟลเดอร์เพื่อจัดเก็บการลบล้างและอนุญาตให้เครื่องมือสำหรับนักพัฒนาเว็บเข้าถึงโฟลเดอร์นั้น
เมื่อตั้งค่าการลบล้างแล้ว เครื่องมือสำหรับนักพัฒนาเว็บจะนำคุณไปยังแหล่งที่มา > การลบล้าง > ตัวแก้ไขเพื่อให้คุณลบล้างเนื้อหาเว็บได้
โปรดทราบว่าทรัพยากรที่ถูกลบล้างจะระบุด้วย ในแผงเครือข่าย วางเมาส์เหนือไอคอนเพื่อดูสิ่งที่ลบล้าง
ดูมีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บเพื่อดูรายละเอียดทั้งหมดและข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 117
และอีกมากมาย
แน่นอนว่ายังมีอีกมากมาย
ตอนนี้ระบบใช้ค่า
subgrid
ที่คาดไว้สำหรับgrid-template-columns
และgrid-template-rows
ใน Chrome แล้วโดยมีช่วงทดลองใช้การเลิกใช้งาน
WebSQL
และช่วงทดลองใช้สำหรับนักพัฒนาซอฟต์แวร์สำหรับการเลิกใช้งานเหตุการณ์unload
notRestoredReasons
API สำหรับ bfcache ที่กล่าวถึงในวิดีโอสำหรับ Chrome 116 น่าจะเปิดตัวในเวอร์ชันนี้
อ่านเพิ่มเติม
ซึ่งจะกล่าวถึงไฮไลต์ที่สำคัญบางส่วนเท่านั้น ไปที่ลิงก์ด้านล่างเพื่อดูวิธี การเปลี่ยนแปลงเพิ่มเติมใน Chrome 117
- มีอะไรใหม่ใน Chrome DevTools (117)
- การเลิกใช้งานและการนำ Chrome 117 ออก
- การอัปเดต ChromeStatus.com สำหรับ Chrome 117
- รายการเปลี่ยนแปลงที่เก็บของแหล่งที่มา Chromium
- ปฏิทินการเผยแพร่ Chrome
สมัครใช้บริการ
โปรดติดตามช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ขอขอบคุณ คุณ Adriana Jara และทันทีที่มีการเปิดตัว Chrome 117 เราจะแจ้งให้คุณทราบเกี่ยวกับสิ่งใหม่ๆ ใน Chrome