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

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

แดน คลาร์ก

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

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

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

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

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

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

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

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

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

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

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

โมดูล 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];

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