Compress or Beautify CSS Code:
Highlighted Code:
/* ================= Supported layout/pattern: ================= */
/* -------- [1]. CSS Compressor -------- */
/* a. Normal */
#foo{margin:0;padding:0} /* comment */
#foo:focus{outline:none}
/* b. Strip all comments */
#foo{margin:0;padding:0}
#foo:focus{outline:none}
/* c. Super compact */
#foo{margin:0;padding:0}#foo:focus{outline:none}
/* d. Keep indentation inside `@query {}` */
#foo{margin:0;padding:0}#foo:focus{outline:none}
#foo{margin:0;padding:0}#foo:focus{outline:none}
@media screen and (max-width:400px){
#foo{margin:0;padding:0}#foo:focus{outline:none}
#foo{margin:0;padding:0}#foo:focus{outline:none}
}
/* -------- [2]. CSS Beautifier -------- */
/* a. Normal */
#foo {
margin:0;
padding:0;
}
#foo:focus {
outline:none;
}
/* b. Replace double space indentation with a tab character or 4 spaces */
#tab-character {
margin:0;
padding:0;
}
#four-space {
outline:none;
}
/* c. Break multiple selector */
#foo,
#bar,
.walaaa {
margin:0;
padding:0;
}
/* d. Space after `:` and `,` */
#foo {
margin: 0 auto;
background-image: linear-gradient(top, #333, #555);
color: rgba(0, 0, 0, .4);
}
/* e. Inline bracket for single property */
#foo .bg {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:white url('img/bg-image.png') no-repeat 0 0;
}
#foo .bg-1 {background-position:0 0;}
#foo .bg-2 {background-position:100% 0;}
#foo .bg-3 {background-position:100% 100%;}
#foo .bg-4 {background-position:0 100%;}
/* f. Remove the last semicolon in single property */
#foo .bg {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:white url('img/bg-image.png') no-repeat 0 0;
}
#foo .bg-1 {background-position:0 0}
#foo .bg-2 {background-position:100% 0}
#foo .bg-3 {background-position:100% 100%}
#foo .bg-4 {background-position:0 100%}
/* g. Inline layout mode */
#foo .bg { position:absolute; top:0; right:0; bottom:0; left:0; background:white url('img/bg-image.png') no-repeat 0 0; }
