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

สไตล์ที่นำกลับมาใช้ใหม่ได้อย่างราบรื่น

สไตล์ชีตที่สร้างได้เป็นวิธีสร้างและเผยแพร่สไตล์ที่ใช้ซ้ำได้เมื่อใช้ Shadow DOM

การรองรับเบราว์เซอร์

  • Chrome: 73
  • Edge: 79
  • Firefox: 101.
  • Safari: 16.4

แหล่งที่มา

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

แผนภาพแสดงการเตรียมและการใช้ CSS

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

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

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

แทนที่จะเปิดตัว API ใหม่เพื่อดำเนินการนี้ ข้อกำหนด Constructable StyleSheets ช่วยให้สร้างสไตล์ชีตแบบบังคับได้ด้วยการเรียกใช้คอนสตรัคเตอร์ CSSStyleSheet() ออบเจ็กต์ CSSStyleSheet ที่ได้จะมีเมธอดใหม่ 2 เมธอดที่ช่วยให้คุณเพิ่มและอัปเดตกฎสไตล์ชีตได้อย่างปลอดภัยยิ่งขึ้นโดยไม่ทริกเกอร์การกะพริบของเนื้อหาที่ไม่มีการจัดรูปแบบ (FOUC) ทั้ง 2 วิธีการจะแทนที่สไตล์ชีตด้วยสตริง CSS และ replace() จะแสดงผล Promisereplace()replaceSync() ในทั้ง 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 ที่ StyleSheet แบบสร้างได้นำเสนอคือพร็อพเพอร์ตี้ adoptedStyleSheets ที่มีอยู่ในรูทเงาและเอกสาร วิธีนี้ช่วยให้เรานำรูปแบบที่ CSSStyleSheet กำหนดไปใช้กับซับทรี DOM ที่ระบุได้อย่างชัดเจน โดยตั้งค่าพร็อพเพอร์ตี้เป็นอาร์เรย์ของสไตลชีตอย่างน้อย 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);

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

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

ดูการสาธิต

ในอนาคต

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

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