CSS optimizations

List of optimizations done by clean-css

Basic Optimizations

Removing trailing semicolon(s)

.class{top:1px;color:green;;}

becomes

.class{top:1px;color:green}

Removing whitespace around selectors, attributes & values
```
body {
    padding-top: 0
}
```
becomes
```
body{padding-top:0}
```

Removing line breaks

body {
    padding-top:0

}

h1,
h2 {
    font-weight:500
}

becomes

body{padding-top:0}h1,h2{font-weight:500}

Removing empty selectors (with -e switch)
```
body {}
a { color: #fff; }
```
becomes
```
a{color:#fff}
```

Removing universal selector

*.class { color: #fff; }

becomes

.class{color:#fff}

Removing quotes in font and url (if possible)

a {
  font:12px 'Helvetica',"Arial";
  background:url("/some/nice/picture.png");
}

becomes

a{font:12px Helvetica,Arial;background:url(/some/nice/picture.png)}

Removing quotes in keyframe and animation (if possible)

@keyframes "stretch" {
  from { width:100px; }
  to { width:200px; }
}
div { animation: "stretch" }

becomes

@keyframes animation{from{width:100px}to{width:200px}}div{animation:stretch}

Removing quotes in attribute values (if possible)

p[data-tooltip="Help"] {
  color:#fff;
}

becomes

p[data-tooltip=Help]{color:#fff}

Removing comments

/* Some comment */ .class { color:green; }

becomes

.class{color:green}

Removing special comments (all with --s0, all but first with --s1 switch)
```
/*! Some comment */ .class { color:green; }
```
becomes
```
.class{color:green}
```

Removing extra @charset declarations and moving the first one into the beginning of a file

a {
  color: #f10;
}
@charset 'utf-8';
b {
  font-weight: bolder;
}

becomes

@charset 'utf-8';a{color:#f10}b{font-weight:bolder}

@charset 'utf-8';
div :before {
  display: block;
}
@charset 'utf-8';
a {
  color: #f10;
}

becomes

@charset 'utf-8';div :before{display:block}a{color:#f10}

Minification of units after 0 values

.class1 { margin:0px }
.class2 { right:0% }

becomes

.class1{margin:0}.class2{right:0}

Minification of font-weight

.class { font-weight:bold }

becomes

.class{font-weight:700}

Minification of multiple values

.class1 { margin:10px 0px 10px 0px }
.class2 { margin:0px 0px 1px 0px }
.class3 { margin:2em 2em 2em 2em }

becomes

.class1{margin:10px 0}.class2{margin:0 0 1px}.class3{margin:2em}

Minification of fraction zeros

.class { margin:0.50em }

becomes

.class{margin:.5em}

Minification of none into 0 (where possible)

.class { border:none; background:none }

becomes

.class{border:0;background:0 0}

Minification of HSL colors

.class { color:hsla(120,100%,25%) }

becomes

.class{color:#007f00}

Minification of RGB colors

.class { color:rgb(0,127,0) }

becomes

.class{color:#007f00}

Minification of long hex color into short hex colors
```
.class { color:#000000 }
```
becomes
```
.class{color:#000}
```
Minification of hex colors into color names
```
.class { color:#f00 }
```
becomes
```
.class{color:red}
```
Minification of color names into hex colors
```
.class { color:white }
```
becomes
```
.class{color:#fff}
```

Minification of multi-line strings

.test[title="my very long \
title"] {
    background-image: url("my/very/long/\
path")
}

becomes

.test[title="my very long title"]{background-image:url(my/very/long/path)}

Minification of IE filters

.class { filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80) }

becomes

.class{filter:alpha(Opacity=80)}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

CSS optimizations

List of optimizations done by clean-css

Basic Optimizations

Uh oh!

Uh oh!

Clone this wiki locally

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.