CSS Minifier

Input

Minify

Output

About CSS Minifier

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

Improved Website Performance

Minified CSS files load faster, reducing the overall page load time and improving the user experience.

Reduced Bandwidth Usage

Smaller CSS file sizes reduce the amount of data transferred between the server and the client, reducing bandwidth usage and saving hosting costs.

Search Engine Optimization (SEO)

Faster loading times can positively impact search engine rankings, as page speed is a factor considered by search engines.

Improved Developer Efficiency

Minifying CSS files automates the process of optimizing and reducing file size, saving developer time and effort.

How to implement a Simple CSS Minifier?

Using js

<!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>

Run


Using python

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)

Run in Colab


Using php

<?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;
?>


Similar Minifiers

HTML


Minify your HTML Code

Minify Now


JS


Minify your JS Code

Minify Now

Converters you might like

Encode/Decode

Encode or decode your input using our encoder/decoder tools

UNIT CONVERTER

Converts a given unit value to different unit formats

IMAGE CONVERTER

Converts a given image to different image formats

GUIDE

The converter used here has some method to get most of it.

Minify - This button Minifies the given input code into minified format.

To upload any files from your device you can click the upload button to upload the respective code files.

To copy the generated ouput or provided codes click on the copy button.

To Download the generated ouput or provided codes click on the download button.

To export the generated ouput or provided codes we provided a mail button to export to mail immediately.

The input you give are not stored in any manner while you make any use of this tool. This is a full secure platform, you can freely use the tools and user's privacy is most important to us.

And Finally don't forget to give your feedback. click on the at the top provided to give feedback.
Version - 101.7.1.1


FEEDBACK

Rating


Message