Php ile Css Kodlarını Sıkıştırma

Bu yazılı makalemde bir css dosyamızda nasıl php kodlarının kullanılacağını ve bundan sonra php ile css kodlarının nasıl sıkıştırılacağını anlatacağım. Site optimizasyon sitelerinde çoğumuzun css dosyasının boyutu sorun olmuştur ve sıkıştırarak şu kadar yer tasarruf ediyorsunuz diyorlar fakat bir çözüm yolu üretmiyorlar. Bu yolu aramak yerine sıkıştırma işlemini kendim hazırlarım dedim ve bunu php ile yaptım.

Artık php kodları ile css dosyalarınızı sıkıştırıp daha az yer kaplamasını sağlayabilirsiniz. Bu sıkıştırma sadece site görüntüleyenlere işleyeceğinden dolayı, sitede yapacağınız değişikliklerde css dosyanıza baktığınızda bir karmaşa ile karşılaşmayacaksınız.

Şimdi ilk olarak; css kodları içinde php kodlarımızı kullanmak ve sıkıştırmak için bir php dosyası oluşturuyoruz. Bunun için css.php dosyası oluştursak yeterli olacaktır.

Css kodlarımızı kullanacağımız php dosyasını oluşturduktan sonra ilk yapmamız gereken şey php dosyamızın artık bir css dosyası olduğunu göstermemiz gerekiyor. Yani bir header belirlemesi yapacağız. Onun için şöyle bir kod girmek yeterli olacaktır.

header("Content-type: text/css");

Evet! Bu kodu en üste yazdığımızda artık php’yi bir css dosyası yapmış olduk. Php dosyası olduğundan dolayı şimdi istediğimiz gibi php kodları yazabiliriz. Yani şöyle bir kod yazmak hiçbir sorun yaratmayacaktır;

.deneme{font-size:<?=rand(10,30)?>px}

Yukarıdaki gibi basit bir şey yaptığımızda font boyutu değeri rand ile rastgele bir şekilde tanımlanan ebatta değişecektir. Tabi bu küçük bir örnek dilerseniz siz veri tabanından bile veri çekip kullanabilirsiniz. Bunu detaylı anlatmaya gerek yok sanırım yukarıdaki koddan her şey anlaşılıyor.

Şimdi gelelim Php ile nasıl Css kodlarımızı sıkıştıracağımıza. Bunun için aslında regex işlemlerini bilmek gerekiyor. Şimdi bu işlemi yapabilmek için bir function oluşturdum ahan da onda şöyle bir şey;

function cssduzenle($a){
// Yorum Satırlarını Temizle
$a = preg_replace('!/\*[^*]*\*+([^">[^*]*\*+)*/!', '', $a);
// Gereksiz Boşlukları Temizle
$a = str_replace(array("\r\n","\r","\n","\t",'  ','   ','    '), '', $a);
return $a;
}

Yukarıdaki kodda css dosyamızda boşuna yer kaplatan gereksiz değerleri silmiş oluyoruz. Biraz bakınırsanız aslında ne gibi temizleme yapıldığını görebilirsiniz.

Şimdi Bu Fonksiyonu Nasıl Kullanacağız?

Hemen bunun için yukarıda belirlediğimiz header’dan sonra şu aşağıdaki değeri yazıyoruz. Böylece oluşturduğumuz fonksiyon işleme geçmiş oluyor.

ob_start("cssduzenle");

Yeeep! Yukarıdaki koddan sonra functionu yazınız ve php tagını kapatınız sonrasında ise css kodlarınızı yazınız ve ardından bir php tagı daha açıp altına şunu yazmanız yeterli olcaktır

<?php ob_end_flush();?>

Böylece işlemimiz tamamlanmış olacaktır. Şimdi bu sıkıştırma işlemini bir toplamak gerekirse (uğraşmaktan acizler için) ; yukarıdaki işlemlerimizin son hali şu şekilde olmaktadır;

header("Content-type: text/css");
ob_start("cssduzenle");
function cssduzenle($a){
// Yorum Satırlarını Temizle
$a = preg_replace('!/\*[^*]*\*+([^">[^*]*\*+)*/!', '', $a);
// Gereksiz Boşlukları Temizle
$a = str_replace(array("\r\n","\r","\n","\t",'  ','   ','    '), '', $a);
return $a;
}
 
// Css Kodları burada olacak Örnek olarak
.nivoSlider img {position:absolute;height:300px;top:0px;left:0px;}
#w-populer-yazi{display:block;}
.comment-content code{background:#ccc;display:block;padding:10px;font-style:italic}
.comment-content ol li{border:none!important;}
.comment-content ol{list-style:decimal!important;}
 
ob_end_flush();

Yukarıdaki gibi yazmamız yeterli olacaktır. Burada css kodlarını düzgün yazmak gibi bir derdiniz yok istediğiniz gibi yorum satırları ve boşluklar kullanabilirsiniz. Yazdığınızda dosya boyutu fazla olacaktır fakat okuma esnasında sıkıştırma aktif olacağından dolayı sitenize gelenler süper hızda bir etki görecektir.

Css kodlarıyla birlikte php kodlarını da kullanmak istersek o zaman şöyle bir şey yapabiliriz;

header("Content-type: text/css");
ob_start("cssduzenle");
function cssduzenle($a){
// Yorum Satırlarını Temizle
$a = preg_replace('!/\*[^*]*\*+([^">[^*]*\*+)*/!', '', $a);
// Gereksiz Boşlukları Temizle
$a = str_replace(array("\r\n","\r","\n","\t",'  ','   ','    '), '', $a);
return $a;
}
 
// Css Kodları burada olacak Örnek olarak
$kirmizi = "red";
$siyah = "#000";
.deneme{background-color:<?=$kirmizi?>;color:<?=$siyah?>}
ob_end_flush();

Yukarıdaki gibi istediğimiz şekilde php kodlarını kullanabiliriz. Dediğim gibi veri tabanını da kullanarak bilgileri veri tabanından seçebiliriz. Tabi sadece renk değil her türlü işlem yapılmaktadır

Css.php Dosyasının Diğer Sayfalarda Kullanımı, Dahil Edilmesi
Bu oluşturduğumuz php dosyasını style olarak sayfamızda şöyle çağırabiliriz;

<link rel="stylesheet" href="css.php"/>

Yukarıdaki gibi kullandığımızda; sanki bir css dosyasını çekiyormuş gibi iş yapacaktır nede olsa header olarak artık sen bir css dosyasısın demiştik. Ha ben böyle php li kullanmak istemiyorum diyorsanız o zaman bunu .css olarak göstere biliriz. Bunun için .htaccess dosyası oluşturmamız ve içerisine şöyle yazmamız gerekmektedir;

RewriteEngine on
RewriteRule ^css.css$ css.php

Yukarıdaki gibi yazdığımızda artık css.php dosyamız, css.css olarak görünecektir. Böylelikle css dosyamızı artık şu şekilde çağırabileceğiz;

<link rel="stylesheet" href="css.css"/>