toolbox/css-minifier.html at main · 100millionusd/toolbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free CSS Minifier & Beautifier — Compress & Format CSS</title>
  <meta name="description" content="Minify CSS to reduce file size or beautify compressed CSS for readability. Shows compression stats. Free online CSS minifier and formatter.">
  <link rel="canonical" href="https://www.quicktools.mom/css-minifier.html">
  <meta property="og:title" content="">
  <meta property="og:description" content="">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.quicktools.mom/css-minifier.html">
  <meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2658921743607446" crossorigin="anonymous"></script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Why minify CSS?","acceptedAnswer":{"@type":"Answer","text":"Minified CSS loads faster because it removes whitespace, comments, and unnecessary characters. This reduces file size by 20-50%, improving page load times and Core Web Vitals scores."}},{"@type":"Question","name":"Is minified CSS harder to debug?","acceptedAnswer":{"@type":"Answer","text":"Yes, which is why you should keep your original source files and only serve minified CSS in production. Use source maps in development for easier debugging."}}]}</script>
</head>
<body>
  <div class="page-wrapper">
    <header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
    <div class="ad-zone ad-zone-top">Ad Space — 728×90</div>
    <div class="tool-header">
      <div class="tool-badge">🎨 Developer</div>
      <h1>CSS Minifier & Beautifier</h1>
      <p>Minify CSS to reduce file size or beautify compressed CSS for readability.</p>
    </div>
    <div class="tool-card">
      <label>CSS Input</label>
      <textarea id="input" class="mono" rows="12" placeholder="Paste your CSS here...">.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.5rem;
  margin: 0 auto;
  max-width: 1200px;
}

.container > .header {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 1rem;
  text-align: center;
}

/* Card Styles */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}</textarea>
      <div class="btn-group">
        <button class="btn btn-primary" onclick="minify()">⚡ Minify</button>
        <button class="btn btn-secondary" onclick="beautify()">✨ Beautify</button>
        <button class="btn btn-secondary" onclick="removeComments()">🗑️ Strip Comments</button>
      </div>
      <div class="output-area mt-3">
        <span class="output-label">Output</span>
        <pre id="output" class="mono" style="white-space:pre-wrap;max-height:400px;overflow-y:auto;"></pre>
        <button class="copy-btn" onclick="copyOut()">Copy</button>
      </div>
      <div class="stats-bar">
        <div class="stat-item"><span class="stat-value" id="origSize">0</span><span class="stat-label">Original (bytes)</span></div>
        <div class="stat-item"><span class="stat-value" id="newSize">0</span><span class="stat-label">Result (bytes)</span></div>
        <div class="stat-item"><span class="stat-value" id="savings">0%</span><span class="stat-label">Savings</span></div>
        <div class="stat-item"><span class="stat-value" id="lineCount">0</span><span class="stat-label">Lines</span></div>
      </div>
    </div>
    <div class="ad-zone">Ad Space — 336×280</div>
    <div class="faq-section">
      <h2>    <div class="tool-card" style="max-width:720px;">
      <h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About CSS Minifier & Beautifier</h2>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">CSS Minifier & Beautifier is a free, browser-based tool built for developers and engineers working with code daily. Minify CSS to reduce file size or beautify compressed CSS for readability. Shows compression stats. Free online CSS minifier and formatter. This tool processes everything locally using JavaScript — no data is uploaded to any server, no account is required, and there are no usage limits. Whether you’re working on a quick project or handling sensitive data, your privacy is fully protected. Bookmark this page and use it anytime — it works on desktop, tablet, and mobile devices.</p>
      <h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
      <ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
        <li><strong>Enter your data</strong> — Type, paste, or upload your input in the fields above.</li>
        <li><strong>Configure options</strong> — Adjust any settings or parameters to match your requirements.</li>
        <li><strong>Get instant results</strong> — Output updates automatically in real-time as you type.</li>
        <li><strong>Copy or download</strong> — Use the Copy button to grab results, or download if available.</li>
      </ol>
    </div>
    Frequently Asked Questions</h2>
      <div class="faq-item"><h3>Why minify CSS?</h3><p>Minified CSS loads faster because it removes whitespace, comments, and unnecessary characters. This reduces file size by 20-50%, improving page load times and Core Web Vitals scores.</p></div>
      <div class="faq-item"><h3>Is minified CSS harder to debug?</h3><p>Yes, which is why you should keep your original source files and only serve minified CSS in production. Use source maps in development for easier debugging.</p></div>
    </div>
    <div class="related-tools"><h2>Related Tools</h2><div class="related-grid">
      <a href="json-formatter.html"><span class="tool-icon">{ }</span> JSON Formatter</a>
      <a href="sql-formatter.html"><span class="tool-icon">🗃️</span> SQL Formatter</a>
      <a href="gradient-generator.html"><span class="tool-icon">🌈</span> Gradient Generator</a>
      <a href="css-shadow.html"><span class="tool-icon">🌑</span> Box Shadow</a>
    </div></div>
    <div class="ad-zone ad-zone-bottom">Ad Space — 728×90</div>
    <footer class="site-footer"><p>&copy; 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a><a href="#">Privacy</a></div></footer>
  </div>
  <script>
    function minify(){
      const css=document.getElementById('input').value;
      let min=css;
      min=min.replace(/\/\*[\s\S]*?\*\//g,'');
      min=min.replace(/\s*([{}:;,>~+])\s*/g,'$1');
      min=min.replace(/\s+/g,' ');
      min=min.replace(/;\}/g,'}');
      min=min.replace(/\s*!important/g,'!important');
      min=min.trim();
      setOutput(css,min);
    }
    function beautify(){
      const css=document.getElementById('input').value;
      let b=css;
      b=b.replace(/\s*\{\s*/g,' {\n  ');
      b=b.replace(/\s*\}\s*/g,'\n}\n\n');
      b=b.replace(/;\s*/g,';\n  ');
      b=b.replace(/,\s*/g,',\n');
      b=b.replace(/\n  \}/g,'\n}');
      b=b.replace(/\n{3,}/g,'\n\n');
      b=b.trim();
      setOutput(css,b);
    }
    function removeComments(){
      const css=document.getElementById('input').value;
      const result=css.replace(/\/\*[\s\S]*?\*\//g,'').replace(/\n{3,}/g,'\n\n').trim();
      setOutput(css,result);
    }
    function setOutput(orig,result){
      document.getElementById('output').textContent=result;
      const origBytes=new Blob([orig]).size;
      const newBytes=new Blob([result]).size;
      document.getElementById('origSize').textContent=origBytes.toLocaleString();
      document.getElementById('newSize').textContent=newBytes.toLocaleString();
      document.getElementById('savings').textContent=origBytes?Math.round((1-newBytes/origBytes)*100)+'%':'0%';
      document.getElementById('lineCount').textContent=result.split('\n').length;
    }
    function copyOut(){navigator.clipboard.writeText(document.getElementById('output').textContent).then(()=>{const b=document.querySelector('.copy-btn');b.textContent='Copied!';b.classList.add('copied');setTimeout(()=>{b.textContent='Copy';b.classList.remove('copied')},2000)});}
  </script>
<script src="ads.js"></script>
</body>
</html>