ฟีเจอร์ใหม่ใน 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 มอบคำค้นหาสื่อ prefers-reduced-motion ซึ่งเป็นส่วนหนึ่งของข้อกำหนดของคิวรี่สื่อระดับ 5 ที่ช่วยให้คุณตรวจจับได้เมื่อเปิดตัวเลือกนี้


@media (prefers-reduced-motion: reduce)

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

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

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

ลองดูบทความของทอม 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 จะมีขึ้นในอีก 2-3 สัปดาห์ (7-9 พฤษภาคม) และเราจะมีเนื้อหาดีๆ มากมายให้คุณ หากคุณเข้าร่วมไม่ได้ ทุกเซสชันจะได้รับการสตรีมแบบสดและจะพร้อมให้รับชมในช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome หลังจากนั้น

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

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

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