- Don't modify strings (
content: "..."
,font-family: '...'
) - Remove all CSS comments (ex:
/* ... */
) - Remove all unnecessary spaces, tabs and line breaks (ex: around
+ > ~ ; : , ( ) { } /
)- Keep spaces before
:
in selectors (ex:* :before
!=*:before
) - Keep spaces around
+
and-
incalc(...)
(but not in nth-child and nth-of-type)
- Keep spaces before
- Remove all unnecessary
;
(ex:a{color:red;}
) - Remove all unnecessary
*
in CSS selectors (ex:*:before
=>:before
) - Remove leading and trailing zeros (ex:
0.1%, 1.0%, 0.0px
) - Remove units after zero (ex:
0px 0rem 0% 0turn 0vmax 0dpi
)- Keep
%
after zero in parenthesis (ex:hsl(123,0%,0%)
)
- Keep
- Convert
-0
in0
- Convert rgba colors in rgb (ex:
rgba(255, 0, 0, 1)
=>rgb(255, 0, 0)
) - Convert
rgba(0,0,0,0)
intransparent
- Convert rgb colors in hex (ex:
rgb(255, 0, 0)
=>#FF0000
) - Minify 6-digit hex colors to 3-digit hex colors if possible (ex:
#FF0000
=>#F00
) - Replace hex colors with shorter names (ex:
#F00 => red
) - Remove empty rules and empty media queries
- Remove unnecessary quotes in
url("...")
orfont-family: "..."
, but notcontent: "..."
) - Replace font-weight values (ex:
normal
=>400
,bold
=>500
) - Simplify
nth-of-type
andnth-child
:nth-child(1)
=>first-child
nth-child(even)
=>nth-child(2n)
nth-child(2n+1)
/nth-child(2n-1)
=>nth-child(odd)
- Remove
http(s):
in URLs
/** | |
Mini CSS Minifier 2017 | |
test file | |
**/ | |
/* remove spaces and line breaks around "{" and "}" */ | |
.braces { | |
color:#001 | |
} | |
/* remove spaces after ":" */ | |
.colon { color: #002 } | |
/* remove spaces around ";" */ | |
.semicolon { color: #003 ; background: #003 } | |
/* remove spaces around "," */ | |
.class1 , .class2 { color: #004 } | |
/* remove spaces around "+" */ | |
.class1 + .class2 { color: #005 } | |
/* remove spaces around ">" */ | |
.class1 > .class2 { color: #006 } | |
/* remove spaces around "~" */ | |
.class1 ~ .class2 { color: #007 } | |
/* remove spaces around "(" and ")" */ | |
.parenthesis { background: url ( bg.jpg ), url ( "bg.png" ) #008 } | |
/* remove spaces before "@"and "!" */ | |
@media (screen) { a { color: #009 !important } } | |
@media (print) { a { color: #009 !important } } | |
/* remove semicolon before "}" */ | |
.trailing_semicolon { color: #010; } | |
/* Remove unnecessary "*" before ":" or ";" or after "{" */ | |
*, *:before, *:after { color: #011; } | |
/* Preserve space before ":" in selectors */ | |
body *::placeholder :first { ;;; color: #012 ; ; ; } | |
/* Remove spaces before ":" when it follows ""}" | |
:first { color: #013 } | |
/* Remove comments in rules */ | |
.comment { color: #014; /* comment */ color: #014 /* | |
multiline comment | |
*/ ; } | |
/* don't remove spaces between selector parts */ | |
a .b #c d { color: #015; } | |
/* Keep one space around space-separated values */ | |
.digits { margin: 0 -2px 0% 0 ; box-shadow: 0 2px #000 inset ; } | |
/* remove leading and trailing zeros */ | |
.leading_zero { border: 0.11em; margin: 11.0px 0.11px 0.011px 0.0px } | |
/* remove units after zero */ | |
.zero_unit { | |
width: 0px; | |
width: 0in; | |
width: 0cm; | |
width: 0mm; | |
width: 0em; | |
width: 0rem; | |
width: 0pt; | |
width: 0pc; | |
width: 0ex; | |
width: 0ch; | |
width: 0vw; | |
width: 0vh; | |
width: 0vmin; | |
width: 0vmax; | |
width: 0deg; | |
width: 0rad; | |
width: 0grad; | |
width: 0turn; | |
width: 0%; | |
} | |
@media screen and (min-resolution : 0dpi) { .example { color: red; } } | |
/* More tests with zeros */ | |
.more_zero { border: 0.11em; margin: .0px 0px 0 0.0 0.0px; padding: .0 1.0px 1.0em 1%; } | |
/* don't remove "%" after "0" in these cases (but still remove ".0") */ | |
.zero_percent { background: hsl(111, 0%, 0%); color: hsl(222, 0.0%, 1.0%); } | |
@keyframes zero_percent { | |
0% { background: red } | |
} | |
/* Remove "-" before 0, and "+" before any number */ | |
.sign { margin: -0 +0 -10px +10px; padding: -0px -0.0px -.0px +0px; } | |
/* Convert rgb in hexadecimal */ | |
.rgb { color: rgb(0, 11, 222); background: RGB(111, 22, 3) ; } | |
/* Minify haxadecimal colors (where applicable) */ | |
.hexadecimal { color: #123456; background: #113355 } | |
/* Convert RGB to minified hexadecimal colors (where applicable) */ | |
.rgb + .hexadecimal { color: rgb(51, 102, 153) } | |
/* Remove empty rules / media queries / both */ | |
.empty { /* nothing */ ; /* still nothing */ ; } | |
@media (min-resolution: 100dpi) { } | |
@media (min-resolution: 100dpi) { | |
.empty { } | |
} | |
/* For IE < 9: keep a space between closing parenthesis and letters */ | |
.ie { background: url(bg.jpg) no-repeat } | |
/* Don't alter strings, like content */ | |
.content:after { content: "lol; a ( b ) * { : } "} | |
.content:after { content: 'lol; a ( b ) * { : } '} | |
/* Remove URL/font-family quotes */ | |
.url { background: url("http://test/test/png") } | |
.url { background: url('./test.png') } | |
.font { font-family: "Arial";} | |
/* Replace bold names with numbers (normal: 400, bold: 500) */ | |
.weight { font-weight: normal } | |
.weight { font-weight: bold } | |
/* Replace hex colors with names */ | |
.azure { color: #F0FFFF; color: #f0ffff; } | |
.beige { color: #f5f5bc } | |
.bisque { color: #ffe4c4 } | |
.brown { color: #a52a2a } | |
.coral { color: #ff7f50 } | |
.gold { color: #FFD700; } | |
.gray{ color: #808080; } | |
.grey { color: #808080; } | |
.green { color: #008000 } | |
.indigo { color: #4b0082 } | |
.ivory { color: #4b0082 } | |
.khaki { color: #f0e68c } | |
.linen { color: #faf0e6 } | |
.maroon { color: #800000 } | |
.navy { color: #000080 } | |
.olive { color: #808000 } | |
.orange { color: #FFA500 } | |
.orchid { color: #DA70D6 } | |
.peru { color: #CD853F } | |
.pink { color: #FFC0CB } | |
.plum { color: #DDA0DD } | |
.purple { color: #800080 } | |
.red { color: #FF0000; } | |
.red { color: #F00; } | |
.salmon { color: #FA8072 } | |
.sienna { color: #A0522D } | |
.silver { color: #C0C0C0 } | |
.snow { color: #FFFAFA } | |
.tan { color: #D2B48C } | |
.teal { color: #008080 } | |
.tomato { color: #FF6347 } | |
.violet { color: #EE82EE } | |
.wheat { color: #F5DEB3 } | |
/* RGB => HEX6 => HEX3 => name */ | |
.red { color: rgb(255, 0, 0) } | |
/* Remove space before ":" in rules only (not selectors) */ | |
.colon :after { color : #999 } | |
/* Keep space after ")" for old IE except before ";" or "}" */ | |
.ie { background : url( ie.png ) #999 } | |
.ie { background : url( ie.png ) no-repeat } | |
.ie { background : url( ie.png ) ; color: #999 } | |
.ie { background : url( ie.png ) ; } | |
.ie { background : url( ie.png ) } | |
/* Remove spaces before # in properties (but not in selectors) */ | |
.test1 #id { box-shadow: 1px 1px #111} | |
/* More spaces to remove */ | |
@media screen and (monochrome) and not (min-aspect-ratio : 1 / 1) { .example { color: red; } } | |
@media (min-width: 500px) { @media (min-height: 500px) { :root { background: lime; } } } | |
\64 \69 \76 { \63 \6f \6c \6f \72 : \72 \67 \62 \61 \28 \32 \35 \35 \2c \30 \2c \30 \2c \2e \37 \35 \29 } | |
/* More spaces not to remove (around "+" and "-" in calc) */ | |
.calc { width: calc((1px + 1px - 10% + 2vmax) / 2) } | |
/* remove leading zeros */ | |
.leading_zero { border: 0.11em } | |
/* Convert rgba in rgb (where applicable) */ | |
.rgba { color: rgba(255, 0, 0, 1); } | |
/* Convert rgb in hexadecimal */ | |
.rgb { color: rgb(0, 11, 222); background: RGB(111, 22, 3) } | |
/* Minify haxadecimal colors (where applicable) */ | |
.hexadecimal { color: #123456; background: #113355 } | |
/* Convert RGB to minified hexadecimal colors (where applicable) */ | |
.rgb + .hexadecimal { color: rgb(51, 102, 153) } | |
/* Remove empty rules */ | |
.empty { /* nothing */ ; /* still nothing */ ; } | |
/* For IE < 9: keep a space between closing parenthesis and letters */ | |
.ie { background: url(bg.jpg) no-repeat } | |
/* Don't alter strings, like content */ | |
.content:after { content: "lol; a ( b ) * { } "} | |
.content:after { content: 'lol; a ( b ) * { } '} | |
/* Remove URL/font-family quotes */ | |
.url { background: url("http://test/test/png") } | |
.url { background: url('./test.png') } | |
.font { font-family: "Arial"; } | |
/* Replace bold names with numbers (normal: 400, bold: 500) */ | |
.weight { font-weight: normal } | |
.weight { font-weight: bold } | |
/* Remove space before ":" in rules only (not selectors) */ | |
.colon :before { color : #999 } | |
/* Replace nth-*(1) with first-* */ | |
a:nth-child(1) { color: #fff } | |
a:nth-of-type(1) { color: #fff } | |
/* Simplify numeric and even-odd values */ | |
a:nth-of-child(even) { color: #fff } /* 2n */ | |
a:nth-of-child(2n+1) { color: #fff } /* odd */ | |
a:nth-of-child(2n-1) { color: #fff } /* odd */ | |
/* remove trailing spaces */ | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment