ใหม่ใน 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 ใหม่เพื่อ วาดภาพได้คล้ายๆ กับองค์ประกอบผ้าใบ

<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 กลายเป็นสินค้าแบบยืดหยุ่น

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

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

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

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

• ไวยากรณ์สำหรับการระบุ HSL และ HSLA และพิกัด RGB และ RGBA สำหรับคุณสมบัติสีแล้ว จับคู่ ข้อกำหนดของสี CSS 4
• นโยบายฟีเจอร์ใหม่ช่วยให้ คุณสามารถควบคุม XHR พร้อมกันผ่านส่วนหัว HTTP หรือ iframe allow

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

ผมชื่อ Pete LePage ทันทีที่เปิดตัว Chrome 66 ฉันก็จะงง มาแจ้งให้คุณทราบว่า มีอะไรใหม่ใน Chrome!