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;

Rounded Corners ( Oval köşe yapımı)
Web tasarımında oval köşe kullanımı çok yaygındır. Malasef CSS3 öncesine kadar bu işlemi resim kullanarak yapıyorduk. Bu da siteye ekstra bir yoğunluk katıyor, sayfaların boyutları büyüyor ve sitenin geç açılmasına sebep oluyordu.

CSS’de border-radius özelliğini kullanarak kolaylıkla oval köşe oluşturabilirsiniz. Tabi bunun Webkit tarayıcılarda ve firefox’da çalışabilmesi için -moz-border-radius ve -webkit-border-radius kullanmamız gerekmektedir.

.rounded-corners {
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}

Shadows (Gölge efekti verme)
Website hazırlarken gölge efekti vermenin ne kadar zor olduğunu hatırlarsınız? Box-shadow özelliği ile birlikte gölgeli kutular yapmak artık çok kolay!

CSS’de ise text-shadow özelliğini kullanarak birşeyler yapmaya çalışıyorduk. Şimdi box-shadow özelliğinin nasıl kullanıldığını görelim

box-shadow: 1px 1px 7px #2D1D1D;

Sizinde göreceğiniz üzere 4 farklı değer alıyor. bunlardan ilki yatay derinliği, ikincisi dikey derinliği, üçüncüsü ise gölge derinliğini ve son olarak sonuncusu ise gölgenin rengini tanımlar.
Border-radius özelliğinin kullanımında olduğu gibi , burada da -moz ve -webkit- önekleri kullanmamız gerekiyor.

box-shadow: 1px 1px 12px #2D1D1D;
-moz-box-shadow: 1px 1px 12px #2D1D1D;
-webkit-box-shadow: 1px 1px 12px #2D1D1D;

Transparency with RGBA and Opacity (RGBA ve Saydamlık verme)
Saydamlık değerlerine bakacak olursak 0 ile 1 arasında değer alabildiğini görürüz. Eğer 0 olursa tamamen şeffaf eğer 1 olursada tamamen saydam olmayan elde edilmiş oluyor. Örnek verecek olursak da kutuyu yarı saydam yapmak istiyorsak %50 şeffaflık vermek istiyoruz ki bu da 0.5′e tekabül eder. Şu şekilde yazılır;

opacity: 0.5;

Peki ya artalan resmini saydam yapmak istiyorsam ne olacak? Meraklanmayın RGBA ile yapabilirsiniz!

RGB CSS’in zaten eski versiyonlarında kullanılıyordu. Sırasıyla red (kırmızı), green (yeşil), blue (mavi) değerlerini alıyordu. RGBA ise A ile genişletilmiş hali olup A ise alpha’dan geliyor manasıda şeffaflık. Şu şekilde kullanabilirsiniz;

background: rgba(156, 87, 88, 0.5);

Kutunun rengi falan aynı kalıyor, sadece bu özellik artalan resmine etki ediyor. Ayrıca gölge efekti de saydamlıktan etkilenmiyor.

Border Images (Kenarlık Resimleri)
Border images özelliği CSS3′ün yeni özelliklerinden biri. Eskiden kenarlık yapmak istediğimizde resim kullanıyorduk ama CSS3 sayesinde istediğimiz şekilde yükseklik, genişlikler verebileceğiz. Kullanımı hakkında dah fazla bilgi almak isterseniz Border-image: using images for your border adlı yazıyı okuyabilirsiniz.

Bu yazımızda çok az örnekten bahsedebildik, ama bunlar sayesinde çok güzel şeyler ortaya çıkabilir. CSS3 bize daha fazlasını sunmaktadır, deneyin siz de neler yapabileceğinizi göreceksiniz.
Kaynak

CSS Drive – Hem temel hem de gelişmiş optimizasyon modülü mevcut. Testlerimde herkes ikisini de kullandım gelişmiş de sadece birkaç tane daha seçenek koymuşlar o kadar. Aracı kullabilmeniz için Css kodunuzu direkt yapıştırabiliyorsunuz, upload etme şansınız ne yazık ki yok. 3 tane sıkıştırma seçeneğiniz var bunlardan “normal” seçmeniz daha makul, diğerleri tekrar düzenleme esnasında sıkıntı oluşturabilir.

CSS Compressor – Size neleri sıkıştırabileceğine dair seçenekler sunmuş. Güzel ve basit bir arayüze sahip. Ciddi manada çok hızlı çalışıyor ve sonuçları kolayca gösteriyor. Ayrıca size bir mesaj kutusunda nerelerde değişiklik yapmanız gerektiğine dair bilgi veriyor.

CSS Optimizer – Bu araç test sonuçları arasında en iyisi olarak kabul edileblir. Kulanımı en kolay olan denilebilir. Ayrıca css dosyanızı ister bilgisayarınızdan yükleyin, ister manuel olarak isterseniz direkt url adresini yazabilirsiniz. Ayrıca sitede neden optimize etmemiz gerektiğinden baya bahsedilmiş ve bazen çıkan sonuçların okunabilir olmadığından bu yüzden değişiklikleri her zaman orijinal dosya üzerinden yapıp daha sonra sıkıştırıp sunucuya yüklememiz önerilmiş. Tavsiye edilir!

Clean CSS – Arayüz açısından en beğendiğim bu oldu. Ayrıca çok iyi çalışıyor ve birçok dil seçeneği mevcut. Ancak türkçe dil seçeneği henüz eklenmemiş. Sonuçların renkli olması ve sıkıştırma esnasında baya seçenek sunmasından dolayı kullanılabilitesi yüksek.

PHP Insider – Kullanım açısından en basiti ise bu araç. Sadece 2 tıkla sıkıştırma işlemini gerçekleştirebiliyorsunuz. Ancak malasef ki gelişmiş seçenekleri mevcut değil.

SevenForty – Bu araç da iyi sonuçlar veriyor. Dezavantajlarından birisi siteye sadece css dosyanı upload edebiliyorsun. Ayrıca çok basit sıkıştırma seçenekleri sunuyor.

Lottery Post – Testlerdeki en basit ve etkili ikinci araçtır.  Çok güzel sonuçlar veriyor ancak sıkıştırma seçeneği yok ama çok güzel arayüzü var, css kodunuzmu manuel olarak yapıştırabiliyorsunuz. Ayrıca araç JavaScript içinde çalışabiliyor.

Arantius – Bu araç diğer güzel sıkıştırma yapanlardan biri. Çok fazla seçeneği olmamasına rağmen aşırı derecede hızlı. Deneyerek nasıl çalıştığını görebilirsiniz.

Flumpcakes – Test sonuçlarına göre en kötüsü bu araçtır. Css kodunuzu gene de optimize eder, azaltır ancak default ayarları sonucu yapılan sıkıştırma diğerlerine nazaran yeterli gelmez. Burada da Css kodunuzu ister direkt yapıştırın ister bulunduğu yerin url’sini yazın.

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