Introduction to CSS Minify
Minify in CSS is used to removes the unnecessary characters in our CSS or HTML or JavaScript source code to reduce the file size and make file to load faster than as before minifying. When the user requests any web page then instead of sending actual CSS or HTML or JavaScript full version file, if we sent a minified 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 minified CSS file has an extension with “fileName.min.css”.
Advantage
Improves website speed and accessibility.
Important online Tools used to minimize web technology files:
- https://cssminifier.com/
- https://csscompressor.com/
- https://www.minifier.org/
How does Minify work in CSS?
CSS modifies works for removing white spaces, line breaks, block delimiters, comments, etc. to reduce the size of the application file.
Syntax:
CSS:
div
{
//CSS styles
}
img
{
//CSS Styles
}HTML:
<div>
<p>
//Write some content
</p>
</div>JavaScript:
<script>
//JavaScript code
</script>After minify the code then Syntax:
CSS:
div{//CSS styles}img{//CSS Styles}HTML:
<div><p>//Write some content</p></div>JavaScript:
<script>//JavaScript code</script>Explanation: As you can see in the above after minifying the code all empty spaces and blank space are removed.
Examples of CSS Minify
All the below examples I have used https://www.minifier.org/ online compiler.
Example #1 – HTML Code
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Z index</title>
<link rel="stylesheet" href="ZIndexFile.css">
</head>
<body>
<h1>Z Index with Image</h1>
<div class="content">
<img alt="" src="bs2.jpg">
<p>The z-index property in CSS decides the stack order of the
element like image or box or any character content or button etc. An
element with highest or greater stack order value will be always in
front of the element with lower stack order value. Keep in mind that
z-index only worked with position elements like position: absolute,
position: relative, position: sticky. This clear a point that z-
index property can be applied with positioned elements in z order.
Element with a higher z index value always overlapped by the z index
with smaller value.</p>
<p>Real Time Example: We have requirement that we want overlap
image with a content. In general CSS properties can't provide this
feature, this all will give the image on top of the text but we don't
want this. So by using z-index property we can make content on top of
the image.</p>
</div>
</body>
</html>Output After minify:
CSS Code:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -10;
}
h1
{
color:red;
text-align: center;
}
p
{
color:brown;
border: solid 2px yellow;
font-size: 28px;
}Output After minify:
Explanation:
As you can see in the above code all the empty spaces and blank space removed and we can clearly seen how much gain we got from initial size to final size.
Example #2 – HTML and CSS Code:
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: maroon;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee direction="right">
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CORONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CORONA test.
</marquee>
</body>
</html>Output after minify the Code:
Explanation:
As you can see in the above code all the empty spaces and blank space removed and we can clearly seen how much gain we got from initial size to final size.
Example #3 – HTML and JavaScript Code:
<!DOCTYPE html>
<html>
<head>
<title>Unshift Array</title>
<!--CSS Styles-->
<style>
h3
{
color:green;
}
h1
{
color:blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Unshift function with numbers</h1>
<script>
function getMyUnshiftArray()//line1
{
var numberArray=[10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100];//line2
document.write("<h3>Before adding the elements the array is=>"+numberArray+"</h3>");//line3
numberArray.unshift("0","5");//line4
document.write("<h3>After adding the elements with unshift function the array is=>"+ numberArray +"</h3>");//line5
}
getMyUnshiftArray();//line6
</script>
</body>
</html>Output after minify the code:
Explanation:
As you can see in the above code all the empty spaces and blank space removed and we can clearly seen how much gain we got from initial size to final size.
9 Online Courses | 9 Hands-on Projects| 61+ Hours| Verifiable Certificate of Completion
4.5
View Course
Example #4 – HTML and JavaScript Code:
<!DOCTYPE html>
<html>
<head>
<title>Filter Array</title>
<!--CSS Styles-->
<style>
h3
{
color:navy;
}
h1
{
color:skyblue;
text-align: center;
}
</style>
</head>
<body>
<h1>Unshift function on Strings array with user input</h1>
<script>
function getMyUnshiftArray()//line1
{
var stringArray=["Paramesh","Ramesh","Venkatesh","Umesh","Rama","Seetha","Laxmana","Bharath","Shatragna"];//line2
document.write("<h3>Before adding the elements the array is=>"+stringArray+"</h3>");//line3
var input = prompt("Please enter how many strings want to add");//line4
for(var n=0;n<input;n++)
{
var names = prompt("Please enter any string");//line5
stringArray.unshift(names);//line6
}
document.write("<h3>After adding the elements with unshift function the array is=>"+stringArray+"</h3>");//line7
}
getMyUnshiftArray();//line8
</script>
</body>
</html>Output after minify the Code:
CSS minify is used to remove unnecessary white spaces, line breaks, block delimiters, comments etc. from the source code to reduce the size of the file and improve the performance of the website and improves the accessibility.
Recommended Articles
This is a guide to CSS Minify. Here we discuss how does Minify work in CSS with programming examples for better understanding. You may also have a look at the following articles to learn more –
