ฟีเจอร์ใหม่ใน 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'

วิธีการง่ายๆ คือให้สร้างอินสแตนซ์ใหม่และระบุภาษา จากนั้นใช้เพียงรูปแบบการเรียกด้วยเวลาที่เกี่ยวข้อง ดูรายละเอียดทั้งหมดได้ในโพสต์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!