ดูวิธีใช้สคริปต์โมดูล CSS เพื่อนำเข้าสไตล์ชีต CSS โดยใช้ไวยากรณ์เดียวกับโมดูล JavaScript
เมื่อใช้ฟีเจอร์สคริปต์โมดูล 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];
กฎ @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