PHP Classes
elePHPant
Icontem

PHP CSS Optimizer: Optimize CSS and make it browser independent

Recommend this page to a friend!
  Info   View files Example   View files View files (26)   DownloadInstall with Composer Download .zip   Reputation   Support forum (2)   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2016-06-11 (3 years ago) RSS 2.0 feedStarStarStarStar 77%Total: 565 All time: 5,291 This week: 259Up
Version License PHP version Categories
css-optimizer 4.6Custom (specified...5.4HTML, PHP 5, Performance and optimiza..., P...
Description Author

This class can optimize CSS and make it browser independent.

It can parse CSS files and rewrite them to remove needless spaces and line breaks.

Encoded color values can also be optimized to use less characters, like for instance #00ff77 as #0f7, remove units for properties with value 0, remove leading 0 for decimals less than 1.

The class can also inline images and fonts using data URLs with base64 encoded data and converts rgb and hsl colors to their hex values.

It can also insert properties with browser specific prefixes, so they can work equally with different browsers.

The resulting CSS can be stored in cache files to avoid needless reprocessing.

Innovation Award
PHP Programming Innovation award nominee
April 2016
Number 10


Prize: One downloadable copy of PhpED Professional
CSS style sheets are often served separately but they are needed to render pages correctly. The smaller those CSS files can be the better. So optimizers like this class can be very useful.

On the other hand, many sites use CSS style properties that are not standardized. They are supported by different browsers but with different name prefixes.

This class addresses this problem by adding multiple style properties with different names to be well supported by different browsers.

Manuel Lemos
  Performance   Level  
Name: Victor V. Nabatov <contact>
Classes: 2 packages by
Country: Russian Federation Russian Federation
Age: ???
All time rank: 272075 in Russian Federation Russian Federation
Week rank: 964 Up36 in Russian Federation Russian Federation Up
Innovation award
Innovation award
Nominee: 1x

 

Details

CSS parser and optimizer.

Reads css code, automatically inserts browser-specific prefixes and compresses the code. There is a possibility of caching the result.

Feachures

Handles both external and embedded styles.

  • Handles css __@import__ directive thus multiple files can be combined into one.
  • Handles rules (ex. __@keyframes__), pseudoelevents (ex. __::placeholder__).
  • Automatically inserts browser-specific prefixes for css properties.
  • Replaces image references within CSS with base64_encoded data.
  • Replaces fonts (.woff, .woff2, .eot, .ttf, .svg) references within CSS rule __@font-face__ with base64_encoded data.
  • Optimizes the color settings (#00ff77 => #0f7) and property values (0px => 0, -0.5 => -.5).
  • Converts rgb(43, 92, 160), rgb(16.9%, 36.1%, 62.7%), hsl(214.9,57.6%,39.8%) to hex value (#2b5ca0).
  • Removes two or more consecutive spaces.
  • Removes the spaces, if a curly bracket, colon, semicolon or comma is placed before or after them.
  • Removes the last semicolon in the list of properties of the selector or the rule.
  • Removes newline characters and tabs.
  • Writes and reads the compiled data into/from cache.

Requirements

This program requires PHP 5.4+

Example

/styles.css/

/This will be prefixed/
input[type="search"]::placeholder {
    color: #ffdd55;  /This will be reduced to #fd5/
}
.some_class {
    background: #1e5799;

    /This will be prefixed/
    background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);

    border: #000000 solid 1px; /This will be reduced to #000/

    /This will be prefixed/
    border-radius: 5px;

    /This will be prefixed/
    box-sizing: content-box;

    margin: 0em 5px;  /This will be replaced with 0 ( 0em; )/
    padding: 5px 0px; /This will be replaced with 0 ( 0px; )/

    /This will be prefixed/
    transition: height 0.25s ease 0.1s; /This will be reduced to .25s and .1s/

    /This will be prefixed/
    @keyframes eye {
        90% { transform: none; }
        95% { transform: scaleY(0.1); }
    }
}

Result

input[type="search"]::-webkit-input-placeholder{color:#fd5} input[type="search"]::-moz-placeholder{color:#fd5} input[type="search"]::-ms-input-placeholder{color:#fd5} input[type="search"]::placeholder{color:#fd5}

.some_class{ background:#1e5799; background:-webkit-linear-gradient(to bottom,#1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background:-moz-linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background:-o-linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background:linear-gradient(to bottom,#1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); borrder:#000 solid 1px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; margin:0 5px; padding:5px 0; -webkit-transition:height .25s ease .1s; -moz-transition:height .25s ease .1s; -o-transition:height .25s ease .1s; transition:height .25s ease .1s; @-webkit-keyframes eye{ 90%{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none} 95%{-webkit-transform:scaleY(0.1);-moz-transform:scaleY(0.1);-ms-transform:scaleY(0.1);-o-transform:scaleY(0.1);transform:scaleY(0.1)}} @-moz-keyframes eye{ 90%{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none} 95%{-webkit-transform:scaleY(0.1);-moz-transform:scaleY(0.1);-ms-transform:scaleY(0.1);-o-transform:scaleY(0.1);transform:scaleY(0.1)}} @-o-keyframes eye{ 90%{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none} 95%{-webkit-transform:scaleY(0.1);-moz-transform:scaleY(0.1);-ms-transform:scaleY(0.1);-o-transform:scaleY(0.1);transform:scaleY(0.1)}} @keyframes eye{ 90%{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none} 95%{-webkit-transform:scaleY(0.1);-moz-transform:scaleY(0.1);-ms-transform:scaleY(0.1);-o-transform:scaleY(0.1);transform:scaleY(0.1)}}}

After finishing (removing newlines) the data file will be placed in one line.

The original code: (https://github.com/Greenray/css-optimizer). Copyright (C) 2016 Victor Nabatov <greenray.spb@gmail.com>

  Files folder image Files  
File Role Description
Files folder imageapi (6 files, 2 directories)
Files folder imageassets (1 file, 3 directories)
Files folder imagecache (3 files)
Accessible without login HTML file CC-BY-SA-LICENSE4.0.html Lic. License
Plain text file css.class.php Class Main class
Accessible without login Plain text file example.html Data Example
Accessible without login Plain text file example.php Example Example
Accessible without login Plain text file readme.md Doc. Description

  Files folder image Files  /  api  
File Role Description
Files folder imageresources (1 file)
Files folder imagetemplate (3 files)
  Accessible without login HTML file deprecated.html Doc. css-optimizer api
  Accessible without login HTML file index-all.html Doc. css-optimizer api
  Accessible without login HTML file index.html Doc. css-optimizer api
  Accessible without login Plain text file style.css Doc. Style for ccs-optimizer api
  Accessible without login HTML file todo.html Doc. css-optimizer api
  Accessible without login HTML file tree.html Doc. css-optimizer api

  Files folder image Files  /  api  /  resources  
File Role Description
  Accessible without login Image file nested.png Icon Icon image

  Files folder image Files  /  api  /  template  
File Role Description
  Accessible without login HTML file css.html Doc. Documentation
  Accessible without login HTML file package-summary.html Doc. Documentation
  Accessible without login HTML file package-tree.html Doc. Documentation

  Files folder image Files  /  assets  
File Role Description
Files folder imagecss (3 files)
Files folder imagefonts (2 files)
Files folder imageimages (2 files)
  Accessible without login Plain text file config.ini Data Auxiliary data

  Files folder image Files  /  assets  /  css  
File Role Description
  Accessible without login Plain text file main.css Data Auxiliary data
  Accessible without login Plain text file normalize.css Data Auxiliary data
  Accessible without login Plain text file style.css Data Auxiliary data

  Files folder image Files  /  assets  /  fonts  
File Role Description
  Accessible without login Plain text file readme.txt Doc. Documentation
  Accessible without login Plain text file scriptina-webfont.svg Data Auxiliary data

  Files folder image Files  /  assets  /  images  
File Role Description
  Accessible without login Image file CC-BY-SA-LICENSE4.0.png Icon Icon image
  Accessible without login Image file smoke.gif Icon Icon image

  Files folder image Files  /  cache  
File Role Description
  Accessible without login Plain text file assets.css.main.css Data Auxiliary data
  Accessible without login Plain text file assets.css.normalize.css Data Auxiliary data
  Accessible without login Plain text file assets.css.style.css Data Auxiliary data

 Version Control Unique User Downloads Download Rankings  
 100%
Total:565
This week:0
All time:5,291
This week:259Up
User Ratings User Comments (2)
 All time
Utility:100%StarStarStarStarStarStar
Consistency:95%StarStarStarStarStar
Documentation:87%StarStarStarStarStar
Examples:91%StarStarStarStarStar
Tests:-
Videos:-
Overall:77%StarStarStarStar
Rank:76