CSS Hatalarınızı Kendiniz Düzeltin

css hatalarıWeb tasarımcılarının isteği sadece göze hitap eden tasarımlar yapmaktan ibaret değildir. Web programlamada da belirli standartlar vardır ve bu standartlar World Wide Web Consortium (W3C) tarafından belirlenmektedir. CSS (Cascading Style Sheet) dili ise web sayfalarını biçimlendirmekte kullanılır.

Örneğin div’ler (divisionlar) class(sınıf)’lara sahiptir ve bu class’a ait div’ler farklı özellikler taşıyabilir. Web sayfamızın logo kısmında farklı font kullanırken body (gövde) kısmında farklı font kullanabiliriz bu classlar sayesinde.

Web tasarımcılar sadece CSS standartlarına değil XHTML standartlarına da uygun tasarım yapmak isterler. Örneğin W3C’nin standartları arasında img (resim) tagı’nın 2 attribute(özelliği)’u zorunludur. src (kaynak) ve alt (alternate, alternatif – resim açılmadığı zaman alt değeri görünür) girilmemiş img tagları XHTML doğrulamasından geçemez.

Birazdan sizlere tanıtacağım holmes.css aracı da web sayfalarınızdaki bu hataları tespit edip sizlere bildirmektedir. İsmini ingiliz dedektif Sherlock Holmes’tan alan bu araç “The CSS Markup Detective” (CSS markup dedektifi) olarak geçmektedir.

Holmes.css aracı Luke Williams tarafından geliştirilmiştir ve proje’nin kodları github üzerinden isteyenlerin kullanımına ve geliştirilmesine açılmıştır.

Kullanımı:
1. Adım: Holmes.css’i eklemek
İlk olarak css dosyamızı web sayfamıza ekleyeceğiz. Bunu 2 yoldan yapabilirsiniz.
a) css dosyasını linkleyerek
<LINK media=screen href=”holmes.css” type=text/css rel=stylesheet>
kodu ile css dosyasını websitenizin head kısmında ekleyin
b) holmes.css dosyasının içeriğini kendi css dosyanızın içeriğine kopyalayarak.

2. Adım: Debug yapmak
Kontrol etmek istediğiniz bölüm’e “holmes-debug” class’ını ekleyiniz.
Örnek: <body class=”holmes-debug”>kodu ile body’de (sitemizin gövdesinde) bulunan hataları kontrol edebiliriz.

3. Adım:
Hata renklerini anlamak
Bu adımda W3C standartlarına uymayan kodlarımızın ne anlama geldiğini çözüyoruz. Holmes.css aracı:
– Hata tespit ettiğinde hatalı bölümü Kırmızı renkle çerçevelendirir.
– Warning (uyarı) tespit ettiğinde Sarı renkle çerçevelendirir.
– Onaylanmamış (Deprecated) ve W3C standarlarında olmayan elementler (Non-W3C Elements) Gri renkle çerçevelendirir.

4. Adım: Hataları düzeltmek
Hata, Uyarı ve standartlara aykırı kodlarınızı aldığınız renklere göre standartlara uygun bir şekilde düzenleyiniz. Hata aldığınız ve standartlarını bilmediğiniz kodlar için buradan detaylı bilgiye ulaşabilirsiniz (açılan site ingilizcedir).

Tarayıcı Desteği:
Aşağıdaki tarayıcılarda %100 çalışmaktadır;
Google Chrome 10+
Safari 5+
Opera 10+
Firefox 3.5+
Internet Explorer 8 ve daha eski sürümlerde hatalarla karşılaşılmıştır (ancak IE8 ve eski sürümleri W3C CSS standartlarını kullanmadığından dolayı) IE9’da ise holmes.css aracı denenmemiştir.

İlgili bağlantılar:
Hatalı bir sayfayı görmek için tıklayınız.
Holmes.css resmi sayfasını görmek için tıklayınız.
Holmes.css son sürümü indirmek için tıklayınız.
Yazarın ilgili blog yazısına görmek için tıklayınız.

Not: W3C’nin sitesinden de CSS ve XHTML doğrulaması yapılabilmektedir, ancak bu araç sayesinde offline (çevrimdışı) olarak localhost’unuzda bu hataları tespit edip sitenizi yayına sokmadan düzeltebilirsiniz.

8 comments on “CSS Hatalarınızı Kendiniz Düzeltin

  1. s.a.
    arkadaslar w3 surekli bu kodlar hata gosteriyor kaldırdıgımdada menu tablosu bozuluyor..

    #menu a { padding: 8px 8px 5px; height: 27px; float: left; color: rgb(255, 255, 255); text-decoration: none; font-family: font-style: normal; font-variant: normal; font-weight: normal; font-size: 1.4em; line-height: normal; font-size-adjust: none; font-stretch: normal; }

    yardim edermisiniz ?

  2. s.a.

    #menu a { padding: 8px 8px 5px; height: 27px; float: left; color: rgb(255, 255, 255); text-decoration: none; font-family: Georgia,”Times New Roman”,Times,serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 1.4em; line-height: normal; font-size-adjust: none; font-stretch: normal; }

    bu kodda hata gosteriyor w3 te bir turlu cozemedim rica etsem yardım edermisiniz hata şeklide şu

    #menu a Property font-size-adjust doesn’t exist in CSS level 2.1 but exists in [css2, css3] : none
    #menu a Property font-stretch doesn’t exist in CSS level 2.1 but exists in [css2, css3] : normal

Bir Cevap Yazın

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