ใหม่ใน Chrome 90

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

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

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

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

CSS IS AWESOME

เหนือฟ้ายังมีฟ้า และเหนือฟ้าก็มีเธอ! แต่เราคิดว่านักพัฒนาเว็บทุกคนเคยเห็นและพบเจอกับสิ่งที่แสดงผลเกินขอบเขตในบางครั้ง มีโพสต์ที่ยอดเยี่ยมใน 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/

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

เราได้เปิดตัว Feature Policy API ใน Chrome เวอร์ชัน 74 ซึ่งช่วยให้คุณเลือกเปิดใช้ ปิดใช้ และแก้ไขลักษณะการทำงานของ 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 เป็นต้นไป คุณจะใช้ 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 เพื่อสร้างทั้งต้นไม้ ซึ่งรวมถึงรูทเงา

ดูรายละเอียดเพิ่มเติมได้ที่ Declarative 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
  • Christopher Bodel
  • Nick Krusick
  • Chris Walker

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

  • Bryan Gordon

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