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

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

Jason Miller

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

Browser Support

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

Source

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

แผนภาพแสดงขั้นตอนตั้งแต่ CSS ที่เขียนขึ้นไปจนถึงการสร้างอินสแตนซ์และการใช้งาน

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

การเชื่อมโยงที่ตั้งค่าโดยสไตล์ชีตที่สร้างได้นั้นเหมาะกับแอปพลิเคชันต่างๆ มากมาย โดยสามารถใช้เพื่อจัดเตรียมธีมแบบรวมศูนย์ที่คอมโพเนนต์จำนวนมากใช้ ซึ่งธีมอาจเป็นอินสแตนซ์ CSSStyleSheet ที่ส่งไปยังคอมโพเนนต์ โดยการอัปเดตธีมจะเผยแพร่ไปยังคอมโพเนนต์โดยอัตโนมัติ ซึ่งสามารถใช้เพื่อกระจายค่าพร็อพเพอร์ตี้ที่กำหนดเองของ CSS ไปยังซับทรี DOM ที่เฉพาะเจาะจงโดยไม่ต้องอาศัยการเรียงซ้อน นอกจากนี้ยังใช้เป็นอินเทอร์เฟซโดยตรงกับโปรแกรมแยกวิเคราะห์ 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 Roots และ Documents ซึ่งช่วยให้เราใช้สไตล์ที่กำหนดโดย 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);

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

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

ดูการสาธิต

ในอนาคต

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

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