Ads keep us online. Without them, we wouldn't exist. We don't have paywalls or sell mods - we never will. But every month we have large bills and running ads is our only way to cover them. Please consider unblocking us. Thank you from GameBanana <3

[PHP] Combining and Minifying CSS

A Tutorial for GameBanana

You can find a mirror of this tutorial here if the formatting gets messed up.

In this tutorial I will be showing how you can easily combine and minify your CSS files using PHP and a tiny addition to your .htaccess file.

First make sure you have all the CSS files you want to process in a directory that your site can access; I always place my static resources in /assets/css/ but it is up to you where you place them. Make a new .PHP file in this directory as well and name it anything you want. Now, we will do some PHP coding. I will add bits of code and explain what they do afterwards:

<?php

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

?>

This piece of code will tell the browser to treat the file as CSS. Now, let's add a custom function:

<?php

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

  function compress($buffer)
  {
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }

?>

What this function does is strip all comments and whitespace/tabs/linebreaks out, causing all code to be put all on one line and saving the user some time when they view your sites.

Next we will need a way to get the content from the stylesheets we want to combine and compress. To do this we will be simply including them in the PHP file like so:

<?php

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

  function compress($buffer)
  {
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }

  include('styles1.css');
  include('styles2.css');
  include('styles3.css');
  include('vendor/styles1.css');

?>

We are almost done with the PHP parts now. If you view the file on your site you will see that it imports the CSS content but doesn't compress them yet. This is because we need to use the function we wrote to do so. To use this function we will be using the ob_start() function. The final code should look like:

<?php

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

  function compress($buffer)
  {
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }

  ob_start("compress");
  include('styles1.css');
  include('styles2.css');
  include('styles3.css');
  include('vendor/styles1.css');
  ob_end_flush();

?>

That last function sends the output buffer and turns buffering off. Leaving this line off could possibly affect the code of your other files so make sure to have it!


Now, the next step is optional but recommended. You can simply link this PHP file in your HTML with <link rel="stylesheet" href="> and it will work fine. But, you can also add a simple line of code to your .htaccess file to be able to rename the PHP file to a CSS file. This is recommended because there is no telling how some browsers will react to a PHP file being used as a stylesheet.

Open your .htaccess file, make sure rewriting is on, and add this line somewhere:

RewriteRule ^URL/TO/script.css?$ URL/TO/script.php [NC]

Now link the script in via <link rel="stylesheet" href="http://website.com/css/script.css"> and it will act just like a real CSS file, basically tricking the browser.


There is one more optional thing you can do that would just make your CSS coding a bit easier. Let's go back into the PHP file and add one line into the function:

<?php

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

  function compress($buffer)
  {
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    $buffer = str_replace("%URL%", "http://YOURWEBSITE.com", $buffer);
    return $buffer;
  }

  ob_start("compress");
  include('styles1.css');
  include('styles2.css');
  include('styles3.css');
  include('vendor/styles1.css');
  ob_end_flush();

?>

What this does is search in all of the stylesheets for %URL% and replaces it with the supplied URL. This makes it simpler to use things like images in your stylesheets. For example:

body{
  background-image("%URL%/images/background.jpg");
}

That actually look like:

body{
  background-image("http://YOURWEBSITE.com/images/background.jpg");
}

I hope you enjoy this tutorial!

Comments

Sign up to access this!
  • Devieus avatar
    Devieus username pic Joined 9y ago
    Moderator
    ONLINE
    93,890 points Ranked 37th
    70 medals 6 legendary 13 rare
    • 1st Place - Tutorial Contest Medal icon
    • 15+ Entries! GameBanana’s Christmas Giveaway 2015 Medal icon
    • Returned 5000 times Medal icon
    • 15+ Entries! GameBanana’s Christmas Giveaway 2016 Medal icon
    • 2017 Top Contributor Medal icon
    • 15+ Entries! GameBanana’s Christmas Giveaway 2017 Medal icon
    access_time 4y
    Posted by Ring-A-Ding Rampage

    Useful stuff. :)

    You need to recheck your formatting on some of the paragraphs. Everything below a point has become one big block of code.


    Fixed.
    Sentinel of the TV remote avatar
    Mantra
    Sentinel of the TV remote
    URL to post:
  • Ring-A-Ding Rampage avatar
    Ring-A-Ding Rampage username pic Joined 8y ago
    Moderator
    PL : 0
    3,487 points Ranked 2317th
    75 medals 10 legendary 20 rare
    • Submitted 60 Sprites Medal icon
    • Thanked 500 submitters Medal icon
    • 15+ Entries! GameBanana’s Christmas Giveaway 2015 Medal icon
    • Submitted 100 Skins Medal icon
    • Reached 100 subscribers Medal icon
    • 15+ Entries! GameBanana’s Christmas Giveaway 2016 Medal icon
    Ring-A-Ding Rampage avatar
    Ring-A-Ding Rampage
    (づ。◕‿‿◕。)づ
    access_time 4y
    Useful stuff. :)

    You need to recheck your formatting on some of the paragraphs. Everything below a point has become one big block of code.

    Erode using Code avatar
    Mantra
    Erode using Code
    URL to post:

Embed

menu
Share banner
Image URL
HTML embed code
BB embed code
Markdown embed code

Announcement

All of my modules are currently down due to server issues caused by money problems. I hope to get this resolved within a week. - urara

Credits

Key Authors
urara avatar
urara username pic Joined 10y ago
Offline
25,008 points Ranked 202nd
34 medals 3 legendary 7 rare
  • Submitted 10 Apps Medal icon
  • Returned 5000 times Medal icon
  • 10 years a member Medal icon
  • 6 years a member Medal icon
  • Submitted 5 Apps Medal icon
  • Submitted 15 Tutorials Medal icon
Tutorial Author

Submitter

urara avatar
urara username pic Joined 10y ago
Not here!
25,008 points Ranked 202nd
34 medals 3 legendary 7 rare
  • Submitted 10 Apps Medal icon
  • Returned 5000 times Medal icon
  • 10 years a member Medal icon
  • 6 years a member Medal icon
  • Submitted 5 Apps Medal icon
  • Submitted 15 Tutorials Medal icon
urara avatar
urara

Creator
Sign up to access this!
Sign up to access this!
Sign up to access this!

Game

Sign up to access this!

Category

Details

Difficulty Level
Beginner

Attributes

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
  • favorite 1
  • remove_red_eye 2.2k
  • mode_comment 2
  • access_time 4y
  • access_time 4y

More from Submitter

menu

More Other/Misc Tutorials