CSS’de Import ve Link Arasındaki Fark Nedir?

CSS’de Import ve Link Arasındaki Fark Nedir?

Stil sayfalarını eklemek için hangi yöntemi kullanacağınıza karar vermeden önce, iki yöntemin neye yönelik olduğu hakkında bilgi vermelisiniz. <Link> – Web sayfalarınıza harici bir stil sayfası eklemek için ilk yöntem bağlama yöntemidir. Web sayfanızın stil sayfanızla bağlantılandırılması amaçlanmıştır. HTML belgenizin <head> dosyasına şöyle eklendi:

<link href=”styles.css” rel=”stylesheet”>

@ Import – İçe Aktarma, bir stil sayfasını başka bir stil sayfasına yüklemenizi sağlar. Bu, bağlantı senaryosundan biraz farklıdır çünkü stil sayfalarını bağlantılı bir stil sayfası içinde içe aktarabilirsiniz. HTML belgenizin başına bir @import eklerseniz, şöyle yazılır

<style type=”text/css”>@import url(“styles.css”);</style>

Bir standart bakış açısından, harici bir stil sayfasına bağlanma veya içe aktarma arasında fark yoktur. Her iki durumda da doğrudur ve her iki durumda da eşit derecede iyi çalışır (çoğu durumda). Bununla birlikte, birini üst üste kullanmak isteyebileceğiniz birkaç nedeni vardır.

Örneğin, bir şirket, sitedeki her sayfa için genel bir stil sayfası içerebilir; alt bölümler, yalnızca bu alt bölüm için geçerli olan ek stillere sahiptir. Alt bölüm stil sayfasını bağlayarak ve bu stil sayfasının en üstündeki genel stilleri içe aktararak, site ve her alt bölüm için tüm stilleri içeren devasa bir stil sayfasını korumanız gerekmez.

Tek şart, herhangi bir @import kuralının stil kurallarınızın geri kalanından önce gelmesi gerekir. Ayrıca, mirasın hâlâ bir sorun olabileceğini unutmayın.

<LINK> Kullanımı

Stil sayfalarını kullanmanın bir numaralı nedeni, müşterileriniz için alternatif stil sayfaları sağlamaktır. Firefox, Safari ve Opera gibi tarayıcılar rel = “alternatif stil sayfası” özelliğini destekler; mevcut bir tane varsa, görüntüleyenler arasında geçiş yapmalarına izin verir. IE’deki stil sayfaları arasında geçiş yapmak için bir JavaScript değiştirici de kullanabilirsiniz.

Bu, çoğunlukla erişilebilirlik amacıyla Zoom Düzenleriyle kullanılır. @import’u kullanmanın sakıncalarından biri de sadece @import kuralına sahip çok basit bir <head> öğeniz varsa, sayfalarınız yükleniyorken bir “çizgisiz içeriğin yanıp sönmesi” (FOUC) görüntüleyebilmesidir. Bu, görüntüleyenlerinize sarsıcı olabilir. Bunun basit bir düzeltmesi, <başlığınızda> en az bir ek <link> veya <script> öğesine sahip olduğunuzdan emin olmaktır.

Birçok yazar, eski tarayıcılardan stil sayfalarını gizlemek için ortam türünü kullanabileceğinizi bildirir. Genellikle, bunu @import veya <link> ‘ı kullanmanın bir faydası olarak belirttiler, ama gerçekte medya türünü herhangi bir yöntemle ayarlayabilirsiniz ve medya türlerini desteklemeyen eski tarayıcılar her iki durumda da görüntülemiyor.

Kişisel olarak, çoğu web tasarımcısının yaptığı gibi, <link> ‘i kullanıp stil sayfalarını harici stil sayfalarım içine almayı tercih ediyorum.

Coder

Selam. Herşey yolunda mı?

View all posts by Coder →

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Artık Sistemciyiz.net'ten ayrılıyorsunuz

Sistemciyiz.net, ziyaretçilere belirli bilgileri sağlamak için diğer kuruluşların web sitelerine bağlantılar sağlar. Bir bağlantı, o web sitesinin içeriğinin, bakış açısının, politikalarının, ürünlerinin veya hizmetlerinin onaylandığı anlamına gelmez. Sistemciyiz.net tarafından sağlanmayan başka bir web sitesine bağlantı oluşturduğunuzda, gizlilik politikası dahil ancak bununla sınırlı olmamak üzere bu web sitesinin hüküm ve koşullarına tabi olursunuz.

You will be redirected to
in 3 seconds...

Click the link above to continue or CANCEL