<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="CSS Minifier and Compressor Tool to reduce the size of your CSS files for faster load times.">
<meta name="keywords" content="CSS Minifier, CSS Compressor, Web Development, Frontend Tools">
<title>CSS Minifier and Compressor Tool</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
margin-bottom: 20px;
}
h2 {
color: #444;
}
p {
margin-bottom: 15px;
}
textarea {
width: 100%;
height: 200px;
margin-bottom: 10px;
padding: 10px;
box-sizing: border-box;
font-family: monospace;
border: 1px solid #ddd;
border-radius: 4px;
resize: vertical;
}
button {
background-color: #1e90ff;
color: #fff;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
button:hover {
background-color: #1c86ee;
}
.result {
margin-top: 20px;
}
.result textarea {
height: 150px;
}
.result .info {
font-size: 14px;
color: #555;
}
.article {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>CSS Minifier and Compressor Tool</h1>
<p>Paste your CSS code into the textarea below and click "Minify & Compress" to reduce its size.</p>
<textarea id="cssInput" placeholder="Paste your CSS code here..."></textarea>
<button onclick="minifyCSS()">Minify & Compress</button>
<div class="result">
<p class="info">Minified CSS:</p>
<textarea id="cssOutput" readonly></textarea>
</div>
<div class="article">
<h2>Why Use a CSS Minifier and Compressor?</h2>
<p>Minifying and compressing CSS files is a crucial step in optimizing web performance. By reducing the size of CSS files, you can achieve faster load times and improved user experience. Here are the primary reasons why you should use a CSS minifier and compressor:</p>
<ul>
<li><strong>Faster Page Load Times:</strong> Minified CSS files reduce the amount of data that needs to be transferred from the server to the browser. This results in faster page load times, which is essential for retaining visitors and improving search engine rankings.</li>
<li><strong>Reduced Bandwidth Usage:</strong> Smaller CSS files consume less bandwidth. This is particularly beneficial for users on mobile networks or those with limited data plans.</li>
<li><strong>Improved Performance:</strong> Minification removes unnecessary characters and whitespace from the CSS code, which can lead to faster parsing and rendering by the browser.</li>
<li><strong>Better Code Maintenance:</strong> Compressing CSS can make your code cleaner and easier to manage by removing redundant code and comments.</li>
</ul>
<h2>How to Use the CSS Minifier and Compressor Tool</h2>
<p>Using the CSS Minifier and Compressor Tool is straightforward. Follow these simple steps:</p>
<ol>
<li><strong>Paste Your CSS Code:</strong> Copy your CSS code from your stylesheet or editor and paste it into the "Paste your CSS code here..." textarea.</li>
<li><strong>Click "Minify & Compress":</strong> Click the "Minify & Compress" button to process your CSS code. The tool will remove comments, extra whitespace, and other unnecessary characters.</li>
<li><strong>Copy Minified CSS:</strong> Once the process is complete, the minified CSS will appear in the output textarea. Copy this minified CSS code and replace your existing stylesheet with it.</li>
</ol>
<p>By integrating this tool into your development workflow, you can ensure that your web projects are optimized for performance and efficiency.</p>
</div>
</div>
<script>
function minifyCSS() {
const cssInput = document.getElementById('cssInput').value;
const cssOutput = document.getElementById('cssOutput');
// Remove comments
let minifiedCSS = cssInput.replace(/\/\*[\s\S]*?\*\//g, '');
// Remove whitespace and newline characters
minifiedCSS = minifiedCSS.replace(/\s{2,}/g, ' ').replace(/\n/g, '');
// Remove unnecessary semicolons
minifiedCSS = minifiedCSS.replace(/;}/g, '}');
cssOutput.value = minifiedCSS.trim();
}
</script>
</body>
</html>