CSS3 nedir? ne işe yarar?

CSS3’ün gelmesi birçok yeniliği beraberinde getireceğe benziyor. Çoğu kullanıcının hali hazırda duymuş olmasına rağmen henüz tüm tarayıcılar tarafından desteklenmediği için çok fazla gözle görülür örnek yok. Var olan örneklere aşağıda değinmeden önce göze çarpan en önemli özelliklerden biri tasarım yaparken neredeyse artık resim kullanmayacağımız olması. İstediğimiz çoğu şeyi CSS3 sayesinde yapıyor olacağız. Mesela menü butonları yaparken resim kullanırız çünkü oval yada kenarlı falan yapmak isteriz bu yüzden CSS kendisi yeterli gelmez. Resim kullanmakta takdir edersiniz ki çok fazla siteyi yorduğu için en azından CSS’e nazaran, CSS3 bu açıdan çok işlevsel olacağa benziyor. Hatta internette gördüğüm yorumlardan biriside photoshopla kapışacak seviyeye geleceğinden bahsetmişlerdi. Örneklere geçersek; Devamı CSS3 nedir? ne işe yarar?

En iyi Online CSS optimizer

Temiz ve optimizasyonlu css yazabilmek için çok zaman ve bilgi gerekiyor. Css’nizi temiz tutmak sitenizin yüklenebilirliği ve hızı açısından en önemli şeylerden biridir. Css kodunuz serverınızda çoğu kaynağınızı kullanabilmekte bu da websiteniz açısından birçok problem teşkil edebilmektedir. Şanslısınız ki, burada Css’nizi kolayca optimize edebilecek birçok araç bulabileceksiniz hem de tamamen bedava! Devamı En iyi Online CSS optimizer

Yeni başlayanların yaptığı 5 CSS hatası

Piyasada CSS hakkında birçok makale var bunların bir kısmı çok yararlı olup bazıları ise yanlış anlaşılmalara ve hata yapmaya sebep olmaktadır. Özellikle CSS’ye yeni başlayanların sıklıkla yaptıkları birçok hata mevcuttur. Bu yazıda en çok yapılan hataların 5’ini inceleyeceğiz.

1-) Class ve ID leri aşırı kullanmayın
Yeni başlayanlar sayfada bulunan her elemente class ve ID ekliyorlar. Bu hem gereksiz hem de CSS’nin kullanım amacını toptan iptal etmiş oluyor. Class ve ID lerin aşırı kullanımı sadece stil sayfanızın kalabalıklaşmasına neden olmayıp ayrıca gereksizdir. Aşağıda bu bahsettiğimle alakalı örnek bulabilirsiniz.

Yanlış Örnek:

<div id="container" class="container">
  <p class="heading"><strong class="extrastrong">Welcome</strong></p>
  <p class="link1"><a href="#" class="link">Home</a></p>
  <p class="link2"><a href="#" class="link">About</a></p>
  <p class="link3"><a href="#"> class="link"Services</a></p>
  <p class="link4"><a href="#"> class="link"Contact</a></p>
</div>

Doğru Örnek:

<div id="container">
    <h1>This is a heading</h1>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
</div>

2-) İnline stilini kullanmayın
HTML sitenizi biçimlendirirken sıralı (inline) stilini kullanmayın. Bu özellik de her elemente ayrı ayrı uygulanmak zorunda. Ayrıca CSS yi harici olarak çağırarak tek dosya üzerinden çalışmak varken neden bu kadar kendimizi zorlayalım ki ?
Yanlış Örnek:

<p style="color: #fff; font-size: 2em;">This is a sentence.</p>

Doğru Örnek:

<p>This is a sentence.</p> 
/*Harici Stil Dosyası*/
p { color: #fff; font-size: 2em; } 

3-) Absolute position’ı kötüye kullanmayın
Absolute position’ın doğru kullanımını öğrenmek gerekiyor. Örneğin sayfadaki her elemente absolute position uygulanmamalı. Efektive olarak nasıl kullanılabileceği öğrenilmeli, çünkü bu uygulama CSS için önemlidir.

4-) Hatasız ve dağınık olmamasına özen gösterin
Eğer CSS’niz hatasız ve düzenli olursa bu hem arama motorları için iyidir ayrıca diğer geliştiriciler tarafından daha rahat geliştirilebilir veya düzenlenebilir. Hataları düzeltmek için W3C doğrulamasını kullanabilirsiniz. Mesela Mac ve PC lerde Dreamweaver programı kullanılarak da hatalar kontrol edilebilir.

5-) Her yerde DİV etiketi kullanmayın
Yeni başlayanların yaptığı en büyük hatalardan biri de CSS’nin her yerinde div etiketi kullanmasıdır. Bu durumun sebeblerinden birisi de table’dan div’e geçmedir. Kesinlikle div etiketi kullanmayın demiyorum ancak sayfanın her elementinde kullanılmamalı. Örneğin bir paragraf etiketi ile “p” div etiketi “div” yer değiştirmemelidir.
Yanlış Örnek:

<div id="container">
    <div id="nav">
                <ul id="navlist">
                        <li>Home</li>
                        <li>About</li>
                        <li>Services</li>
                        <li>Contact</li>
                </ul>
    </div>
        <div id="heading"></div>
            <div id="news">News</div>
            <div id="stories">Stories</div>
</div> 

Doğru Örnek:

<div id="container">
    <ul id="navlist">
            <li>Home</li>
            <li>About</li>
            <li>Services</li>
            <li>Contact</li>
    </ul>
        <h1>Heading</h1>
            <p id="news">News</p>
            <p id="stories">Stories</p>
</div> 

Kaynak