A CSS minifier is a tool or script that reduces the size of CSS files by removing unnecessary characters such as comments, whitespace, and reduces code. The CSS minifier is used to optimize the CSS code for faster loading and improved performance of web pages. The using of css minifer will imporove your page perfomance like
Minified CSS files load faster, reducing the overall page load time and improving the user experience.
Smaller CSS file sizes reduce the amount of data transferred between the server and the client, reducing bandwidth usage and saving hosting costs.
Faster loading times can positively impact search engine rankings, as page speed is a factor considered by search engines.
Minifying CSS files automates the process of optimizing and reducing file size, saving developer time and effort.
<!DOCTYPE html>
<html>
<head>
<title>Minify CSS</title>
<script>
function minifyCSS(input) {
let output = input.replace(/\/\*[^*]*\*+([^/][^*]*\*+)*\//g, '');
output = output.replace(/\s*([:,{])\s*/g, '$1');
output = output.replace(/\s*([+>~])\s*/g, '$1');
output = output.replace(/\s*(\!important)/gi, '$1');
output = output.replace(/}\s+([*.,#a-z0-9])/gi, '}$1');
output = output.replace(/}\s*@/g, '}@');
output = output.trim();
return output;
}
function minifyAndDisplay() {
var cssInput = document.getElementById('css-input').value;
var minifiedCSS = minifyCSS(cssInput);
document.getElementById('minified-css').innerHTML = minifiedCSS;
}
</script>
</head>
<body>
<textarea id="css-input" rows="10" cols="50"></textarea>
<br>
<button onclick="minifyAndDisplay()">Minify CSS</button>
<br>
<pre id="minified-css"></pre>
</body>
</html>
import re
def minify_css(css):
css = re.sub(r'/\*.*?\*/', '', css, flags=re.DOTALL)
css = re.sub(r'\s+', ' ', css)
css = re.sub(r'\s*([:,;{}])\s*', r'\1', css)
return css
css = '''
body {
color: red;
background-color: #f1f1f1;
}
h1 {
font-size: 24px;
margin-bottom: 10px;
} '''
minified_css = minify_css(css)
print(minified_css)
<?php
function minifyCSS($css) {
$css = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css);
$css = str_replace(array("\r\n", "\r", "\n", "\t", ' '), '', $css);
$css = str_replace(array(': ', '; ', ', ', ' {', '}'), array(':', ';', ',', '{', '}'), $css);
return $css;
}
$css = '
body {
color: red;
background-color: #f1f1f1;
}
h1 {
font-size: 24px;
margin-bottom: 10px;
} ';
$minifiedCSS = minifyCSS($css);
echo $minifiedCSS;
?>