CSS-Minimierer - CSS-Code online komprimieren

Optimier deinen CSS-Code blitzschnell und kostenlos online. Verringere Dateigrößen, beschleunige die Ladezeit - kein Setup nötig!

Tags: Code komprimieren Code minimieren css scss

🚀 107,646 Gesamtumwandlungen (4 diesen Monat)

Übe Python mit Coding Challenges

Löse praktische Aufgaben direkt im Editor: Führe die Beispieltests aus, reiche ein und erhalte ein KI-Code-Review.

Alle Python-Challenges
Einfach

Skalarprodukt zweier Vektoren

Multipliziere zwei Vektoren elementweise und addiere die Ergebnisse, die Kernoperation jedes Neurons.

Du lernst VektorenSkalarprodukt
Neuronale Netzeaimaschinelles Lernen
Einfach

Distance Between Points

Compute the straight-line distance between two points.

Du lernst Satz des PythagorasQuadratwurzeln
BeginnerFunctionsLearning-pathmath
Einfach

Count Pairs With a Sum

Count pairs of positions whose values add up to a target.

Du lernst IndexpaareDoppelzählung vermeiden
ArraysBeginnerLearning-pathNested-loops
Einfach

Average of Three

Average three whole numbers.

Du lernst ArithmetikDivision
BeginnerLearning-pathVariables
Einfach

Rechteck-Umfang

Berechne den Umfang eines Rechtecks anhand seiner Seiten.

Du lernst ArithmetikRückgabewerte
BeginnerLearning-pathVariables
Einfach

Kunden und Bestellungen verbinden

Verbinde Kunden wie mit LINQ Join mit ihren Bestellungen und melde den Gesamtumsatz jedes Kunden.

Du lernst LINQ JoinGruppieren
ArraysSorting
Noch keine Lösungen
Einfach

To-do-Liste

Verwalte eine Aufgabenliste: hinzufügen, erledigen, entfernen und melden, was noch offen ist.

Du lernst Typisierte CollectionsRecords
BeginnerSimulationStrings
Noch keine Lösungen
Einfach

Operationen auf einer verketteten Liste

Simuliere eine verkettete Liste: an beiden Enden einfügen, vorne oder nach Wert entfernen und umdrehen.

Du lernst Verkettete ListenSimulation
Data-structuresSimulation
Noch keine Lösungen
Einfach

Ein flaches JSON-Objekt summieren

Parsen Sie ein flaches JSON-Objekt, dessen Werte ganze Zahlen sind, und addieren Sie die Werte.

Du lernst JSON parsenStrings aufteilen
ParsingStrings
Noch keine Lösungen
Einfach

Gesamtzeit mit WhenAll

Finde heraus, wie lange ein Programm dauert, wenn jede Aufgabengruppe gemeinsam mit Task.WhenAll ausgeführt wird und die Gruppen nacheinander laufen.

Du lernst Async/awaitTask.WhenAll
ArraysBeginner
Noch keine Lösungen
Mittel

Reihenfolge paralleler Tasks

Führe Aufgaben gleichzeitig mit höchstens k zur selben Zeit aus und gib die Reihenfolge an, in der sie fertig werden.

Du lernst NebenläufigkeitPrioritätswarteschlangen
SimulationSorting
Noch keine Lösungen
Mittel

Min-Stack

Baue einen Stack, der nach jedem Push oder Pop sofort sein kleinstes Element meldet.

Du lernst StacksLaufendes Minimum
Data-structuresStacks
Noch keine Lösungen

Einführung

Dieses Online-CSS-Minifier-Tool hilft Ihnen, Ihren CSS-Code mühelos zu komprimieren und zu optimieren. Es ist ideal, um die Leistung von Websites zu verbessern, indem die Dateigröße und Ladezeiten reduziert werden.

So verwenden Sie dieses Tool

  1. Fügen Sie Ihren CSS-Code direkt in den Editor ein oder geben Sie ihn ein.
  2. Klicken Sie auf die Schaltfläche Minify, um Ihren CSS-Code zu komprimieren.
  3. Nach der Komprimierung können Sie:
    • Das optimierte Ergebnis herunterladen.
    • Es mit einem einzigartigen Link speichern oder teilen.
    • Sich mit Google oder GitHub anmelden, um Ihren komprimierten Code für die zukünftige Verwendung zu speichern.

Was ist CSS?

CSS (Cascading Style Sheets) ist eine Sprache, die verwendet wird, um Webseiten und Benutzeroberflächen zu gestalten. Es arbeitet mit HTML zusammen, um das Layout, die Farben, Schriftarten und die gesamte visuelle Präsentation einer Website oder Anwendung zu steuern.

CSS ist nicht auf Webseiten beschränkt - es kann auch XML-basierte Dokumente wie SVG und XUL gestalten. Zusammen mit HTML und JavaScript spielt CSS eine Schlüsselrolle beim Erstellen von optisch ansprechenden und interaktiven Websites und mobilen Anwendungen.

Erfahren Sie mehr über CSS in diesem CSS-Leitfaden .

CSS-Syntax

      
body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: purple;
    background-color: #d8da3d
}

ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em
}

h1 {
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
      
    

Was ist Minifizierung?

Minifizierung ist der Prozess der Minimierung von Code und Markup in Ihren Webseiten und Skriptdateien. Es ist eine der Hauptmethoden, um Ladezeiten und Bandbreitennutzung auf Websites zu reduzieren. Die Minifizierung verbessert die Geschwindigkeit und Zugänglichkeit der Website erheblich, was direkt zu einer besseren Benutzererfahrung führt. Es ist auch vorteilhaft für Benutzer, die Ihre Website über einen begrenzten Datentarif aufrufen und beim Surfen im Internet Bandbreite sparen möchten.

Warum CSS minifizieren?

Beim Erstellen von CSS neigen Entwickler dazu, Abstände, Kommentare und gut benannte Variablen zu verwenden, um Code und Markup für sich selbst lesbar zu machen. Es hilft auch anderen, die später an den Assets arbeiten könnten. Während dies in der Entwicklungsphase ein Pluspunkt ist, wird es negativ, wenn es darum geht, Ihre Seiten bereitzustellen. Webserver und Browser können Dateiinhalte ohne Kommentare und gut strukturierten Code parsen, die beide zusätzlichen Netzwerkverkehr erzeugen, ohne einen funktionalen Nutzen zu bieten.

Um CSS-Dateien zu minifizieren, müssen Kommentare und zusätzliche Leerzeichen entfernt sowie Variablennamen gekürzt werden, um den Code zu minimieren und die Dateigröße zu reduzieren. Die minifizierte Dateiversion bietet die gleiche Funktionalität, während die Bandbreite der Netzwerk-Anfragen reduziert wird.

Beispiele

Vor der Minifizierung

      
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
      
    

Nach der Minifizierung

      
nav ul{margin:0;padding:0;list-style:none;}nav li{display:inline-block;}nav a{display:block;padding:6px 12px;text-decoration:none;}