ใหม่ใน Chrome 90

Pete LePage

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

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

ผมชื่อ Pete LePage และพร้อมให้ข้อมูลแก่นักพัฒนาซอฟต์แวร์ใน Chrome 90 แบบย้อนยุคปี 1990

ป้องกันไม่ให้ข้อมูลล้นด้วย overflow: clip

CSS ยอดเยี่ยม

เหนือฟ้ายังมีฟ้า และเหนือฟ้าก็มีเธอ! แต่เราคิดว่านักพัฒนาเว็บทุกคนเคยเห็นและพบเจอกับสิ่งที่แสดงผลเกินขอบเขตในบางครั้ง มีโพสต์ที่ยอดเยี่ยมใน CSS Tricks เกี่ยวกับวิธีต่างๆ ในการจัดการการเลื่อนออก เช่น การใช้ 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 ก็มีการเปลี่ยนชื่อด้วย ในขณะเดียวกัน ชุมชนก็เลือกใช้ไวยากรณ์ใหม่โดยอิงตาม Structured Data สำหรับ HTTP

Chrome 90 ขึ้นไป

Permissions-Policy: geolocation=()

Chrome เวอร์ชัน 89 ลงมา

Feature-Policy: geolocation 'none'

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

Shadow DOM แบบประกาศ

Shadow DOM ซึ่งเป็นส่วนหนึ่งของมาตรฐาน Web Components มีวิธีกำหนดขอบเขตรูปแบบ CSS ให้กับ DOM ย่อยที่เฉพาะเจาะจงและแยก 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;

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

รูทเงาประกาศ ( Declarative Shadow Root) เป็นองค์ประกอบ <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>

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

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

และอื่นๆ

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

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

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

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

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

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

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

ผมชื่อ Pete LePage และพร้อมที่จะมาบอกคุณถึงสิ่งใหม่ๆ ใน Chrome ทันทีที่ Chrome 91 เปิดตัว

การกล่าวขอบคุณเป็นพิเศษ

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

GDS Design

  • Fola Akinola
  • Derek Bass
  • คริสโตเฟอร์ โบเดล
  • Nick Krusick
  • Chris Walker

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

  • Bryan Gordon

และ Loren Borja, Lee Carruthers และ Lukas Holcek ที่ช่วยสร้างวิดีโอ "มีอะไรใหม่ใน Chrome" ทั้งหมดและทำให้ฉันดูดีกว่าที่เป็นจริงมาก ขอขอบคุณ