- 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
ด้านนอก
การเพิ่ม display: contents
ไปยัง div ด้านนอกจะทำให้ div
ด้านนอกหายไป
และไม่มีการใช้ข้อจำกัดกับ div
ด้านในอีกต่อไป ขณะนี้ div
ด้านในมีความกว้าง 100%
div
ด้านนอกยังคงอยู่
มีอีกหลายกรณีที่วิธีนี้มีประโยชน์ แต่กรณีที่พบบ่อยที่สุดคือการใช้ Flexbox เมื่อใช้ Flexbox เฉพาะรายการย่อยของคอนเทนเนอร์ Flex จะกลายเป็นรายการ Flex
แต่เมื่อคุณใช้ display: contents
กับผู้เผยแพร่โฆษณาย่อย ผู้เผยแพร่โฆษณาย่อยของบุตรหลานจะกลายเป็นรายการที่ยืดหยุ่นและจัดวางโดยใช้กฎเดียวกันกับที่จะนำไปใช้กับผู้เผยแพร่โฆษณาหลัก
ดูกล่องวานิชที่มีเนื้อหาโชว์ของ Rachel Andrew สำหรับรายละเอียดเพิ่มเติมและตัวอย่างอื่นๆ
และอีกมากมาย
นี่เป็นเพียงการเปลี่ยนแปลงเล็กๆ น้อยๆ ใน Chrome 65 สำหรับนักพัฒนาซอฟต์แวร์ ซึ่งแน่นอนว่ายังมีสิ่งต่างๆ อีกมาก
- ไวยากรณ์สำหรับการระบุ
HSL
และHSLA
และพิกัดRGB
และRGBA
สำหรับพร็อพเพอร์ตี้สีตรงกับข้อมูลจำเพาะของสี CSS 4 แล้ว - มีนโยบายฟีเจอร์ใหม่ที่ให้คุณควบคุม XHR แบบซิงโครนัสผ่านส่วนหัว HTTP หรือแอตทริบิวต์ iframe
allow
ได้
อย่าลืมดูใหม่ใน Chrome DevTools เพื่อดูว่ามีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 65 และหากสนใจ Progressive Web App ลองดูซีรีส์วิดีโอใหม่สำหรับ PWA Roadshow จากนั้นคลิกปุ่มติดตามบนช่อง YouTube ของเรา และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ผมชื่อ Pete LePage และทันทีที่ Chrome 66 เปิดตัว เราจะบอกว่า มีอะไรใหม่ใน Chrome