สไตล์ชีตที่สร้างได้

รูปแบบที่นำกลับมาใช้ใหม่ได้อย่างราบรื่น

Jason Miller

Constructable Stylesheets เป็น วิธีสร้างและเผยแพร่รูปแบบที่นำกลับมาใช้ใหม่ได้เมื่อใช้ Shadow DOM

คุณสร้างสไตล์ชีตโดยใช้ JavaScript ได้เสมอ อย่างไรก็ตาม กระบวนการที่ผ่านมาคือการสร้างองค์ประกอบ <style> โดยใช้ document.createElement('style') แล้วเข้าถึงพร็อพเพอร์ตี้ชีตเพื่อรับ ข้อมูลอ้างอิงไปยัง CSSStyleSheet ที่อยู่เบื้องหลัง วิธีนี้อาจสร้างโค้ด CSS ที่ซ้ำกันและทำให้โค้ดมีขนาดใหญ่ขึ้น และการแนบโค้ดจะทำให้เกิด Flash of Unstyled Content (FOUC) ไม่ว่าโค้ดจะมีขนาดใหญ่ขึ้นหรือไม่ก็ตาม อินเทอร์เฟซ CSSStyleSheet เป็นรากของคอลเล็กชันอินเทอร์เฟซการแสดง CSS ที่เรียกว่า CSSOM, ซึ่งมีวิธีแบบเป็นโปรแกรมในการจัดการสไตล์ชีต รวมถึงช่วยแก้ปัญหาที่เกี่ยวข้องกับ วิธีเก่า

Constructable Stylesheets ช่วยให้คุณกำหนดและเตรียมรูปแบบ CSS ที่แชร์ไว้ แล้วใช้รูปแบบเหล่านั้นกับ Shadow Root หรือเอกสารหลายรายการได้อย่างง่ายดายและไม่ซ้ำกัน ระบบจะใช้การอัปเดตกับ CSSStyleSheet ที่แชร์กับ รากทั้งหมดที่นำไปใช้ และ การนำสไตล์ชีตไปใช้ จะรวดเร็วและซิงโครนัสเมื่อโหลดชีตแล้ว

การตั้งค่าการเชื่อมโยงโดย Constructable Stylesheets เหมาะสำหรับการใช้งานที่หลากหลาย คุณสามารถใช้การเชื่อมโยงนี้เพื่อมอบธีมส่วนกลางที่คอมโพเนนต์จำนวนมากใช้ โดยธีมอาจเป็นอินสแตนซ์ CSSStyleSheet ที่ส่งผ่านไปยังคอมโพเนนต์ และการอัปเดตธีมจะเผยแพร่ไปยังคอมโพเนนต์โดยอัตโนมัติ คุณสามารถใช้การเชื่อมโยงนี้เพื่อเผยแพร่ค่าพร็อพเพอร์ตี้ที่กำหนดเองของ CSS ไปยัง DOM Subtree ที่เฉพาะเจาะจงโดยไม่ต้องอาศัย Cascade หรือใช้เป็นอินเทอร์เฟซโดยตรงกับตัวแยกวิเคราะห์ CSS ของเบราว์เซอร์ ซึ่งจะช่วยให้โหลดสไตล์ชีตล่วงหน้าได้ง่ายโดยไม่ต้องแทรกลงใน DOM

การสร้างสไตล์ชีต

ข้อกำหนด Constructable StyleSheets ช่วยให้คุณสร้างสไตล์ชีตแบบบังคับได้โดยเรียกใช้ตัวสร้าง CSSStyleSheet() แทนที่จะแนะนำ API ใหม่เพื่อทำสิ่งนี้ ออบเจ็กต์ CSSStyleSheet ที่ได้จะมี 2 วิธีใหม่ที่ช่วยให้เพิ่มและอัปเดตกฎสไตล์ชีตได้อย่างปลอดภัยมากขึ้นโดยไม่ ทำให้เกิด Flash of Unstyled Content (FOUC) ทั้งวิธี replace() และ replaceSync() จะแทนที่สไตล์ชีตด้วยสตริง CSS และ replace() จะแสดงผล Promise ทั้ง 2 กรณีนี้ไม่รองรับข้อมูลอ้างอิงสไตล์ชีตภายนอก ระบบจะละเว้นกฎ @import และแสดงคำเตือน

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// replace all styles:
sheet.replace('a { color: blue; }')
  .then(() => {
    console.log('Styles replaced');
  })
  .catch(err => {
    console.error('Failed to replace styles:', err);
  });

// Any @import rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('@import url("styles.css"); a { color: red; }');
sheet.replace('@import url("styles.css"); a { color: red; }');
// Console warning: "@import rules are not allowed here..."

การใช้สไตล์ชีตที่สร้างขึ้น

ฟีเจอร์ใหม่ที่ 2 ที่ Constructable StyleSheets นำมาใช้คือ adoptedStyleSheets ที่พร้อมใช้งานใน Shadow Root และ เอกสาร ซึ่งช่วยให้เราใช้รูปแบบที่กำหนดโดย CSSStyleSheet กับ DOM Subtree ที่ระบุได้อย่างชัดเจน หากต้องการทำเช่นนั้น ให้ตั้งค่าพร็อพเพอร์ตี้เป็นอาร์เรย์ของสไตล์ชีตอย่างน้อย 1 รายการที่จะใช้กับองค์ประกอบนั้น

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');

// Apply the stylesheet to a document:
document.adoptedStyleSheets.push(sheet);

// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);

สรุปข้อมูลทั้งหมด

Constructable StyleSheets ช่วยให้นักพัฒนาเว็บมีโซลูชันที่ชัดเจนสำหรับการสร้าง CSS StyleSheets และใช้กับ DOM Tree เรามี API ใหม่ที่อิงตาม Promise สำหรับการโหลด StyleSheets จากสตริงของแหล่งที่มา CSS ซึ่งใช้ตัวแยกวิเคราะห์ในตัวของเบราว์เซอร์และความหมายในการโหลด และสุดท้าย เรามีกลไกสำหรับใช้การอัปเดตสไตล์ชีตกับการใช้งานทั้งหมดของ StyleSheet ซึ่งช่วยลดความซับซ้อนของสิ่งต่างๆ เช่น การเปลี่ยนแปลงธีมและการกำหนดสี

ดูเดโม

ในอนาคต

Constructable Stylesheets เวอร์ชันเริ่มต้นมาพร้อมกับ API ที่อธิบายไว้ที่นี่ แต่เรากำลังดำเนินการเพื่อให้ใช้งานได้ง่ายขึ้น เรามี ข้อเสนอให้ขยาย adoptedStyleSheets FrozenArray ด้วยวิธีเฉพาะสำหรับการแทรกและ นำสไตล์ชีตออก ซึ่งจะช่วยลดความจำเป็นในการโคลนอาร์เรย์และหลีกเลี่ยง ข้อมูลอ้างอิงสไตล์ชีตที่ซ้ำกัน

ข้อมูลเพิ่มเติม

• สถานะแพลตฟอร์ม Chrome
• ตัวอย่าง
• API
• วิดีโออธิบาย
• ความตั้งใจที่จะติดตั้งใช้งาน
• ความตั้งใจที่จะเปิดตัว
• Discourse