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>