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

พีต เลอเพจ

ใน Chrome 71 เราได้เพิ่มการสนับสนุนสำหรับ

นอกจากนี้ยังมีอีกมากมาย

ฉันชื่อ Pete LePage มาเจาะลึกกันเลยว่า มีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 71!

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

ซึ่งจะกล่าวถึงไฮไลต์ที่สำคัญเพียงบางส่วนเท่านั้น โปรดดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 71 ที่ลิงก์ด้านล่าง

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

ตั้งแต่ Chrome 71 เป็นต้นไป ตอนนี้ 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);
}

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

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

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

วิดีโอการประชุม DevSummit ของ Chrome

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

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

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

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

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

ติดตาม

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

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