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

Pete LePage

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

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

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

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

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

ช่องชั้นเรียนส่วนตัว

ช่องคลาสลดความซับซ้อนของไวยากรณ์ของชั้นเรียนโดยหลีกเลี่ยงการใช้ฟังก์ชันตัวสร้างเพียงเพื่อกำหนดพร็อพเพอร์ตี้ของอินสแตนซ์ ใน Chrome 72 เราได้เพิ่มการรองรับช่องคลาสสาธารณะ

class IncreasingCounter {
  // Public class field
  _publicValue = 0;
  get value() {
    return this._publicValue;
  }
  increment() {
    this._publicValue++;
  }
}

และเราบอกว่าช่องคลาสส่วนตัวกำลังอยู่ระหว่างดำเนินการ เรายินดีที่จะแจ้งให้ทราบว่าช่องคลาสส่วนตัวพร้อมใช้งานใน Chrome 74 แล้ว รูปแบบคำสั่งของช่องส่วนตัวใหม่จะคล้ายกับช่องสาธารณะ ยกเว้นคุณจะทําเครื่องหมายช่องว่าเป็นช่องส่วนตัวโดยใช้ # (เครื่องหมายดอลลาร์) ให้คิดว่า # เป็นส่วนหนึ่งของชื่อช่อง

class IncreasingCounter {
  // Private class field
  #privateValue = 0;
  get value() {
    return this.#privateValue;
  }
  increment() {
    this.#privateValue++;
  }
}

โปรดทราบว่าฟิลด์ private เป็นฟิลด์ส่วนตัว โดยนักเรียนจะเข้าถึงไฟล์เหล่านี้ได้ภายในชั้นเรียน แต่จะใช้ไฟล์ดังกล่าวนอกชั้นเรียนไม่ได้

class SimpleClass {
  _iAmPublic = 'shared';
  #iAmPrivate = 'secret';
  doSomething() {
    ...
  }
}

หากต้องการอ่านเพิ่มเติมเกี่ยวกับคลาสสาธารณะและคลาสส่วนตัว โปรดดูโพสต์ของ Mathias เกี่ยวกับช่องคลาส

prefers-reduced-motion

ผู้ใช้บางรายรายงานว่ารู้สึกเวียนศีรษะเมื่อดูการเลื่อนแบบพารัลแลกซ์ การซูม และเอฟเฟกต์การเคลื่อนไหวอื่นๆ ระบบปฏิบัติการหลายระบบจึงมีตัวเลือกในการลดการเคลื่อนไหวเมื่อเป็นไปได้

ตอนนี้ Chrome มี Media Query prefers-reduced-motion ซึ่งเป็นส่วนหนึ่งของข้อกำหนด Media Query ระดับ 5 ที่ช่วยให้คุณตรวจจับได้เมื่อเปิดตัวเลือกนี้


@media (prefers-reduced-motion: reduce)

สมมติว่าฉันมีปุ่มลงชื่อสมัครใช้ที่ดึงดูดความสนใจด้วยการเคลื่อนไหวเล็กน้อย การค้นหาใหม่ช่วยให้ฉันปิดการเคลื่อนไหวของปุ่มได้

button {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

ลองดูบทความของ Tom Move Ya! หรืออาจจะไม่ควรทำดังนี้หากผู้ใช้ต้องการลดการเคลื่อนไหว เพื่อดูรายละเอียดเพิ่มเติม

เหตุการณ์ transition ของ CSS

ข้อกำหนดการเปลี่ยน CSS กําหนดให้ส่งเหตุการณ์การเปลี่ยนเมื่อมีการกําหนดคิวการเปลี่ยน เริ่มต้น สิ้นสุด หรือยกเลิกการเปลี่ยน เหตุการณ์เหล่านี้ได้รับการรองรับในเบราว์เซอร์อื่นๆ มาระยะหนึ่งแล้ว

แต่ก่อนหน้านี้ Chrome ยังไม่รองรับฟีเจอร์ดังกล่าว ใน Chrome 74 ตอนนี้คุณสามารถ ฟังสิ่งต่อไปนี้ได้

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

การคอยฟังเหตุการณ์เหล่านี้ช่วยให้คุณติดตามหรือเปลี่ยนแปลงลักษณะการทํางานได้เมื่อมีการเรียกใช้การเปลี่ยน

การอัปเดต API นโยบายฟีเจอร์

นโยบายฟีเจอร์ช่วยให้คุณเลือกเปิดใช้ ปิดใช้ และแก้ไขลักษณะการทํางานของ API และฟีเจอร์อื่นๆ ของเว็บได้ ซึ่งทำผ่านส่วนหัว "นโยบายฟีเจอร์" หรือผ่านแอตทริบิวต์ "อนุญาต" ใน iframe

Feature-Policy: geolocation 'self'

<iframe ... allow="geolocation self">
</iframe>

Chrome 74 เปิดตัวชุด API ใหม่เพื่อตรวจสอบว่าเปิดใช้ฟีเจอร์ใดอยู่บ้าง

  • คุณดูรายการฟีเจอร์ที่อนุญาตได้โดยใช้ document.featurePolicy.allowedFeatures()
  • คุณสามารถตรวจสอบได้ว่าฟีเจอร์ใดได้รับอนุญาตหรือไม่ด้วย document.featurePolicy.allowsFeature(...)
  • และดูรายการโดเมนที่ใช้ในหน้าปัจจุบันซึ่งอนุญาตให้ใช้ฟีเจอร์ที่ระบุได้ด้วย document.featurePolicy.getAllowlistForFeature()

ดูรายละเอียดเพิ่มเติมได้ในโพสต์แนะนํานโยบายฟีเจอร์

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

ต่อไปนี้เป็นเพียงการเปลี่ยนแปลงเล็กๆ น้อยๆ ใน Chrome 74 สำหรับนักพัฒนาซอฟต์แวร์ ซึ่งยังมีอีกมากมาย เราเองรู้สึกตื่นเต้นมากเกี่ยวกับพื้นที่เก็บข้อมูล KV ซึ่งเป็นบริการพื้นที่เก็บข้อมูลคีย์/ค่าแบบแอซิงค์ที่รวดเร็วสุดๆ และพร้อมให้ทดลองใช้เวอร์ชันต้นทาง

Google I/O กำลังจะจัดขึ้นเร็วๆ นี้

และอย่าลืมว่า Google I/O ใกล้จะถึงแล้วในอีกไม่กี่สัปดาห์ (7-9 พฤษภาคม) และเราจะมีสิ่งใหม่ๆ เจ๋งๆ มากมายมาให้คุณ หากคุณเข้าร่วมไม่ได้ เซสชันทั้งหมดจะมีการสตรีมแบบสดและรับชมได้ในช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome หลังจากนั้น

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

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

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