Updated May 25, 2023
Introduction to CSS Minify
Minify in CSS is used to remove the unnecessary characters in our CSS or HTML, or JavaScript source code to reduce the file size and make the file load faster than as before minifying. When the user requests any web page then, instead of sending an actual CSS or HTML or JavaScript full version file, if we send 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 helped the search engine ranks to move 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 minifying 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 spaces are removed.
Examples of CSS Minify
For 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 spaces were removed, and we can clearly see how much gain we got from the initial size to the 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 minifying the Code:
Explanation:
As you can see in the above code, all the empty spaces and blank spaces were removed, and we can clearly see how much gain we got from the initial size to the 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 minifying the code:
Explanation:
As you can see in the above code, all the empty spaces and blank spaces were removed, and we can clearly see how much gain we got from the initial size to the final size.
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 minifying the Code:
Developers use CSS minify to remove extraneous white spaces, line breaks, block delimiters, comments, and so on from the source code. They do this in order to reduce the file size, enhance website performance, and increase accessibility.
Recommended Articles
We hope that this EDUCBA information on “CSS Minify” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
