فشرده سازی CSS به کمک PHP

August 29, 2006 at 10:27 am

فشرده سازی CSS روش ماهرانه ای برای ذخیره کمی از پهنای باند، به خصوص برای سایت های پیچیده ای که بیش از هزار خط کد دارند به شمار می رود. سایت های زیادی وجود دارد که به عنوان ورودی کدهای CSS شما را می گیرد و فشرده شده تحویلتان می دهد اما مشکل اینجاست که شما باید فایل فشرده شده را دریافت و مجددا جایگزین کنید و یا اگر بخواهید در آینده فایلتان را ویرایش کنید، یافتن المان ها کمی مشکل تر خواهد بود. جدای از آن پس از افزودن المان های جدید باز هم چاره ای جز فشرده سازی مجدد ندارید.

البته برای من و شما که شاید فایل CSS مان 100 خط کد هم نداشته باشد این روش کمی خنده دار به نظر می رسد اما سایتی را تصور کنید که ده ها فایل CSS دارد، قطعا این روش در کاهش اتلاف وقت توسعه دهنده، موثر خواهد بود.

برای حل مشکلاتی که در فوق ذکر شد، از چند خط کد پی اچ پی برای فشرده سازی اتوماتیک CSS استفاده می کنیم. این متد کار را به این نحو برایمان انجام می دهد: 1) به طور معمول مرورگر کاربر، فایل CSS را درخواست می کند 2) سرور با قدرت PHP کدهای CSS را فشرده می کند 3) در نهایت کمپرس شده CSS، به مرورگر ارسال می شود. همه عملیات بدون اینکه کاربر متوجه شود اتفاق می افتد. بهتر از همه اینکه کدهای CSS شما دست نخورده باقی می ماند و شما به سهولت می توانید آن ها را آپدیت کنید.

ابتدا کدهای زیر را در بالای هر یک از فایل های CSS خود اضافه کنید:

<?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    // remove comments
    $buffer = preg_replace('!/\*&#91;^*&#93;*\*+(&#91;^/&#93;&#91;^*&#93;*\*+)*/!', '', $buffer);
    // remove tabs, spaces, newlines, etc.
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }
?>

خط دوم به مرورگر می گوید که فایل ما از نوع CSS است. بعد آن از ob_start برای بافر کردن خروجی با تابع compress استفاده می کنیم. تابع compress عملیات پاک کردن فضاهای خالی و توضیحات کدها را انجام می دهد. و در نهایت CSS فشرده شده به مرورگر ارسال می شود. سپس تکه کد زیر را در انتهای هر فایل CSS خود اضافه کنید. به عبارتی کدهای CSS شما باید بین دستورات بالا و دستور پایین قرار گیرد:

<?php ob_end_flush();?>

با استفاده از ob_end_flush ابتدا بافر خروجی را می بندد و بعد محتویات بافر را در مرورگر چاپ می کند (در آینده در مورد بافر کردن خروجی و مزایای ان به تفصیل خواهم نوشت) حال اگر قصد دارید بدون تغییر پسوند، فایل را در صفحه فراخوانی کنید کافیست SetHandler را به شکل زیر در فایل .htaccess بکار ببرید. در غیر اینصورت پسوند CSS فایل را به فرمت PHP تغییر دهید، جزئیات این کار قبلا در این پست شرح داده شد. 

<files Your_file_name.css>
  SetHandler  application/x-httpd-php 
</files>

+ کدهای مورد نیاز را می توانید از اینجا دریافت کنید.
+ این مقاله اقتباسی بود از اینجا بعلاوه کاستی و افزودنی های مجاز اینجانب.

