CSS Compressor

Introduction to CSS Compressor

Compressor in CSS is used to removes the unnecessary characters in the CSS source code to reduce the file size and make files to load faster than as before compressing. When a user requests any web page then instead of sending the actual CSS full version file, if we sent a compressed version file then it results in faster response time and lower bandwidth cost. Therefore it improved the browser website speed and accessibility, so it helps the search engine ranks moving up. The unnecessary characters mean white spaces, line breaks, block delimiters, comments etc. So minified CSS file will remove all these characters in the source code. The compressed CSS file has an extension with “fileName.min.css”.

Advantage: Improves website speed and accessibility.

Important online Tools used for minimizing web technology files:

• https://csscompressor.com/
• https://www.giftofspeed.com/css-compressor/
• https://cssminifier.com/

How does it work in CSS?

It works for removing white spaces, line breaks, block delimiters, comments, etc. to reduce the size of the application file.

Syntax:

div
{
//CSS styles
}
img
{
//CSS Styles
}

After compressing the code then Syntax:

div{//CSS styles}img{//CSS Styles}

Explanation: As you can see in the above after compressing the code all empty spaces and blank space are removed.

Examples to Implement CSS Compressor

Examples with Code: All the below examples I have used https://csscompressor.com/ online compiler.

1. Border Styles and Text color

Code:

.img1 {
left: 0px;
top: 0px;
position: relative;
z-index: -11;
}
h1
{
color:blue;
text-align: left;
}
.p1
{
border: dashed 3px pink;
font-size: 27px;
color:brown;
}
.img2 {
left: 0px;
top: 0px;
position: absolute;
z-index: -12;
}
h2
{
color:blue;
text-align: right;
}
.p2
{
border: solid 2px orange;
font-size: 25px;
color:green;
}

Output:

2. Tooltip

Code #1

body {
text-align: left;
color: red;
background: blue;
}
.cls1 {
position: absolute;
-webkit-user-select: none;
}
.displayContent {
position: absolute;
bottom: -240%;
left: 40%
color: black;
color: pink;
text-align: right
border-radius: 4px;
padding: 7px 0;
visibility: hidden;
margin-left: -70px;
width: 150px;
background-color: green;
}
.displayContent::before {
content: "";
top: -27%;
left: 35%;
border-color: transparent transparent blue transparent;
position: absolute;
border-width: 4px;
border-style: dashed;
}
.showOut {
visibility: visible;
}

Output:

Code #2

body {
font: normal 13px;
padding: 25px;
}
.c1 {
cursor: help;
position: relative;
}
.c1:hover .c2 {
opacity: 0.8;
right: -24px;
}
.c1:hover .c2:BEFORE {
height: 0;
border: 7px dashed transparent;
margin-top: -7px;
content: ' ';
width: 0;
border-right-color: lightgray;
top: 40%;
left: -17px;
position: absolute;
top: 60%;
left: -19px;
}
.c1 .c2 {
background: blue;
color: maroon;
position: absolute;
top: -13px;
margin-right: -210px;
opacity: 0;
box-shadow: 5px 5px 7px red;
right: 9897px;
width: 210px;
width: 210px;
padding: 6px;
}

Output:

Code #3

body {
font: normal 15px;
padding: 30px;
}
.class1 {
cursor: help;
position: relative;
}
.cl1:hover .cl2 {
opacity: 0.75;
right: -28px;
}
.cl1:hover .cl2:BEFORE {
width: 0;
border-right-color: black;
top: 40%;
left: -18px;
left: -18px;
border: 6px dashed transparent;
content: ' ';
height: 0;
margin-top: -6px;
position: absolute;
top: 40%;
}
.cl1 .cl2 {
background: green;
margin-right: -220px;
color: green;
position: absolute;
box-shadow: 5px 5px 7px blue;
right: 9898px;
width: 220px;
top: -11px;
opacity: 0;
width: 220px;
padding: 7px;
}

Output:

5. Hamburger

Code:

h1
{
color:blue;
}
body {
margin: 0;
overflow: hidden;
height: 90px;
padding: 0;
}
.navBar {
width: 98%;
height: 98%;
position: relative;
}
.nav {
max-width: 450px;
padding-right: 35px;
line-height: 4;
display: flex;
border-radius: 9px;
background-color: pink;
}
*, *::before, *::after {
box-sizing: border-box;
}
.navBar::before, .navBar::after {
height: 47%;
background-color: orange;
width: 98%;
}
.navigationBar.active ul {
margin-right: 30px;
width: 440px;
}
.navigationToggle {
width: 45px;
padding: 15px 6px;
cursor: pointer;
height: 50px;
}
.navBar ul {
list-style: none;
overflow: hidden;
width: 1;
display: flex;
justify-content: space-between;
}
.navBar.active .navToggle::before, .navBar.active .navToggle::after
{
top: 48%;
transform: rotate(140deg);
position: relative;
}
.navBar:not (.active ) .navToggle {
margin-left: -18px;
}
.navToggle::before, .navToggle::after {
content: '';
position: absolute;
width: 35px;
height: 4px;
background-color: green
display: block;
;
}
.navBar.active .navToggle::after {
margin-top: 1;
transform: rotate(-150deg);
}
.navToggle::after {
margin-top: 15px;
} 

Output:

Conclusion

This is used to removing the empty spaces, delimiters, comments. It will make code into a single bundle by reducing the file size to load into the browser faster.

Recommended Articles

This is a guide to CSS Compressor. Here we discuss an introduction to CSS Compressor with appropriate syntax, working and respective examples. You can also go through our other related articles to learn more –

1. Sticky Sidebar CSS
2. CSS Color Chart
3. CSS Border Color
4. CSS Cursor