JavaScript modülleriyle aynı söz dizimini kullanarak CSS stil sayfalarını içe aktarmak için CSS modülü komut dosyalarını kullanmayı öğrenin.
Yeni CSS modülü komut dosyaları özelliğiyle, JavaScript modüllerinde olduğu gibi CSS stil sayfalarını import
ifadeleriyle yükleyebilirsiniz. Ardından stil sayfaları, oluşturulabilir stil sayfaları ile aynı şekilde dokümanlara veya gölge köklerine uygulanabilir. Bu, CSS'yi içe aktarmanın ve uygulamanın diğer yollarına göre daha kullanışlı ve daha yüksek performanslı olabilir.
Tarayıcı Desteği
CSS modülü komut dosyaları, sürüm 93'te varsayılan olarak Chrome ve Edge'de mevcuttur.
Firefox ve Safari henüz desteklenmemektedir. Uygulamanın ilerleme durumu, sırasıyla Gecko hatası ve WebKit hatası üzerinden izlenebilir.
Ön koşullar
- JavaScript modülleri hakkında bilgi
- Oluşturulabilir stil sayfaları hakkında bilgi sahibi olun.
CSS modülü komut dosyalarını kullanma
Bir CSS modülü komut dosyasını içe aktarın ve bunu aşağıdaki gibi bir dokümana veya gölge köke uygulayın:
import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];
Bir CSS modülü komut dosyasının varsayılan olarak dışa aktarılması, içeriği içe aktarılan dosyanın içeriğine sahip olan bir yapılandırılabilir stil sayfasıdır. Diğer tüm yapılandırılabilir stil sayfalarında olduğu gibi, dokümanlara veya gölge köklerine adoptedStyleSheets
kullanılarak uygulanır.
JavaScript'ten CSS uygulamanın diğer yollarının aksine, <style>
öğeleri oluşturmaya veya CSS metninden JavaScript dizeleriyle uğraşmanıza gerek yoktur.
CSS modüllerinin, JavaScript modülleriyle aynı avantajların bir kısmı da vardır.
- Tekilleştirme: Aynı CSS dosyası bir uygulamada birden fazla yerden içe aktarılırsa yalnızca bir kez getirilir, örneklenir ve ayrıştırılır.
- Değerlendirmenin tutarlı sırası: İçe aktarılan JavaScript çalışırken, içe aktardığı stil sayfasının önceden getirilip ayrıştırılmış olmasına güvenebilir.
- Güvenlik: Modüller CORS ile getirilir ve sıkı MIME türü kontrolü kullanılır.
Onayları İçe Aktarma ("assert
" öğesinin özelliği nedir?)
import
ifadesinin assert { type: 'css' }
bölümü bir içe aktarma onayıdır. Bu gereklidir; bunlar olmadan import
, normal JavaScript modülü içe aktarma işlemi olarak işlenir ve içe aktarılan dosyanın JavaScript olmayan MIME türü olması halinde 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, type:
'css'
içe aktarma onayı için yeni bir ikinci parametreyle birlikte dinamik içe aktarma özelliğini kullanarak bir CSS modülünü içe aktarabilirsiniz:
const cssModule = await import('./style.css', {
assert: { type: 'css' }
});
document.adoptedStyleSheets = [cssModule.default];
@import
kurala henüz izin verilmiyor
Şu anda CSS @import
kuralları, CSS modülü komut dosyaları da dahil olmak üzere oluşturulabilir stil sayfalarında çalışmamaktadır. Oluşturulabilir bir stil sayfasında @import
kuralları varsa bu kurallar yoksayılır.
/* 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>
CSS modülü komut dosyalarında @import
desteği spesifikasyona eklenebilir. Bu spesifikasyon tartışmasını GitHub sorununda takip edin.