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 dosyası özelliğiyle, tıpkı JavaScript modülleri gibi CSS stil sayfalarını import ifadeleriyle yükleyebilirsiniz. Stil sayfaları daha sonra oluşturulabilir stil sayfalarıyla aynı şekilde dokümanlara veya gölge köklerine uygulanabilir. Bu yöntem, CSS'yi içe aktarma ve uygulamanın diğer yollarından daha kullanışlı ve daha verimli 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 destek sunulmamaktadır. Uygulama ilerleme durumu sırasıyla Gecko hatası ve WebKit hatası sayfalarında takip edilebilir.

Ön koşullar

CSS modülü komut dosyalarını kullanma

Bir CSS modülü komut dosyasını içe aktarıp aşağıdaki gibi bir dokümana veya gölge köküne 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 bir oluşturulabilir stil sayfasıdır. Diğer tüm oluşturulabilir stil sayfaları gibi, adoptedStyleSheets kullanılarak dokümanlara veya gölge köklere uygulanır.

JavaScript'den CSS uygulamanın diğer yollarının aksine, <style> öğeleri oluşturmanıza veya CSS metinlerinin JavaScript dizeleriyle uğraşmanıza gerek yoktur.

CSS modülleri, JavaScript modülleriyle aynı avantajlardan bazılarını da sunar.

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

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

import ifadesinin assert { type: 'css' } kısmı bir içe aktarma beyanı'dır. Bu zorunludur; aksi takdirde import normal bir JavaScript modülü içe aktarma işlemi olarak değerlendirilir ve içe aktarılan dosyanın MIME türü JavaScript dışındaysa işlem 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ı

type: 'css' içe aktarma beyanı için yeni bir ikinci parametreyle dinamik içe aktarma özelliğini kullanarak da CSS modülü içe aktarabilirsiniz:

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

@import kurallarına henüz izin verilmedi

Ş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 yok sayı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.