ใหม่ใน Chrome 117

Adriana Jara

สิ่งที่จำเป็นต้องทราบมีดังนี้

• ฟีเจอร์ใหม่ 3 อย่างของ CSS ช่วยให้เพิ่มภาพเคลื่อนไหวในการเข้าและออกได้อย่างง่ายดาย
• ประมวลผลชุดข้อมูลลำดับที่สูงขึ้นด้วยการจัดกลุ่มอาร์เรย์
• เครื่องมือสำหรับนักพัฒนาเว็บทำให้การลบล้างในเครื่องง่ายขึ้น
• นอกจากนี้ยังมีอีกมากมาย

ฉันชื่อ 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 เรียกใช้ฟังก์ชัน Callback ที่มีให้ 1 ครั้งสำหรับแต่ละองค์ประกอบใน Iterable ฟังก์ชัน Callback ควรแสดงผลสตริงหรือสัญลักษณ์ที่ระบุกลุ่มขององค์ประกอบที่เกี่ยวข้อง

ในตัวอย่างต่อไปนี้ จากเอกสาร MDN มีอาร์เรย์ของผลิตภัณฑ์ที่ใช้เมธอด 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

อ่านเพิ่มเติม

เราพูดถึงไฮไลต์สำคัญเพียงบางส่วนเท่านั้น ไปที่ลิงก์ด้านล่าง การเปลี่ยนแปลงเพิ่มเติมใน Chrome 117

• มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (117)
• การเลิกใช้งานและการนำ Chrome 117 ออก
• การอัปเดต ChromeStatus.com สำหรับ Chrome 117
• รายการเปลี่ยนแปลงที่เก็บแหล่งที่มาของ Chromium
• ปฏิทินการเผยแพร่ของ Chrome

สมัครใช้บริการ

หากต้องการติดตามข้อมูลล่าสุด โปรดสมัครรับข้อมูล ช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลเมื่อเราเปิดตัววิดีโอใหม่

สวัสดี คุณ Adriana Jara แล้ว ทันทีที่ Chrome 117 เปิดตัว เราจะบอกคุณว่ามีอะไรใหม่ใน Chrome