เรียนรู้วิธีใช้สคริปต์โมดูล 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