CSS/JS Minify & Prettify

Minimieren Sie CSS und JavaScript für die Produktion oder formatieren Sie Code für bessere Lesbarkeit

CSS

JavaScript

1. CSS eingeben

CSS-Code:

/* Header Styles */
header {
    background-color: #333;
    color: white;
    padding: 20px;
    margin-bottom: 20px;
}

/* Navigation */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #ff9900;
}

/* Hauptinhalt */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.btn:hover {
    background-color: #2980b9;
}

.btn-primary {
    background-color: #e67e22;
}

.btn-primary:hover {
    background-color: #d35400;
}

Optionen:

Minify Prettify

2. Ergebnis (CSS)

Statistiken

Originalgröße

752 Bytes

Verarbeitet

412 Bytes

Ersparnis

45%

Ergebnis:

Vorschau

/* Header Styles */
header {
  background-color: #333;
  color: white;
  padding: 20px;
  margin-bottom: 20px;
}

/* Navigation */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
}

3. Beispiele

Einfaches CSS

Komplexes CSS

Einfaches JS

Komplexes JS

Über Minify & Prettify

Minify entfernt alle unnötigen Zeichen (Leerzeichen, Zeilenumbrüche, Kommentare) ohne die Funktionalität zu ändern. Dies reduziert die Dateigröße und verbessert die Ladezeit.

Prettify formatiert Code mit konsistenter Einrückung und Zeilenumbrüchen für bessere Lesbarkeit während der Entwicklung.

Minify

Entfernt Kommentare
Entfernt Leerzeichen
Entfernt Zeilenumbrüche
Kleinere Dateigröße
Für Produktion

Prettify

Fügt Einrückung hinzu
Fügt Zeilenumbrüche hinzu
Bessere Lesbarkeit
Für Entwicklung

CSS JavaScript Minify Prettify

CSS/JS Minify & Prettify

CSS/JS Minify & Prettify

1. CSS eingeben

2. Ergebnis (CSS)

Statistiken

Vorschau

1. JavaScript eingeben

2. Ergebnis (JavaScript)

Statistiken

Vorschau

3. Beispiele

Über Minify & Prettify

Minify

Prettify