Stil sayfalarını içe aktarmak için CSS Modül Komut Dosyalarını kullanma

Yeni CSS modülü betikleri özelliğiyle, CSS stil sayfalarını aşağıdakilerle yükleyebilirsiniz: import ifadeler, tıpkı JavaScript modülleri. Stil sayfaları daha sonra belgelere uygulanabilir veya gölge kökleri inşa edilebilir stil sayfaları ile aynı şekilde. Bu daha uygun olabilir ve daha performanslı CSS’yi içe aktarmanın ve uygulamanın diğer yollarından daha fazla.

Tarayıcı Desteği #

CSS modülü betikleri, Chrome ve Edge’in 93. sürümünde varsayılan olarak mevcuttur.

Firefox ve Safari’de destek henüz mevcut değil. Uygulama ilerlemesi şu adresten izlenebilir: Geko böcek Ve WebKit hatasısırasıyla.

Önkoşullar #

CSS modülü komut dosyalarını kullanma #

Bir CSS modülü komut dosyasını içe aktarın ve bunu bir belgeye veya aşağıdaki gibi bir gölge köküne uygulayın:

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

Bir CSS modülü betiğinin varsayılan dışa aktarması, içeriği içe aktarılan dosyanın içeriği olan yapılandırılabilir bir stil sayfasıdır. Diğer inşa edilebilir stil sayfaları gibi, belgelere veya gölge köklerine aşağıdakiler kullanılarak uygulanır: adoptedStyleSheets.

JavaScript’ten CSS uygulamanın diğer yollarından farklı olarak, oluşturmaya gerek yoktur. &LTstyle> öğeler veya CSS metninin JavaScript dizeleriyle karışıklık.

CSS modülleri ayrıca JavaScript modülleriyle aynı avantajlardan bazılarına sahiptir.

• Veri tekilleştirme: aynı CSS dosyası bir uygulamada birden fazla yerden içe aktarılırsa, yine de yalnızca bir kez getirilir, örneği oluşturulur ve ayrıştırılır.
• Tutarlı değerlendirme sırası: içe aktaran JavaScript çalışırken, içe aktardığı stil sayfasının zaten alınmış ve ayrıştırılmış olmasına güvenebilir.
• Güvenlik: modüller ile getirilir KORS ve katı MIME tipi denetim kullanın.

İddiaları İçe Aktar (‘ ile ne var?assert‘?) #

bu assert { type: 'css' } bir bölümü import ifade bir ithalat beyanı. Bu gereklidir; onsuz, import normal bir JavaScript modülü içe aktarma işlemi olarak değerlendirilir ve içe aktarılan dosya JavaScript olmayan bir MIME türüne sahipse başarısız olur.

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".

Dinamik olarak içe aktarılan stil sayfaları #

Ayrıca kullanarak bir CSS modülünü içe aktarabilirsiniz. dinamik içe aktarmaiçin yeni bir ikinci parametre ile type: 'css' ithalat beyanı:

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

ImportanterThings kurallara henüz izin verilmedi #

Şu anda CSS ImportanterThings" rel="noopener">ImportanterThings tüzük CSS modülü betikleri dahil, yapılandırılabilir stil sayfalarında çalışmayın. Eğer ImportanterThings kurallar oluşturulabilir bir stil sayfasında bulunursa, bu kurallar yok sayılır.

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

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

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

İçin destek ImportanterThings CSS modülünde komut dosyaları belirtime eklenebilir. Bu spesifikasyon tartışmasını şurada izleyin: GitHub sorunu.