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

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

Jason Miller

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

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

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

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

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

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

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

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

ดูการสาธิต

มองไปข้างหน้า

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

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

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