ใหม่ใน Chrome 90

Pete LePage

สิ่งที่จำเป็นต้องทราบมีดังนี้

  • มีค่าใหม่สำหรับพร็อพเพอร์ตี้ CSS overflow
  • เราได้เปลี่ยนชื่อ Feature Policy API เป็น Permissions Policy แล้ว
  • นอกจากนี้ยังมีวิธีใหม่ในการติดตั้งและใช้ Shadow DOM ใน HTML โดยตรง
  • ผมเป็นเจ้าของเสื้อแจ็กเก็ตหลายตัวที่แทบจะเหมือนกับยุค 1990 นี้เลย
  • และยังมีอื่นๆ อีกมากมาย

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

ป้องกันการดำเนินการเพิ่มเติมด้วย overflow: clip

CSS ยอดเยี่ยม

และ CSS ก็สำคัญไม่แพ้กัน แต่ผมคิดว่านักพัฒนาเว็บทุกคนเคยเห็น และพบเจอกับอะไรที่ล้ามากๆ มาแล้ว มีโพสต์ที่ยอดเยี่ยมเกี่ยวกับกลเม็ด CSS เกี่ยวกับวิธีต่างๆ ในการจัดการกับรายการเพิ่มเติม เช่น การใช้ overflow: hidden หรือ auto

ในข้อมูลจำเพาะของ CSS Overflow จะมีพร็อพเพอร์ตี้ clip ใหม่ที่ทำงานคล้ายกับ hidden

.overflow-clip {
  overflow: clip;
}
กล่องสี่เหลี่ยมพร้อมข้อความ CSS นั้นเยี่ยมไปเลย

การใช้ overflow: clip ช่วยให้คุณป้องกันไม่ให้มีการเลื่อนช่องประเภทใดก็ตาม ซึ่งรวมถึงการเลื่อนแบบเป็นโปรแกรม ซึ่งหมายความว่าช่องดังกล่าวไม่ถือเป็นคอนเทนเนอร์การเลื่อน และจะไม่เริ่มบริบทการจัดรูปแบบใหม่ คุณจะใช้การตัดกับแกนเดียวผ่าน overflow-x และ overflow-y ได้หากต้องการ

ขอแจ้งให้ทราบว่า นอกจากนี้ยังมี overflow-clip-margin ที่ช่วยให้คุณขยายขอบคลิปได้ด้วย ซึ่งจะเป็นประโยชน์ในกรณีที่มีหมึกล้นที่ควรจะมองเห็นได้

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
กล่องสี่เหลี่ยมพร้อมข้อความ CSS นั้นเยี่ยมไปเลย

ดูการใช้งานจริงของ overflow: clip ได้ที่ https://petele-css-is-awesome.glitch.me/

นโยบายฟีเจอร์เปลี่ยนเป็นนโยบายสิทธิ์แล้ว

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

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

ตั้งแต่ Chrome 90 เป็นต้นไป Feature Policy API จะเปลี่ยนชื่อเป็น นโยบายสิทธิ์ และส่วนหัว HTTP ก็จะเปลี่ยนชื่อตามไปด้วย ในขณะเดียวกัน ชุมชนก็ได้กำหนดไวยากรณ์ใหม่ตามค่าช่องที่มีโครงสร้างสำหรับ HTTP

Chrome 90 ขึ้นไป

Permissions-Policy: geolocation=()

Chrome 89 และรุ่นก่อนหน้า

Feature-Policy: geolocation 'none'

หากสนใจวิธีใช้นโยบายนี้ในเว็บไซต์ โปรดดูข้อมูลเบื้องต้นเกี่ยวกับนโยบายฟีเจอร์

Shadow DOM แบบประกาศ

Shadow DOM ซึ่งเป็นส่วนหนึ่งของมาตรฐานคอมโพเนนต์เว็บช่วยมอบวิธีกำหนดขอบเขตสไตล์ CSS ไปยังแผนผังย่อย DOM หนึ่งๆ และแยกโครงสร้างย่อยนั้นออกจากส่วนที่เหลือของเอกสาร จนถึงปัจจุบันนี้ วิธีเดียวในการใช้ Shadow DOM คือการสร้างรากเงาโดยใช้ JavaScript

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

วิธีนี้ใช้ได้ดีสำหรับการแสดงผลฝั่งไคลเอ็นต์ แต่การแสดงผลฝั่งเซิร์ฟเวอร์ทำได้ไม่ดีนัก โดยไม่มีการสร้าง Shadow Roots ใน HTML ที่เซิร์ฟเวอร์สร้างขึ้น แต่ ตั้งแต่ Chrome 90 เป็นต้นไป ด้วย Declarative Shadow DOM คุณสามารถใช้งานได้แล้ว คุณสามารถสร้างรูทเงาได้โดยใช้เพียง HTML เท่านั้น

รากแสงเงาเชิงประกาศคือองค์ประกอบ <template> ที่มีแอตทริบิวต์ shadowroot โปรแกรมแยกวิเคราะห์ HTML ตรวจพบและนำไปใช้เป็นรูทเงาขององค์ประกอบระดับบนสุดทันที

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

การโหลดผลลัพธ์มาร์กอัป HTML ที่แท้จริงในแผนผัง DOM นี้:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

วิธีนี้ช่วยให้เราได้ใช้ประโยชน์จากการห่อหุ้มข้อมูลและการฉายภาพสล็อตของ Shadow DOM ใน HTML แบบคงที่ ไม่จำเป็นต้องใช้ JavaScript เพื่อสร้างโครงสร้างทั้งต้นไม้ รวมถึง Shadow Root

ดูรายละเอียดเพิ่มเติมได้ที่ Chadow DOM ใน web.dev

และอื่นๆ

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

แถบที่อยู่ของ Chrome จะใช้ https:// โดยค่าเริ่มต้น เพื่อช่วยปรับปรุงความเป็นส่วนตัว และแม้แต่ความเร็วในการโหลดสำหรับผู้ใช้ที่เข้าชมเว็บไซต์ที่รองรับ HTTPS และหากยังไม่ได้ตั้งค่าการเปลี่ยนเส้นทางอัตโนมัติจาก HTTP ไปยัง HTTPS ตอนนี้ก็คงจะดี

และโปรแกรมเปลี่ยนไฟล์ AV1 มีการจัดส่งสินค้าใน Chrome สำหรับเดสก์ท็อปซึ่งได้รับการเพิ่มประสิทธิภาพเพื่อการประชุมทางวิดีโอที่มีการผสานรวม WebRTC โดยเฉพาะ

อ่านเพิ่มเติม

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

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

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

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

กล่าวถึงพิเศษ

ฉันสนุกมากกับการถ่ายทำตอน "ใหม่ใน Chrome" ที่มีธีมในช่วงทศวรรษที่ 1990 ขอขอบคุณ Sean Meehan อย่างยิ่งสำหรับไอเดียและความร่วมมือรวมตัวนักร้อง ผู้ยอดเยี่ยมที่ช่วยเปิดวาร์ปเวลาไปสู่ปี 1990

การออกแบบ GDS

  • โฟลา อคิโนลา
  • ดีเรคเบส
  • คริสโตเฟอร์ โบเดล
  • นิค ครูซิค
  • คริส วอล์กเกอร์

การออกแบบเสียงและเพลงเพิ่มเติม

  • ไบรอัน กอร์ดอน

แน่นอนว่า Loren Borja, Lee Carruthers และ Lukas Holcek ผู้ที่สร้างวิดีโอ ใหม่ใน Chrome ทั้งหมดของฉัน และทำให้ฉันดูดีกว่าตัวจริงมาก ขอบคุณ!