2013-01-02 37 views
6

Büyük bir CSS dosyasına sahibim ve ortam sorgularını kullanarak özel durumlar için diğer CSS dosyalarını eklemek istiyorum.Bir CSS dosyasını bir medya sorgusu olan başka bir CSS dosyasına eklemek mümkün mü?

güvenli böyle CSS'deki @import kullanımı mı:

@media only screen and (max-width: 480px) {  
    @import url('/css/styles-480.css');  
} 
+1

Genel olarak @import kullanımı tarayıcıların ekranını yavaşlatıyor. [Bu konuyla ilgili soruya bakın] (http://stackoverflow.com/questions/6912899/css-import-best-practices). Web optimizasyonunda temel kural, isteklerin sayısını, özellikle sıralı istekleri en aza indirmektir. –

cevap

3

, bunu gerekli olup olmadığını paralel olarak CSS dosyasını indirmek öneririm:

<link media="only screen and (max-width: 480px)" 
href="/css/styles-480.css" type="text/css" rel="stylesheet" /> 

sorun @import kullanarak ikinci dosya sadece sonra indirilir olmasıdır @import içeren CSS dosyası tamamen indirilir ve ayrıştırılır. Tüm kurallarınızı veya bazı kurallarınızı geçersiz kıldığınızdan bağımsız olarak, bu yaklaşım daha hızlıdır çünkü dosyaları sıralı olarak yüklemez.

+0

Bu, - 'import' stilinin, OP'nin zaten yüklemesi gereken başka stilleri içeriyorsa, bu '' import '' in bu stil sayfasından taşınması bir fark yaratmaz. – BoltClock

+0

@BoltClock Doğru, OP'in geçerli tüm kuralları '@ import' –

+1

@ BoltClock ile geçersiz kıldığını varsayıyordum, bu doğru değil. Benim yaklaşımım daha hızlıdır, çünkü '@ import' sadece CSS dosyasının tamamen indirilip ayrıştırılmasından sonra devreye girer. Bu, dosyaların sırayla yüklendiği anlamına gelir. –

14

O kadar ne varsa işe yaramaz, bir @media kuralı kapsamında bir @import olması geçerli değil. Onlar medya türleri doğrudan bir uzantısı olduğuna göre

@import url('/css/styles-480.css') only screen and (max-width: 480px); 

Bu sözdizimi, introduced in CSS2.1 for use with media types ama media queries will also work: kendisi URL'ye sonra bir medya sorgusu kabul @import -

Bunu yapmanın doğru yolu bile daha basittir.

@import kurallarının yalnızca bir stil sayfasının başlangıcında mevcut olduğunu unutmayın.

Eğer yük performansı hakkında endişeleriniz varsa, bu stil sayfası yerine bir @import, as shown by Asad başvurmak için sayfanızı kafasında ayrı <link> eleman kullanmak isteyebilirsiniz. Ancak, her iki şekilde de gayet iyi çalışacaktır. Bunun yerine bir CSS dosyası içinde ithal

+0

Tamam. Çok teşekkürler. – Wilson

İlgili konular