ใหม่ใน Chrome 65

พีต เลอเพจ

  • 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 ได้

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

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

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

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

Surma มีโพสต์ที่ยอดเยี่ยมพร้อมการสาธิตหลายรายการในผู้อธิบาย

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

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

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

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

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

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


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 สำหรับนักพัฒนาซอฟต์แวร์ และแน่นอนว่ายังมีสิ่งใหม่ๆ อีกมากมาย

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

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

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