Compress or Beautify CSS Code:
Show highlighted code? Clear Field Select All
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 ; }