Php İle CSS İçerisinde Değişken Kullanımı ve Sıkıştırma

25 Temmuz 2012 Web Tasarım

Bu yazıda PHP ile CSS içinde değişken tanımlama, CSS’i sıkıştırma ve önbellekleme (caching) işlemi nasıl yapılır onlardan bahsedeceğim. CSS üzerinde değişken tanımı fazla gerekmesede bazen ihtiyaç duyulabiliyor. CSS3’teki Calc özelliği mükemmel olmasada bize matematiksel işlem yapabilmemiz için olanak sağlıyor. Fakat tüm tarayıcılarda desteklenmemesi gibi eski yönleri var. CSS içinde değişken tanımına ihtiyaç duymasanız bile sıkıştırma ve önbellekleme özelliği kullanabilirsiniz. Eğer CDN kullanıyorsanız ya da site resimlerini bir subdomainde tutuyorsanız. Resim tanımı gerektiren CSS tanımlamalarında sürekli

Background: url('http://img1.muhammedbilici.com/images/bg.jpg');

tanımı yapmak sizi uğraştıracaktır. Bunun yerine resimlerin tutulduğu “http://img1.muhammedbilici.com/images”   klasörünü bir değişken olarak tanımlayarak, sürekli uzun adresi yazmak yerine değişkeni yazarak daha kolay kullanım sağlayabilirsiniz.

Background: url('<?php echo $resimk ?>/bg.jpg');
/* YA DA */
Background: url('<?=$resimk ?>/bg.jpg');

Bu kullanımın işinize yaramayacağını düşünüyorsanız bile sıkıştırma ve önbellekleme kısmını kullanarak stil dosyalarının daha hızlı yüklenmesini sağlayarak sitenizin daha hızlı açılmasını sağlayabilirsiniz. Bu sayede sitenize giren kullanıcı stil dosyasını birkez yükleyecek sonraki girişlerinde stil dosyası önbellekte bulunduğu için site daha hızlı yüklenecektir.

Stil.php adında bir dosya oluşturun.

Header ve Önbellekleme

<?php
 ob_start ("ob_gzhandler"); //Sıkıştırma
 header("Content-type: text/css; charset=UTF-8)"; // CSS Headeri
 header("Cache-Control: must-revalidate"); //önbellekleme
 $offset = 60 * 60 ; //önbellek süresi
 $ExpStr = "Expires: " .
 gmdate("D, d M Y H:i:s",
 time() + $offset) . " GMT";
 header($ExpStr);
?>

Değişken Tanımı:

<?php

$site = 'http://img.siteniz.com'; //resimlerin bulunduğu subdomain
$linkR = '#33ccff'; //linkler için tanımladığımız renk
$arkaPlanArray = array("a.jpg","b.jpg","c.jpg","d.jpg"); //Arkaplanlar için Dizi
$arkaPlan = $arkaPlanArray[array_rand($arkaPlanArray)]; // Her seferinde rastgele bir arkaplan gelsin diye array_rand fonsiyonunu kullandım.
?>

Değişkenlerin Kullanımı:

#header {
 Background: url("<?php echo $site; ?>/images/<?php echo $arkaPlan; ?>") no-repeat;
}

a {
 color: <?php echo $linkR; ?>;
}

Oluşturulan Stil.php nin sayfaya eklenmesi:

 <link rel='stylesheet' type='text/css' href='stil.php' />

Dezavantajlar ve Hatalar:

  • Önbellekleme yapıldığı için CSS üzerinde yaptığınız değişiklikler kullanıcının Önbelleği yenilenmediği sürece görüntülenmez.
  • Stil dosyası sayfaya .php olarak eklendiği için bazı eski tarayıcılarda desteklenmez. Çözüm ise .htaccess ile php uzantısı .css gibi göstermektir.

Kaynaklar:
http://css-tricks.com/snippets/css/compress-css-with-php/
http://css-tricks.com/css-variables-with-php/

YAZAR HAKKINDA

1992 yılında Erzurum’da doğdum. Ankara’da yaşıyorum. Web tasarım ve programlama alanından 2010′da mezun oldum. Şuan Konya Selçuk Ünv. Bilgisayar Programcılığı bölümün...

TAKİPTE KALIN

Güncellemeleri almak için e-posta bültenine abone olun.

Yorum Yapın

Bir Cevap Yazın

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

Sponsor Reklamlar