Avoid CSS @import Kullanımı

Avoid CSS @import kullanımı CSS, bir belgenin görünüşünü ve formatını tanımlamak için kullanılan bir stil sayfası dilidir. Temel amacı, mizanpaj, yazı tipi ve renkler gibi belgenin içerik öğelerini ayırmaktır.

Avoid CSS @import nasıl çalışır

CSS @import, CSS’nin diğer CSS’leri içe aktarmasına izin verir. @import şöyle gözükür:

<style>
@import url(a.css) ;
</style>

Avoid CSS @import

@import kullanıldığında, web tarayıcısı, ilk CSS’i indirmeden, ayrıştırmadan ve yürütmeden önce ithal edilen CSS’i indirmeye başlamaz. Web tarayıcısı, import.css’ler hakkında bilgi edindikten sonra indirmeye başlar. Ancak web tarayıcısının her iki stil sayfasını paralel olarak indirememesinden kaynaklanan gecikme, sayfanın yük hızını düşürmektedir.

İlginizi çekebilir: Minify CSS WordPress

Avoid CSS @import aşağıdaki Avantajları sağlar:

  • Stil sayfaları paralel olarak indirilebilir.
  • Daha az sayfa yükleme süresi.

Harici CSS kullanırken CSS @import etmek, bir sayfanın yükleme hızını artırmak için iyi bir yoldur. Web tarayıcısı stil sayfalarını paralel olarak indiremediğinden, @import kullanmadan CSS’nize başvurmak için başka bir yol gerekir.

@import kullanmaktan kaçınmak için, aşağıda gösterildiği gibi her CSS için link etiketini kullanabilirsiniz:

<link rel='stylesheet' type='text/css' href='A.css'>
<link rel='stylesheet' type='text/css' href='B.css'>

Çok az durumda, aşağıdaki sözdizimine paralel olarak indirmek için @import kullanabilirsiniz. Ancak bu JavaScript hatalarına neden olabilir.

<style>
@import url('A.css');
@import url('B.css');
</style>

Bunun yalnızca harici bir CSS’e satır içi CSS ile göndermediğiniz durumlarda kullanılabileceğini unutmayın.