ใหม่ใน Chrome 62

Pete LePage

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

และ Pete LePage จะเป็นผู้ดูแลคุณในวันนี้ มาดูกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 62

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

ตัวบ่งชี้คุณภาพเครือข่าย

Network Information API มีให้บริการใน Chrome มาระยะหนึ่งแล้ว แต่จะให้เฉพาะความเร็วเครือข่ายตามทฤษฎีโดยอิงตามการเชื่อมต่อของผู้ใช้ สมมติว่าคุณกำลังใช้ Wi-Fi แต่เชื่อมต่อกับ ฮอตสปอตเครือข่ายมือถือที่มีความเร็ว 2G เท่านั้น API จะรายงาน Wi-Fi

console.log(navigator.connection.type);
> wifi

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

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

console.log(navigator.connection.effectiveType);
> 4G

สัญญาณเหล่านี้จะพร้อมใช้งานเป็นส่วนหัวคำขอ HTTP และเปิดใช้ผ่านคำแนะนำไคลเอ็นต์ด้วย โปรดดูตัวอย่างและข้อกำหนดเฉพาะเพื่อดูข้อมูลเชิงลึกเพิ่มเติม

แบบอักษร OpenType ที่ปรับแต่งได้

โดยทั่วไปแล้ว แบบอักษร 1 ตัวจะมีชุดแบบอักษรเพียงชุดเดียว เช่น น้ำหนักแบบอักษรหรือแบบยืดแบบเดียว หากเป็นตัวอักษรปกติ ตัวหนา และตัวเอียง คุณจะต้องใส่แบบอักษรแยกกัน 3 แบบ ทำให้หน้าเว็บมีน้ำหนักมากขึ้น

แบบอักษร OpenType ที่เปลี่ยนแปลงได้เทียบเท่ากับแบบอักษรเดี่ยวหลายแบบที่สามารถบรรจุไว้ในไฟล์แบบอักษรไฟล์เดียวได้อย่างกะทัดรัด การปรับพร็อพเพอร์ตี้ CSS จะทำให้คุณปรับการยืด สไตล์ น้ำหนัก และอื่นๆ ได้อย่างง่ายดาย ซึ่งจะทำให้เกิดรูปแบบที่หลากหลายไม่รู้จบfont-variation-settings ตอนนี้คุณรวมแบบอักษร 3 รายการดังกล่าวเป็นไฟล์เดียวที่กะทัดรัดได้แล้ว

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

แบบอักษรแบบผันแปร OpenType เป็นเครื่องมือใหม่ที่มีประสิทธิภาพในการสร้างแบบอักษรที่ปรับเปลี่ยนตามอุปกรณ์และลดขนาดหน้าเว็บ ดูรายละเอียดเพิ่มเติมได้ที่ขอแนะนำแบบอักษร OpenType Variable โดย John Hudson

การจับภาพสื่อจากองค์ประกอบ DOM

ตอนนี้คุณสามารถจับภาพสดเนื้อหาลงใน MediaStream จาก HTMLMediaElements ได้โดยตรง เช่น เสียงและวิดีโอ โดยใช้ Media Capture from DOM Elements API

หลังจากเรียกใช้ captureStream() ในองค์ประกอบสื่อ HTML แล้ว คุณจะดัดแปลง ประมวลผล ส่งจากระยะไกล หรือบันทึกเนื้อหาที่สตรีมได้ ลองจินตนาการถึงการใช้เสียงบนเว็บเพื่อสร้างอีควอไลเซอร์หรือ Vocoder ของคุณเอง หรือสตรีมเนื้อหาไปยังเว็บไซต์ระยะไกลโดยใช้ WebRTC โอกาสในการสร้างสรรค์นั้นแทบจะไร้ขีดจำกัด

ป้ายกำกับ "ไม่ปลอดภัย" สำหรับหน้า HTTP บางหน้า

ตามที่ประกาศไว้ก่อนหน้านี้ ตั้งแต่ Chrome 62 เป็นต้นไป เมื่อผู้ใช้ป้อนข้อมูลในหน้า HTTP Chrome จะทำเครื่องหมายหน้าดังกล่าวว่า "ไม่ปลอดภัย" พร้อมป้ายกำกับในแถบที่อยู่ ป้ายกำกับนี้จะแสดงในโหมดไม่ระบุตัวตนสำหรับหน้า HTTP ทั้งหมดด้วย

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

การเปลี่ยนแปลงเหล่านี้เป็นเพียงส่วนหนึ่งของการเปลี่ยนแปลงใน Chrome 62 สําหรับนักพัฒนาซอฟต์แวร์เท่านั้น ยังมีการเปลี่ยนแปลงอีกมากมาย

จากนั้นติดตามช่อง YouTube แล้วคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่

ผมชื่อ Pete LePage และทันทีที่ Chrome 63 เปิดตัว เราจะมาบอกคุณถึงสิ่งใหม่ๆ ใน Chrome