Stil sayfalarını içe aktarmak için CSS modülü komut dosyalarını kullanma

JavaScript modülleriyle aynı söz dizimini kullanarak CSS stil sayfalarını içe aktarmak için CSS modül komut dosyalarını nasıl kullanacağınızı öğrenin.

Dan Clark

Yeni CSS modül komut dosyaları özelliği sayesinde, CSS stil sayfalarını tıpkı JavaScript modülleri gibi import ifadeleriyle yükleyebilirsiniz. Stil sayfaları daha sonra oluşturulabilir stil sayfaları ile aynı şekilde dokümanlara veya gölge köklere uygulanabilir. Bu yöntem, CSS'yi içe aktarmanın ve uygulamanın diğer yöntemlerine göre daha kullanışlı ve daha performanslı olabilir.

Tarayıcı desteği

CSS modülü komut dosyaları, Chrome ve Edge'in 93 sürümünde varsayılan olarak kullanılabilir.

Firefox ve Safari'de henüz desteklenmemektedir. Uygulama süreci, sırasıyla Gecko hatası ve WebKit hatası üzerinden takip edilebilir.

Ön koşullar

CSS modülü komut dosyalarını kullanma

Bir CSS modülü komut dosyasını içe aktarın ve bir dokümana veya gölge köke şu şekilde uygulayın:

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

CSS modülü komut dosyasının varsayılan dışa aktarma işlemi, içeriği içe aktarılan dosyanın içeriği olan oluşturulabilir bir stil sayfasıdır. Diğer tüm oluşturulabilir stil sayfaları gibi, adoptedStyleSheets kullanılarak belgelere veya gölge köklere uygulanır.

JavaScript'ten CSS uygulamanın diğer yöntemlerinin aksine, <style> öğeleri oluşturmanız veya CSS metninin JavaScript dizeleriyle uğraşmanız gerekmez.

CSS modülleri, JavaScript modülleriyle aynı avantajlardan bazılarına da sahiptir.

  • Tekilleştirme: Aynı CSS dosyası bir uygulamadaki birden fazla yerden içe aktarılırsa yine de yalnızca bir kez getirilir, örneklendirilir ve ayrıştırılır.
  • Tutarlı değerlendirme sırası: İçe aktarma JavaScript'i çalışırken, içe aktardığı stil sayfasının zaten getirilip ayrıştırılmış olmasına güvenebilir.
  • Güvenlik: Modüller CORS ile getirilir ve katı MIME türü kontrolü kullanılır.

İçe aktarma onayları ("assert" ne anlama geliyor?)

import ifadesinin assert { type: 'css' } kısmı bir içe aktarma onayıdır. Bu gereklidir. Bu olmadan import, normal bir JavaScript modülü içe aktarma işlemi olarak değerlendirilir ve içe aktarılan dosyanın JavaScript olmayan bir MIME türü varsa 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ı

Dinamik içe aktarma kullanarak da CSS modülü içe aktarabilirsiniz. Bunun için type: 'css' içe aktarma onayı için yeni bir ikinci parametre kullanmanız gerekir:

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ı dahil olmak üzere oluşturulabilir stil sayfalarında çalışmıyor. 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.