Css Kodlarında Php Kodu Kullanmak ve 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;

<?php 
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;}

<?php 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;

<?php 
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?>}
<?php 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"/>

Evet! İsim olarak biraz garip oldu ama artık siz gerekli düzenlemeleri yaparsınız. Htaccess dosyasının nasıl oluşturulacağını bilmiyorsanız o zaman dersi izleyebilirsiniz.
- 20.08.2013 / 21:31:09 0

Sosyal Medya Paylaşım Alanı

Kaynak(lar)

Bunlarda İlginizi Çekebilir

10:53 Php Dersleri
10:48 Php Dersleri

Php ile Dosya Oluşturma | Touch Functionunu Kullanarak

Kategori: Php Dersleri | 03.05.2013
8:59 Css Dersleri

Css @Font-face Kullanımı

Kategori: Css Dersleri | 03.05.2013
22:01 cURL Dersleri

cURL ile Instagram Fotoğraflarını İndirme

Kategori: cURL Dersleri | 20.03.2015
6:53 jQuery Dersleri

jQuery ile Renkli Listeleme Yapımı (odd ve even)

Kategori: jQuery Dersleri | 03.05.2013

Yorum Listesi (3) # YorumYap

  • Abdülkadir Avan (20.08.2013 - 23:03:55)
    Gerçekten çok faydalı bir konu olmuş bilmeyen arkadaşlara burdan hatırlatıyım php dosyasını css dosyası olarak göstermek için bu kodu kullanırken header("Content-type: text/css"); php dosyasında txt olarak göstermek isteyenlerde olabilir mesela robots.txt dosyasında işe yarayabilir o zaman da kodumuzu header("Content-type: text/tadagopie"); olarak eklerseniz php dosyanız txt gibi gözükür :)
  • Developer (26.08.2013 - 20:32:17)
    Hocam merhaba, blogunuzdaki kod penceresi içerisindeki kodlar renkli olan. Onun aynısından istiyorum siz mi yaptınız yoksa hazır var mı *?
  • Furkan (08.12.2013 - 23:36:37)
    Merak ediyorum icnlude('style.php'); olarak çağırınca da işe yarar mı?

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.