ฟีเจอร์ใหม่ใน Chrome 71

Pete LePage

ใน Chrome 71 เราได้เพิ่มการรองรับสิ่งต่อไปนี้

• ตอนนี้การแสดงเวลาแบบสัมพัทธ์เป็นส่วนหนึ่งของ Intl API แล้ว
• ระบุด้านใดของข้อความที่ควรมีเส้นใต้สำหรับข้อความที่ไหลในแนวตั้ง
• กำหนดให้ต้องเปิดใช้งานผู้ใช้ก่อนใช้ Speech Synthesis API

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

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

บันทึกการเปลี่ยนแปลง

ข้อมูลนี้เป็นเพียงไฮไลต์สำคัญบางส่วนเท่านั้น ดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 71 ได้ที่ลิงก์ด้านล่าง

• รายการการเปลี่ยนแปลงที่เก็บข้อมูลซอร์สโค้ด Chromium
• การอัปเดต ChromeStatus.com สำหรับ Chrome 71
• การเลิกใช้งานและการนำออกใน Chrome 71

แสดงเวลาแบบสัมพัทธ์ด้วย Intl.RelativeTimeFormat()

Twitter แสดงเวลาแบบสัมพัทธ์สำหรับโพสต์ล่าสุด

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

การแสดงเวลาแบบสัมพัทธ์กลายเป็นเรื่องปกติไปแล้ว ไลบรารีวันที่/เวลาทั่วไปส่วนใหญ่จึงมีฟังก์ชันที่แปลแล้วเพื่อจัดการเรื่องนี้ให้เรา ความจริงแล้ว เกือบทุกเว็บแอปที่เราสร้าง Moment JS เป็นหนึ่งในไลบรารีแรกๆ ที่เราเพิ่มเพื่อวัตถุประสงค์นี้โดยเฉพาะ

Chrome 71 เปิดตัว Intl.RelativeTimeFormat() ซึ่งจะเปลี่ยนการทำงานไปยังเครื่องมือ JavaScript และเปิดใช้การจัดรูปแบบเวลาแบบสัมพัทธ์ที่แปลแล้ว ซึ่งช่วยเพิ่มประสิทธิภาพได้เล็กน้อย และหมายความว่าเราต้องใช้ไลบรารีเหล่านั้นเป็น polyfill เฉพาะในกรณีที่เบราว์เซอร์ยังไม่รองรับ API ใหม่เท่านั้น

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

การใช้งานนั้นง่ายมาก เพียงสร้างอินสแตนซ์ใหม่และระบุภาษา แล้วเรียกใช้ format พร้อมเวลาแบบสัมพัทธ์ อ่านรายละเอียดทั้งหมดได้ในโพสต์Intl.RelativeTimeFormat APIของ Mathias

การระบุตำแหน่งเส้นใต้สำหรับข้อความแนวตั้ง

ข้อความแนวตั้งที่มีการขีดเส้นใต้ไม่สอดคล้องกัน

เมื่อข้อความจีนหรือญี่ปุ่นแสดงในแนวตั้ง เบราว์เซอร์จะวางขีดล่างไม่ตรงกัน โดยอาจวางไว้ทางซ้ายหรือขวา

ใน Chrome 71 ตอนนี้คุณสมบัติ text-underline-position ยอมรับ left หรือ right เป็นส่วนหนึ่งของข้อกำหนดเฉพาะการตกแต่งข้อความ CSS3 แล้ว ข้อกำหนดเฉพาะการตกแต่งข้อความ CSS3 เพิ่มคุณสมบัติใหม่หลายรายการที่อนุญาตให้ระบุสิ่งต่างๆ เช่น ประเภทเส้นที่จะใช้ สไตล์ สี และตำแหน่ง

.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

การสังเคราะห์เสียงต้องเปิดใช้งานโดยผู้ใช้

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

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

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

หมายเหตุ: เราขอแนะนำให้รวมการเรียกใช้การสังเคราะห์เสียงไว้ในบล็อก try/catch เพื่อให้แน่ใจว่าโค้ดจะทำงานได้ แม้ว่าหน้าเว็บจะไม่เปิดใช้งานก็ตาม การดำเนินการนี้จะไม่ทำให้แอปส่วนที่เหลือใช้งานไม่ได้

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

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

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

• ตอนนี้คุณปรับแต่งElement.requestFullscreen()ใน Android ได้ และเลือกได้ว่าจะแสดงแถบนําทางหรือใช้โหมดที่สมจริงโดยสมบูรณ์ซึ่งจะไม่แสดงตัวควบคุม User Agent จนกว่าผู้ใช้จะแสดงท่าทางสัมผัส
• โหมดข้อมูลเข้าสู่ระบบเริ่มต้นสำหรับคําขอสคริปต์ของข้อบังคับได้เปลี่ยนจาก omit เป็น same-origin
• และเพื่อให้ Chrome สอดคล้องกับข้อกำหนด Shadow DOM v1 ตอนนี้ Chrome 71 จะคำนวณความเฉพาะเจาะจงของคลาสจำลอง :host() และ :host-context() รวมถึงอาร์กิวเมนต์ของ ::slotted()

วิดีโอจาก Chrome DevSummit

หากไม่ได้เข้าร่วม Chrome Dev Summit หรือเข้าร่วมแล้วแต่พลาดการบรรยายบางรายการ โปรดดูเพลย์ลิสต์ Chrome Dev Summit 2018 ในช่อง YouTube ของเรา

Eva และ Phil ได้อธิบายเทคนิคเจ๋งๆ ในการใช้ Service Worker ในหัวข้อการสร้างแอปที่เร็วขึ้นและมีความยืดหยุ่นมากขึ้นด้วย Service Worker

Mariko และ Jake ได้พูดคุยเกี่ยวกับวิธีสร้าง Squoosh ในหัวข้อเว็บแอปที่ซับซ้อนซึ่งมี JS จำนวนมาก หลีกเลี่ยงความช้า

Katie และ Houssein ได้พูดถึงเทคนิคที่ยอดเยี่ยมในการเพิ่มประสิทธิภาพเว็บไซต์ให้สูงสุดในข้อมูลเบื้องต้นเกี่ยวกับความเร็ว: เทคนิคสําคัญสําหรับเว็บไซต์ที่รวดเร็ว

Jake ทำเค้กตก และยังมีวิดีโอดีๆ อีกมากมายในเพลย์ลิสต์ Chrome DevSummit 2018 อย่าลืมไปดู

สมัครใช้บริการ

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

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