Web tasarımla uğraşan herkesin işine yarayacak muhteşem bir araçla bir konuyu da inceliyoruz. Yazı içerisinde bulunan aracımız sayesinde ilgili sayfa içerisinde ki tüm Inline CSS listelemelerini nitelikleriyle beraber görebileceksiniz. Sayfa hızı konusunda devamlı karşınıza Inline CSS konusu geliyorsa Türk SEM’in bu aracı sayesinde sorunlarınızı eksiksiz bir şekilde görebilirsiniz.
Inline CSS, Türkçe olarak Satıriçi CSS olarak da anılmaktadır.
Render Engelleyici Testi
Sitenizin bu değerini anında görün: adresinizi yazın, Render Engelleyici Testi sonucunuz ve araca özel içgörüler burada belirsin.
Ücretsiz, kayıt gerektirmez; analizle birlikte tüm araçlarımız siteniz için kişiselleşir.
Yukarı kısımdan incelemek istediğiniz sayfayı giriş yaparak kontrol edebilirsiniz. Kontroller sırasında satıriçi kullanılan CSS kodlarının ne olduğunu anlatan bir kılavuzla karşılaşacaksınız.
Inline CSS (Satır içi CSS), CSS kurallarını doğrudan bir HTML öğesine içerisinde style niteliğini kullanarak uyguladığınız bir tasarım yöntemidir. Bu yaklaşım CSS’yi doğrudan HTML kodlarınız içine eklemenize ve yalnızca uygulandığı belirli öğeyi etkilemenize olanak tanıyan o kısma özgü bir yöntemdir.
Satır içi stiller, HTML sayfanızdaki öğelerin görünümünü harici bir stil sayfasına (.css) bağlanmaya veya başlık bölümünü dahili stil sayfalarından veri çekmeye gerek kalmadan değiştirmenin hızlı ve pratilk bir yoludur.
Satır içi CSS için sözdiziminin kullanımı oldukça basittir. Bir HTML etiketi içindeki style niteliğiyle başlarsınız, ardından eşittir işareti gelir. Style niteliğinin değeri daha sonra tırnak işaretleri içine alınmış bir dizi CSS özellik-değer çifti ekleyerek kullanılabilir.
Her özellik karşılık gelen değerinden iki nokta üst üste işaretiyle ayrılır ve her özellik-değer çifti noktalı virgülle ayrılarak kullanılır.
Style niteliği, CSS’yi doğrudan bir HTML kodları içerisine eklemek için kullandığınız HTML niteliğidir. Satır içi stil için bir ağ geçididir ve tüm HTML öğeleri ve tarayıcılar tarafından desteklenir. Bir HTML etiketine style niteliğini eklediğinizde, tarayıcıya belirtilen stilleri yalnızca o öğeye uygulanmasını sağlar.
Style özniteliği içinde, istediğiniz sayıda CSS özellik-değer çifti belirtmeniz mümkündür. Bir CSS özelliği, renk, kenarlık veya kenar boşluğu gibi biçimlendirmek istediğiniz bir öğenin tüm yönlerini kapsar. Değer, sırasıyla kırmızı, 2 piksel düz siyah veya 10 piksel gibi bu özelliği o alana özgü ayarlamanız için Inline CSS kullanılabilir.
İşte bir paragrafın metin rengini ve yazı tipi boyutunu değiştirmek için satır içi CSS’yi nasıl kullanabileceğinize dair bir örnek:
<!-- ORNEK INLINE CSS KODU -->
<p style="color: red; font-size: 20px;">Bu içerik Inline CSS konusunu anlatmaya yönelik Turksem.com tarafından yapılmış örnek bir koddur.</p>Şimdi bu kodun önizlemesine bakalım.
Bu içerik Inline CSS konusunu anlatmaya yönelik Turksem.com tarafından yapılmış örnek bir koddur.
| Özellik | Inline CSS | Harici style.css |
|---|---|---|
| Tanım | HTML elemanlarının doğrudan “style” özelliği içinde tanımlanır | Ayrı bir .css dosyasında tanımlanır |
| Öncelik | En yüksek önceliğe sahiptir | Inline CSS’ten daha düşük önceliğe sahiptir |
| Yeniden kullanılabilirlik | Düşük, her eleman için tekrar yazılması gerekir | Yüksek, birçok sayfada kullanılabilir |
| Bakım | Zor, değişiklikler her eleman için ayrı ayrı yapılmalıdır | Kolay, tek bir dosyada değişiklik yapılır |
| Sayfa yükleme hızı | Sayfanın boyutunu artırır, yavaşlatabilir | Ayrı dosya olduğu için önbelleğe alınabilir, hızı artırır |
| Kod okunabilirliği | HTML içeriğini karmaşıklaştırır | HTML ve CSS’i ayırarak okunabilirliği artırır |
| Taşınabilirlik | Düşük, her HTML dosyasına özel | Yüksek, farklı HTML dosyalarında kullanılabilir |
| Ölçeklenebilirlik | Düşük, büyük projelerde yönetimi zordur | Yüksek, büyük projelerde daha kolay yönetilir |
Çoğu zaman kolayımıza geldiği için kullandığımız Inline CSS uygulaması sitenizi yavaşlatma eğiliminde olan modası geçmiş bir uygulamadır. Örneğin; başlıklarınızı 20px ve kırmızı yapmak istediğinizi varsayalım. Sayfada 10 başlık varsa her birine aynı kodu yerleştireceksiniz. Bu durum gereksiz bir kod çokluğuna neden olmaktadır. Halbuki harici bir .css dosyasına .h1 başlık etiketi tanımlasanız bu kod yoğunluğunu azaltmış olacaksınız.
Yukarıda yer verdiğimiz test aracı sizler için tam olarak kusursuz bir kılavuz sunmaktadır. İlgili sayfalarınızı kontrol ederek sıklıkla tekrar ettiğiniz kodlara göz atabilirsiniz.
Bir webmasterın işine yarayacak bir çok etkili aracı Web Sitesi Test Araçları kısmında yayınlamaktayız.
Bir SEO ajansı olarak bizi genellikle hız konusunda ilgilendirse de Inline CSS konusunda yaşadığınız sorunları bizlere yazabileceğinizi, fikir alabileceğinizi unutmayın.
Yazar
Tahir Dinç
SEO Uzmanı · Türk SEM Kurucusu
1999 yılında ilk çalışmalarıma başladım, 2004 yılında ODP editörü oldum. Günümüzde bir çok büyük firmaya SEO ve Google Ads hizmetleri sağlıyorum. Aynı zamanda Türk SEM Grup başkanı olarak Türk SEM'in bünyesindeki şirketleri yönetiyorum.
Profili gör →
