CSS Optimizasyonu İle Sitenizi Hızlandırın

Merhaba arkadaşlar, bu yazımda sizlere CSS Optimizasyonu yaparak sitelerimizi nasıl hızlandıracağımızı basit ama önemli olan bu yollar ile anlatacağım. Başlıyorum.

1-Ortak Özellikte Olan Stilleri Bir Arada Tanımlamak

Aşağıdaki kod satırında aynı özelliğe sahip iki etiket var h1 ve h2.

h1{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:18px;
    font-weight:800;
    color:#039;            
}
h2{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:18px;
    font-weight:800;
    color:#039;            
}

Yukarıdaki kodları optimize ederken aşağıdaki örnekteki gibi virgül (,) operatörünü kullanabilirsiniz.

h1, h2{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:18px;
    font-weight:800;
    color:#039;            
}

2- CSS Compressor İle Kullanılmayan CSS Kodlarını Temizlemek

Kullanılmayan her bir css kodu sitenizin hızını yavaşlatacaktır. Bu neden ile CSS Compressor kullanarak kullanılmayan veya fazlalık kod satırlarını temizleyeceğiz.

Öncelikle bu adresten sitemize giriyoruz. Daha sonra CSS kodlarımızı boş alana ekleyerek Compress butonuna basıyoruz ve işlemin tamamlanmasını bekliyoruz. İşlemimiz tamamlandığında CSS Compressor temizlenen kodları liste şeklinde bize rapor ediyor.

Daha sonra arındırılmış CSS kodlarımızı alıp rahatlıkla kullanabiliriz. Bu yazımda CSS kodlarınızı, dosyalarınızı optimize ederek sitelerinizi hızlandırmak için birkaç ipucu verdim. Umarım yardımcı olabildim.

İyi bloglamalar..

Devamı »

Bir CSS Kodunu Sadece Seçtiğimiz Elemente Uygulama

Merhaba arkadaşlar, web dillerinden devam ediyoruz. Bugün sizlere bir CSS stilini sadece seçtiğimiz elementler de kullanılabilir yapmayı anlatacağım umarım yararlı bir yazı olur. Size öncelikle bir div ve stilin nasıl işe oluşturulduklarını göstereceğim daha sonra ise konumuza geçeceğiz.

<div class="css">aerakman</div>

Yukarıdaki div elementi içinde yer alan class="css", o div elementi için CSS özellikleri belirtmemizi sağlayan bir yoldur. CSS kodlarımızı içeren dosyamızda şu ifade varsa geçerlidir:

.css {
      font: 15px Tahoma, Verdana;
      color: gray;
   }

Nokta (.) ile başlayan bir stil oluşturduk ve adını css olarak verdik. Bu demek oluyor ki class="css" ile belirttiğimiz tüm elementler 15 piksel büyüklüğünde Tahoma yazı tipi ve gri(gray) renginde olacaktır.

Ancak başlıkta da belirttiğim özelliği kullanarak yukarıda ki stil de vermiş olduğum özellikleri seçtiğimiz tek bir element de gerçekleştirebiliriz. Bunun için:

Örneğin, sadece div elementlerin de geçerli olmasını istiyorsak,

div.css {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }

.css olarak adlandırdığımız kodumuzun başına div getirmemiz yeterli olacaktır. Bu sayede .css isimli CSS kodu sadece div elementlerin de geçerli olacaktır.

Devamı »