การใช้สคริปต์โมดูล CSS เพื่อนำเข้าสไตล์ชีต

ดูวิธีใช้สคริปต์โมดูล CSS เพื่อนำเข้าสไตล์ชีต CSS โดยใช้ไวยากรณ์เดียวกับโมดูล JavaScript

Dan Clark

เมื่อใช้ฟีเจอร์สคริปต์โมดูล CSS ใหม่ คุณจะโหลดสไตล์ชีต CSS ด้วยคำสั่ง import ได้เช่นเดียวกับโมดูล JavaScript จากนั้นจะใช้สไตล์ชีตกับเอกสารหรือรูทเงาในลักษณะเดียวกับสไตล์ชีตที่สร้างได้ วิธีนี้อาจสะดวกและมีประสิทธิภาพมากกว่าการนําเข้าและใช้ CSS ด้วยวิธีอื่นๆ

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

สคริปต์โมดูล CSS พร้อมใช้งานโดยค่าเริ่มต้นใน Chrome และ Edge เวอร์ชัน 93

ยังไม่รองรับใน Firefox และ Safari คุณติดตามความคืบหน้าในการใช้งานได้ที่ข้อบกพร่องของ Gecko และ ข้อบกพร่อง WebKit ตามลำดับ

ข้อกำหนดเบื้องต้น

• ทำความคุ้นเคยกับโมดูล JavaScript
• คุ้นเคยกับสไตล์ชีตที่สร้างได้

การใช้สคริปต์โมดูล CSS

นําเข้าสคริปต์โมดูล CSS และใช้กับเอกสารหรือรูทเงา ดังนี้

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

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

คุณไม่จำเป็นต้องสร้างองค์ประกอบ <style> หรือยุ่งเหยิงสตริง JavaScript ของข้อความ CSS ซึ่งต่างจากวิธีอื่นๆ ในการใช้ CSS จาก JavaScript

โมดูล CSS ยังมีข้อดีบางอย่างเหมือนกับโมดูล JavaScript ด้วย

• การกรองข้อมูลที่ซ้ำกันออก: หากนําเข้าไฟล์ CSS เดียวกันจากหลายตําแหน่งในแอปพลิเคชัน ระบบจะยังคงดึงข้อมูล สร้างอินสแตนซ์ และแยกวิเคราะห์ไฟล์เพียงครั้งเดียว
• ลําดับการประเมินที่สอดคล้องกัน: เมื่อ JavaScript เพื่อนําเข้าทํางานอยู่ ก็สามารถอาศัยสไตลชีตที่นําเข้าซึ่งดึงข้อมูลและแยกวิเคราะห์แล้ว
• ความปลอดภัย: ระบบจะดึงข้อมูลโมดูลด้วย CORS และตรวจสอบประเภท MIME อย่างเข้มงวด

นําเข้าการยืนยัน (What's with the 'assert'?)

ส่วน assert { type: 'css' } ของคำสั่ง import คือการนําเข้า การกล่าวอ้าง จำเป็นต้องระบุค่านี้ หากไม่ระบุ ระบบจะถือว่า import เป็นการนําเข้าโมดูล JavaScript ปกติ และการดำเนินการจะล้มเหลวหากไฟล์ที่นําเข้ามีประเภท MIME ที่ไม่ใช่ JavaScript

import sheet from './styles.css'; // Failed to load module script:
                                  // Expected a JavaScript module
                                  // script but the server responded
                                  // with a MIME type of "text/css".

สไตล์ชีตที่นำเข้าแบบไดนามิก

นอกจากนี้ คุณยังนําเข้าโมดูล CSS โดยใช้การนําเข้าแบบไดนามิกได้ด้วย โดยพารามิเตอร์ที่ 2 ใหม่สําหรับการยืนยันการนําเข้า type: 'css' มีดังนี้

const cssModule = await import('./style.css', {
  assert: { type: 'css' }
});
document.adoptedStyleSheets = [cssModule.default];

โปรดทราบว่าระบบจะเพิ่ม cssModule.default (ไม่ใช่ cssModule เอง) ลงใน adoptedStyleSheets เนื่องจากออบเจ็กต์ที่แสดงผลจาก import() แบบไดนามิกคือออบเจ็กต์เนมสเปซของโมดูล CSSStyleSheet เป็นการส่งออกเริ่มต้นของโมดูล จึงเข้าถึงได้ที่ cssModule.default

กฎ @import ยังไม่ได้รับอนุญาต

ปัจจุบันกฎ @import ของ CSS ไม่ทำงานในสไตล์ชีตที่สร้างได้ ซึ่งรวมถึงสคริปต์โมดูล CSS หากมีกฎ @import ในสไตล์ชีตที่สร้างได้ ระบบจะไม่สนใจกฎเหล่านั้น

/* atImported.css */
div {
    background-color: blue;
}

/* styles.css */
@import url('./atImported.css'); /* Ignored in CSS module */
div {
    border: 1em solid green;
}

<!-- index.html -->
<script type="module">
    import styles from './styles.css' assert { type: "css" };
    document.adoptedStyleSheets = [styles];
</script>
<div>This div will have a green border but no background color.</div>

อาจเพิ่มการรองรับ @import ในสคริปต์ของโมดูล CSS ในข้อกำหนด ติดตามการพูดคุยเกี่ยวกับข้อกำหนดนี้ได้ในปัญหา GitHub