ใหม่ใน Chrome 65

Pete LePage

  • CSS Paint API ช่วยให้คุณสร้างรูปภาพแบบเป็นโปรแกรมได้
  • Server Timing API ช่วยให้เว็บเซิร์ฟเวอร์ให้ข้อมูลการกำหนดเวลาของประสิทธิภาพผ่านส่วนหัว HTTP ได้
  • คุณสมบัติใหม่ของ CSS display: contents อาจทำให้กล่องหายไปได้

และยังมีอีกอีกมากมาย

ฉันชื่อ Pete LePage ไปดูกันเลยว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 65 กัน

หากต้องการดูรายการการเปลี่ยนแปลงทั้งหมด โปรดดูรายการเปลี่ยนแปลงที่เก็บซอร์ส Chromium

API การแสดงผล CSS

CSS Paint API ช่วยให้คุณสร้างรูปภาพสำหรับพร็อพเพอร์ตี้ CSS แบบเป็นโปรแกรมได้ เช่น background-image หรือ border-image

แทนที่จะไม่อ้างอิงรูปภาพ คุณสามารถใช้ฟังก์ชัน Paint ใหม่เพื่อ วาดภาพ ซึ่งคล้ายกับองค์ประกอบ Canvas

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

เช่น แทนที่จะเพิ่มองค์ประกอบ DOM เพิ่มเติมเพื่อสร้างเอฟเฟกต์ระลอกคลื่นบนปุ่มสไตล์ Material คุณอาจใช้ Paint API ได้

และยังเป็นวิธีที่มีประสิทธิภาพในการรวมฟีเจอร์ CSS ที่เบราว์เซอร์ยังไม่รองรับ

Surma ได้โพสต์ที่ดีซึ่งมีการสาธิตหลายรายการในวิดีโออธิบายของเขา

API ระยะเวลาของเซิร์ฟเวอร์

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

Server Timing API ใหม่จะช่วยให้เซิร์ฟเวอร์ของคุณส่งข้อมูลช่วงเวลาไปยังเบราว์เซอร์ได้ คุณจึงเห็นภาพของประสิทธิภาพโดยรวมได้ชัดเจนขึ้น

คุณสามารถติดตามเมตริกได้มากเท่าที่ต้องการ เช่น เวลาในการอ่านฐานข้อมูล เวลาเริ่มต้น หรืออะไรก็ตามที่สำคัญสำหรับคุณโดยการเพิ่มส่วนหัว Server-Timing ในการตอบกลับ

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

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


display: contents

พร็อพเพอร์ตี้ CSS display: contents ใหม่ดูดีทีเดียว

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

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

โดยค่าเริ่มต้น div ภายในจะอยู่ใน div ด้านนอก

ฉันคือภายใน <div>

การเพิ่ม display: contents ไปยัง div ด้านนอกจะทำให้ div ด้านนอกหายไป และไม่มีการใช้ข้อจำกัดกับ div ด้านในอีกต่อไป ขณะนี้ div ด้านในมีความกว้าง 100%

ใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อตรวจสอบ DOM และสังเกตเห็นว่า div ด้านนอกยังคงอยู่

มีอีกหลายกรณีที่วิธีนี้มีประโยชน์ แต่กรณีที่พบบ่อยที่สุดคือการใช้ Flexbox เมื่อใช้ Flexbox เฉพาะรายการย่อยของคอนเทนเนอร์ Flex จะกลายเป็นรายการ Flex

แต่เมื่อคุณใช้ display: contents กับผู้เผยแพร่โฆษณาย่อย ผู้เผยแพร่โฆษณาย่อยของบุตรหลานจะกลายเป็นรายการที่ยืดหยุ่นและจัดวางโดยใช้กฎเดียวกันกับที่จะนำไปใช้กับผู้เผยแพร่โฆษณาหลัก

ดูกล่องวานิชที่มีเนื้อหาโชว์ของ Rachel Andrew สำหรับรายละเอียดเพิ่มเติมและตัวอย่างอื่นๆ

และอีกมากมาย

นี่เป็นเพียงการเปลี่ยนแปลงเล็กๆ น้อยๆ ใน Chrome 65 สำหรับนักพัฒนาซอฟต์แวร์ ซึ่งแน่นอนว่ายังมีสิ่งต่างๆ อีกมาก

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

ผมชื่อ Pete LePage และทันทีที่ Chrome 66 เปิดตัว เราจะบอกว่า มีอะไรใหม่ใน Chrome