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

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

Dan Clark

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

การสนับสนุนเบราว์เซอร์

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

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

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

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

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

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

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

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

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

นอกจากนี้ โมดูล CSS ยังมีประโยชน์บางอย่างเหมือนกับโมดูล JavaScript ด้วย

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

การยืนยันการนำเข้า (เกิดอะไรขึ้นกับ "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];

ยังไม่อนุญาตให้ใช้กฎ @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