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ı kullanmayı öğrenin.

Dan Clark'tan filmler
Dan Clark
X GitHub

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

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.