CSS'de @import ve link arasındaki fark

118

Proje şablonumu değiştirmek için biraz CSS öğreniyorum. Bu soruna geldim ve internette net bir cevap bulamadım. CSS'de @import veya link kullanmak arasında bir fark var mı?

@İmport kullanımı

<style>@import url(Path To stylesheet.css)</style>

Link Kullanımı

<link rel="stylesheet" href="Path To stylesheet.css">

Bunu yapmanın en iyi yolu nedir? ve neden? Teşekkürler!

css import hyperlink

— Omar Abid
kaynak

142

Teoride, aralarındaki tek fark @import, bir stil sayfası ve <link>HTML mekanizmasını içeren CSS mekanizmasıdır. Ancak, tarayıcılar bunları farklı şekilde ele <link>alarak performans açısından açık bir avantaj sağlar.

Steve Souders, hem <link>ve hem de @import(ve bunların her türlü kombinasyonunun) etkisini karşılaştıran " @import kullanma " adlı kapsamlı bir blog yazısı yazdı . Bu başlık hemen hemen kendisi için konuşuyor.

Yahoo! Ayrıca performans en iyi uygulamaları (Steve Souders tarafından birlikte yazılmıştır) biri olarak bahseder: Seç <link>@import üzerinde

Ayrıca <link>etiketini kullanmak, "tercih edilen" ve alternatif stil sayfalarını tanımlamanıza olanak tanır . Bunu onunla yapamazsınız @import.

— merkator
kaynak

Teşekkürler - güzel köprüler - özellikle bu ilk.

— Faisal Vali

6

Bağla komutuyla mümkün olmayan bir css dosyası içine başka bir CSS'yi içe aktarmak için içe aktarma komutunu kullanabilirsiniz. Gerçekten eski tarayıcı (IE4, IE5 kısmen) içe aktarma işlevini işleyemez. Ek olarak, xhtml / html dosyanızı ayrıştıran bazı kitaplıklar, stil sayfası içe aktarmayı almada başarısız olabilir. Lütfen içe aktarmanızın diğer tüm CSS bildirimlerinden önce gelmesi gerektiğini unutmayın.

— merkuro
kaynak

6

Bugün gerçek bir fark yok, ancak @importeski tarayıcılar (Netscape 4, vb.) Tarafından doğru şekilde ele alınmadığından, @importhackleme bu eski tarayıcılardan CSS 2 kurallarını gizlemek için kullanılabilir.

Yine, gerçekten eski tarayıcıları desteklemediğiniz sürece, bir fark yoktur.

Yerinizde olsam, <link>HTML sayfalarınızda varyantı kullanırdım , çünkü medya türü (baskı, ekran vb.) Gibi şeyleri belirlemenize izin verir.

— zenazn
kaynak

5

Ortamı belirtmek @import ifadeleri için de mümkündür.

— Georg Schölly

Gerçekten mi? Sanırım stil etiketinize bir medya türü ekleyebilirsiniz, ancak bu bana biraz hack gibi geliyor.

— zenazn

5

Örneğin "@import url (style.css) screen, print" yapabilirsiniz, ancak IE7 ve öncesi ortam türlerini desteklemiyor.

— mercator

5

@import yönergesi tarayıcıyı *, teknik olarak sadece bir betik olduğundan, içe aktarılan betik motor tarafından doğru şekilde işlenmeden önce üst betiğe satır içi yüklenene kadar beklemeye zorlar.

Birçok css küçültme komut dosyası (ve less veya sass gibi diller), bağlantılı komut dosyalarını otomatik olarak ana komut dosyasında birleştirir, çünkü daha az transfer ek yüküne neden olur.

* (tarayıcıya bağlıdır)

— Maymun-İnago
kaynak

2

Bu makale burada yararlı olabilir: HTML'ye CSS eklemenin 4 yöntemi: bağlama, gömme, satır içi ve içe aktarma

— Matthew James Taylor
kaynak

1

Alıntı: "1000 sayfalık bir web sitemiz olduğunu ve sitedeki her sayfadan bir CSS dosyasına bağlantı verdiğimizi varsayalım. Şimdi tüm bu sayfalara ikinci bir CSS dosyası eklemek istediğimizi düşünelim. 1000 HTML dosyasının tümünü düzenleyebiliriz ve ikinci bir CSS bağlantısı ekleyin veya çok daha iyi bir yol, ikinci CSS dosyasını ilk dosyanın içinden içe aktarmak olabilir. Birkaç saat çalışmadan kendimizi kurtardık! "

— Casebash

1

@İmport kuralını kullandığımda, genellikle mevcut bir stil sayfası içindeki bir stil sayfasını içe aktarmaktır (bununla başlamaktan hoşlanmama rağmen). Ama sorunuza cevap vermek gerekirse, hayır, herhangi bir fark olduğuna inanmıyorum. Geçerli XHTML ile uyumlu olması için URL'yi çift tırnak içine aldığınızdan emin olun.

— Barry Gallagher
kaynak

1

@import genel olarak, örneğinizdeki gibi satır içi yerine harici bir stil sayfasında kullanılmak üzere tasarlanmıştır. Eğer varsa , gerçekten çok eski tarayıcılarda bir stil gizlemek istediği bu stil kullanmasını önlemek için bir hack olarak kullanabilirsin.

Genel olarak, <link>etiket @import kuralından daha hızlı işlenir (bu, css işleme motoru söz konusu olduğunda görünüşe göre biraz yavaştır).

— Gabriel Hurley
kaynak

0

Microsoft Internet Explorer 9 (MSIE9) @import'u düzgün şekilde işlemiyor gibi görünüyor. Bu girdileri Apache whoisgünlüğümden gözlemleyin (IP adresi gizlidir, ancak Microsoft'un kendisine ait olduğu söylenir): screen.css'ye bağlı olan ana HTML

@import url("print.css") print;
@import url("speech.css") aural;

Şimdi linkHTML'deki öğelere geçmek üzereyim, çünkü MSIE9 sunucuya iki yanlış istek gönderiyor ve onsuz yapabileceğim 404 hatası alıyor gibi görünüyor:

[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net

Orada vardı bu dosyalar için uygun istekler sonradan ama biz "ilk sunucuda çekimi parse bu olmadan yapabileceği urlmantığı sonra."

— Silas S. Brown
kaynak