Farklı siteler kendi harici Basamaklı Stil Şablonu farklı şekillerde—ya @import yaklaşımını kullanarak ya da o CSS dosyasına bağlanarak. @import ve link for CSS arasındaki fark nedir ve hangisinin sizin için daha iyi olduğuna nasıl karar verirsiniz?
@import ve Link Arasındaki Fark
Bağlama, web sayfalarınıza harici bir stil sayfası eklemenin ilk yöntemidir. Sayfanızı stil sayfanızla ilişkilendirmek için tasarlanmıştır. Kafanıza eklenir HTML belgesi.
İçe aktarma, bir stil sayfasını diğerine aktarmanıza olanak tanır. Bu, bağlantı senaryosundan biraz farklıdır çünkü stil sayfalarını bağlantılı bir stil sayfasının içine aktarabilirsiniz.
Standartlar açısından, harici bir stil sayfasına bağlanmak veya onu içe aktarmak arasında hiçbir fark yoktur. Her iki yol da doğrudur ve çoğu durumda her iki yol da eşit derecede iyi çalışır. Ancak, birini diğerinin yerine kullanmak isteyebileceğiniz birkaç neden vardır.
Neden @import Kullanmalısınız?
Yıllar önce, bunun yerine (veya onunla birlikte) @import kullanılmasının en yaygın nedeni, eski tarayıcıların @import'u tanımamasıdır, bu nedenle onlardan stilleri gizleyebilirsiniz. Stil sayfalarınızı içe aktararak, onları daha modern, standartlarla uyumlu tarayıcılar tarafından kullanılabilir hale getirirken, onları diğer tarayıcılardan "gizlersiniz".
eski tarayıcı sürümleri.@import yönteminin başka bir kullanımı, belgenizin kafasına yalnızca tek bir bağlantı eklerken bir sayfada birden çok stil sayfası kullanmaktır. Örneğin, bir şirket, sitedeki her sayfa için alt bölümlerin yalnızca o alt bölüm için geçerli olan ek stilleri olan genel bir stil sayfasına sahip olabilir. Alt bölüm stil sayfasına bağlanarak ve bu stilin en üstündeki global stilleri içe aktararak sayfa, site için tüm stilleri içeren devasa bir stil sayfası tutmanız gerekmez ve her alt bölüm. Tek gereksinim, @import kurallarının geri kalan stil kurallarınızdan önce gelmesi gerektiğidir. miras yine de sorun olabilir.
Bağlantıyı Neden Kullanmalısınız?
Bağlantılı stil sayfaları kullanmanın 1 numaralı nedeni, müşterileriniz için alternatif stil sayfaları sağlamaktır. Firefox, Safari ve Opera gibi tarayıcılar rel="alternate stylesheet" özniteliğini destekler ve bir tane mevcut olduğunda izleyicilerin bunlar arasında geçiş yapmasına izin verir. IE'de stil sayfaları arasında geçiş yapmak için bir JavaScript değiştirici de kullanabilirsiniz; Yakınlaştırma Düzenleri erişilebilirlik amacıyla.
@import kullanmanın dezavantajlarından biri, içinde yalnızca @import kuralı olan çok basit bir kafanız varsa, sayfalarınız yüklenirken bir "stillenmemiş içerik flaşı" görüntüleyebilmesidir. Bunun basit bir düzeltmesi, kafanızda en az bir ek bağlantı veya komut dosyası öğesi bulunduğundan emin olmaktır.
Medya Türü Hakkında Ne?
Birçok yazar, stil sayfalarını eski tarayıcılardan gizlemek için medya türünü kullanabileceğinizi iddia ediyor. Genellikle, bu fikirden @import veya kullanmanın bir faydası olarak bahsederler, ancak medyayı ayarlayabilirsiniz. herhangi bir yöntemle yazın ve medya türlerini desteklemeyen eski tarayıcılar bunları ikisinde de görüntülemez. durum.
Peki Hangi Yöntemi Kullanmalısınız?
Günümüzde çoğu geliştirici, bağlantı kullanıyor ve ardından stil sayfalarını harici stil sayfalarına aktarıyor. Bu şekilde, HTML belgelerinizde ayarlamanız gereken yalnızca bir veya iki satır koda sahip olursunuz. Ama sonuçta, bu size kalmış. @import ile daha rahatsanız, devam edin! Her iki yöntem de standartlara uygundur ve gerçekten eski tarayıcıları desteklemeyi planlamıyorsanız, ikisini de kullanmak için güçlü bir neden yoktur.