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

ใน 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! หรืออาจไม่ต้องแสดงหากผู้ใช้ต้องการ-reduced-motion ดูรายละเอียดเพิ่มเติม

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

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

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

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

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

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

นโยบายฟีเจอร์ช่วยให้คุณเลือกเปิดใช้ ปิดใช้ และแก้ไขลักษณะการทํางานของ API และฟีเจอร์อื่นๆ ของเว็บได้ ซึ่งทำได้ผ่านส่วนหัว Feature-Policy หรือผ่านแอตทริบิวต์ allow ใน 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