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.
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 Nedir?
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’nin sözdizimi
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’ Özelliği
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 Niteliği içindeki CSS Özellik-Değer Çiftleri
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.
Satır İçi CSS’nin Avantajları
- Bireysel Öğelere Stil Eklemek Hızlı ve Kolay
- Değişiklikleri Test Etmek ve Önizlemek İçin Yararlıdır
- Yüksek Özgüllük Nedeniyle Diğer CSS Stillerini Geçersiz Kılar
Satır içi CSS’nin Dezavantajları
- Daha Büyük Projelerde Bakım Zorluğu
- Karmaşık HTML Yapısı
- Tekrar Kullanılamayan Kod
- Aşırı Kullanıldığında Sayfa Yükleme Performansını Azaltır
- Birden Fazla Öğe veya Sayfada Tutarlılıkla İlgili Zorluklar
| Ö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 |
Sayfa hızına Etkisi ve Pagespeed Test Uyarısı
Ç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.
Son Bilgi
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.
