For a full comparison of minifiers, jump to https://methodfish.com/Articles/minifiers

MatthiasMullie

This is a demonstration of the css minifier using MatthiasMullie class

Input css:

/*!
 * This is an "important" comment
 * 'Date: 27-27'
 */

@keyframes animating {
    0% {
        top: -50px;
        opacity: 0;
    }

4% {
        top: 20px;
        opacity:  1;
        /* This is a basic // block comment */
    }
}

input.admin[type='search'] {
    width:calc(100% - 4px); /* Can't see why but these seem to behave differently from standard search/text fields - see timesheet.php Contact tab */
    /* something else:0px */;
}
.wrapper {
    grid-template-columns:185px 1fr 1fr;
    grid-template-rows:auto auto   auto auto   1fr auto;
    grid-template-areas:
            "header  header header"
            "heading heading heading"
            "foot foot foot"
            ;
}
.rot {
    transform:  rotate(-10deg);
}
.rot {
    padding:10px   10px 20px 20px;
}
@media screen and (max-width:1600px) {
    .headlines, .sidebar {
        width:calc(100% - 40px)!important;
        background-color:black;
        color:#c98e8e;
    }
}
.rot {
    margin:0px;
    xcolor:red;
}

Output:


/*!
 * This is an "important" comment
 * 'Date: 27-27'
 */
 @keyframes animating{0%{top:-50px;opacity:0}4%{top:20px;opacity:1}}input.admin[type='search']{width:calc(100% - 4px);}.wrapper{grid-template-columns:185px 1fr 1fr;grid-template-rows:auto auto auto auto 1fr auto;grid-template-areas:"header  header header" "heading heading heading" "foot foot foot"}.rot{transform:rotate(-10deg)}.rot{padding:10px 10px 20px 20px}@media screen and (max-width:1600px){.headlines,.sidebar{width:calc(100% - 40px)!important;background-color:#000;color:#c98e8e}}.rot{margin:0;xcolor:red}

Minify time: 0.0027 seconds; 575 bytes 56.37% of original size (from 1020 bytes).