دسته: پی اچ پی, سی اس اس | نویسنده: مرتضی الوانی

  1. 9 نظر برای این مطلب ارسال شده است. نظر خود را ارسال کنيد »

  1. 1

    مجتبی دشتی نژاد

    روش خوبیه، ولی اگه کدهامون را به صورت css hacks بنویسیم (که معمولا احتیاج می شه)، اون موقع پاک کردن کامنت های داخل css یعنی نابودی وب سایت!
    :)

    September 7, 2006 at 11:32 am

  2. 2

    مرتضی الوانی

    اصلا در این روش نیازی نیست کامنت ها حذف بشن. ما هر چی هست و نیست رو بین او دو تا کد وارد می کنیم. ائم از کدهای CSS همراه با کامنت هاش. در نهایت در خروجی اون ها رو نداریم.
    فکر کنم کامنت های CSS اونم در موقعی که توضیحی برای متدمان می دهیم فقط بدرد خود طراح بخورد. برای ویزیتور که مهم نیست بداند چه شده؟ یا این متد چه می کند.
    خود طراح هم که قبل از کامپایل به محتویات فایل دسترسی دارد …

    September 7, 2006 at 12:13 pm

  3. 3

    مجتبی دشتی نژاد

    مگه این اسکریپت php کامنتها و فاصله های خالی css را پاک نمی کنه؟ خوب من به وسیله همین کامنتهای css به مرورگرها می فهمونم که کدوم خط css رو بخونن و کدوم رو نخونن… یه چیزی مثل این:
    /* \*/
    * html body #body {
    display: none;
    }
    /* */
    اون موقع اگه کامنتها (یعنی خطوط اول و آخر) پاک شن دیگه این کد css ارزش خودشو از دست می ده و همه مرورگرها می تونن این کد رو بخونن و ترجمه کنن

    September 7, 2006 at 1:45 pm

  4. 4

    مرتضی الوانی

    فرمودید: خوب من به وسیله همین کامنتهای css به مرورگرها می فهمونم که کدوم خط css رو بخونن و کدوم رو نخونن …
    —–
    تا اونجایی که من اطلاع دارم این متد از CSS Hack یعنی استفاده از بک اسلش در کامت ها، منسوخ شده. ولی گفته شما صحیحه و این روش می تونه این متد رو بر هم بزنه.
    اما شیوه معمول برای سایت های بزرگ اینه که کدهای CSS رو جداسازی می کنن. بالفرض المان های گرافیکی رو از المان های بیس کار جدا و در یک فایل دیگه قرار می دن. برای المان هایی که از متدهای CSS Hack استفاده می کنن هم این شیوه خیلی مرسومه. به طوری که این المان ها رو تو یه فایل جدا قرار می دن و اغلب هم بهش نام ie.css یا hack.css می دن. برای جلوگیری از حذف کامت های کارا در CSS Hack می شه از این راه استفاده کرد و در نهایت اون فایل رو از گردونه کمپرس خارج کرد.

    September 7, 2006 at 4:07 pm

  5. 5

    صادق جم

    فراتر از دانش من بود!
    براي خودم متاسفم.
    قول ميدم زود ياد بگيرم!

    September 14, 2006 at 8:07 am

  6. 6

    alone_programmer

    salam
    dorood beshoma az inke inhame ziba neveshtid
    kheili kheili dastetoon dard nakone
    ahsant beshoma
    alie
    gol kashtin
    edame bedin
    shoma mahsharid
    mishe
    be man mail bezanid chand ta site farsi va maghale va pdf va manba yad bedid vase barname nevisy tahte web ba asp va asp.net va php va html va ajax va Csharo.net ba paygahe dade va mafahime khalghe ashyaye dynamic
    va ijade jadval vakhalghe fild va herfeyi va game va AI va va va
    asheghetoonam
    merc
    montazerama

    December 2, 2006 at 3:24 am

  7. 7

    Alvanweb » توضیح نویسی فایل‌های CSS

    […] بهترین گزینه شاید فعال کردن فشرده‌سازی سمت سرور باشد. اگر شما از سرور آپاچی استفاده می‌کنید با مسئول هاست خود در مورد نصب mod_gzip و mod_deflate صحبت کنید. بسیاری از مرورگرهای مدرن می توانند فایل‌های فشرده شده با GZIP را پردازش کنند و آن‌ها را در کسر کوچکی از زمان از حالت فشرده خارج کنند. این ماژول‌های آپاچی می‌توانند تشخصی دهند که آیا مرورگر می‌تواند این قبیل فایلها را پردازش کند یا خیر، اگر بتواند، یک نسخه فشرده شده از فایل را ارسال می‌کنند. فشرده سازی سمت سرور می تواند تا حدود 80 درصد از حجم فایل‌های XHTML و CSS را کاهش دهد، در نتیجه پهنای باند مصرفی را کاهش می‌دهد و صفحات سریع‌تر بارگذاری خواهند شد. اگر شما دسترسی به این ماژول‌ها ندارید، می توانید با استفاده از این آموزش فایل‌هایتان را فشرده کنید. قبلا روش ترکیب PHP در اینجا توضیح داده شده است. […]

    July 14, 2007 at 4:55 pm

  8. 8

    شکیلا

    با سلام و خسته نباشید

    ببخشيد يه سوال داشتم

    چگونه ميتوان در پي اچ پي تگ اينتر را نشان داد يا بهتر بگم زماني كه مطلبي را مينويسم و ميخواهم بقيه مطالب با زدن اينتر به سطر بعد منتقل شود و به همين صورتي كه مطالب رو نوشتم همينگونه مطلب رو در صفحات وب نشان بدهد چي كار بايد بكنم چون مطالبي رو كه مينويسم و ارسال را ميزنم و مطلب داخل ماي اس كيو ال ذخيره ميشود و در ضفحه وب كه نشان داده ميشود همه مطالب پشت سر هم هستن چي كار كنم كه مشكلم رفع بشه

    ممنون ميشم جواب بدين

    August 22, 2007 at 12:37 pm

  9. 9

    محمد جعفر

    خب باید \n ها رو به تغییر بدید. با تابع
    str_replace

    September 7, 2007 at 3:21 pm