Monu Tools

CSS-formatter

Forskøn CSS med ren indrykning, eller minificér det for at mindske filstørrelsen. Håndterer media queries, calc() og licenskommentarer.

Sådan bruger du CSS-formatter

  1. 01

    Indsæt din CSS i inputfeltet.

  2. 02

    Vælg Forskøn for at formatere den eller Minificér for at komprimere den.

  3. 03

    Vælg indrykningsstørrelsen, og kopiér derefter resultatet.

Hvad CSS-formateringen gør

Dette er en CSS-formatering, der forskønner stylesheets med ren, konsekvent indrykning eller minificerer dem for at reducere filstørrelsen. Du vælger indrykningsstørrelsen til forskønnelse og skifter til minificering, når du vil have det mindste output.

Hvornår man forskønner, og hvornår man minificerer

Læsbar CSS er lettere at skanne, gennemgå og fejlfinde: når hver regel og erklæring er indrykket konsekvent, kan du se selektorer, indlejring og formen på dine media queries med et enkelt blik.

Minificering er til produktion. Den fjerner den whitespace og de kommentarer, browsere ikke har brug for, så filen downloades hurtigere. På et stort stylesheet lægger besparelsen sig sammen, især før gzip-komprimering på serveren.

Omhyggelig minificering med calc() og media queries

Minificeringen er omhyggelig, hvor det betyder noget. Den beholder mellemrummene omkring plus og minus inde i calc(), så calc(100% - 30px) forbliver gyldig, og den fjerner kun mellemrum omkring strukturelle tegn som klammer, koloner og semikoloner. Den håndterer også indlejrede media queries korrekt.

Licenskommentarer bevares

Licenskommentarer skrevet i formen /*! ... */ bevares, hvilket er standardkonventionen for at beholde ophavsrets- og licensmeddelelser i minificeret output, selv når almindelige kommentarer fjernes.

Kører i din browser

Både forskønnelse og minificering kører udelukkende i din browser, så dine stylesheets forlader aldrig din enhed. Værktøjet formaterer for læsbarhed og størrelse; det validerer ikke, at din CSS er korrekt.

Ofte stillede spørgsmål

Ødelægger minificering calc()-udtryk?

Nej. Minifieren beholder mellemrummene omkring plus og minus inde i værdier, så calc(100% - 30px) forbliver gyldig. Den fjerner kun mellemrum omkring strukturelle tegn såsom tuborgklammer, koloner og semikoloner.

Fjernes kommentarer ved minificering?

Normale kommentarer fjernes for at spare plads, men licenskommentarer skrevet som /*! ... */ beholdes, hvilket er standardkonventionen for at bevare copyright-meddelelser.

Bliver min CSS uploadet et eller andet sted?

Nej. Både forskønning og minificering kører fuldt ud i din browser, så dine stylesheets forlader aldrig din enhed.

Kilder

Indlejr dette værktøj

Tilføj dette værktøj til dit eget websted. Kopiér uddraget nedenfor, det holder sig automatisk opdateret.

<iframe src="https://monu.tools/embed/da/css-formatter" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

Relaterede værktøjer