CSS-formaterare & minifierare

Strukturera rörig CSS för att göra den läsbar, eller minifiera den inför driftsättning – med ett säkert läge som aldrig ändrar ordningen på dina regler.

Indrag
Komprimering
Klistra in eller skriv CSS för att formatera eller minifiera den.

Din CSS formateras och minifieras direkt i webbläsaren. Ingenting laddas upp till BroBroGo.

Vanliga frågor

Vad är skillnaden mellan formatering och minifiering?

Formatering (beautify) lägger till indrag och radbrytningar i dina stilar så att de blir enkla att läsa och redigera. Minifiering gör motsatsen – det tar bort blanksteg och kommentarer som webbläsaren inte behöver samt förkortar värden som färger, vilket gör filen mindre så att den laddas snabbare. Formatera medan du arbetar, minifiera innan du publicerar.

Vad gör komprimeringsinställningarna Säker och Optimerad?

Säker (Safe) tar endast bort blanksteg och kommentarer samt förkortar värden, vilket lämnar varje regel exakt där du skrev den. Optimerad (Optimized) går längre och slår ihop dubbletter av selektorer och regler för en ännu mindre fil – detta kan ändra ordningen på regler, så på stilmallar som är beroende av källkodsordning är det värt en snabb kontroll före publicering. Kommentarer som är markerade med /*! … */ behålls i båda lägena.

Kommer minifieringen att ändra hur min sida ser ut?

I säkert läge (Safe) blir det ingen skillnad – dina stilar renderas exakt likadant. Det tar bort blanksteg, rensar vanliga kommentarer och skriver om värden till kortare motsvarigheter (som #ffffff till #fff), men ändrar aldrig dina leverantörsprefix (vendor prefixes) eller modern syntax. Det optimerade läget (Optimized) slår även ihop regler, vilket ser identiskt ut på nästan alla stilmallar men kan vara värt att verifiera om din CSS är beroende av regelordningen.

HTML-formaterare & minifierareStrukturera rörig HTML för att göra den läsbar, eller minifiera den inför driftsättning – med valfri kontroll av felaktiga taggar.SVG-optimerareRensa upp SVG-kod och gör filen mindre utan att ändra hur grafiken ser ut.JavaScript-formaterare & minifierareFormatera minifierad eller obfuskerad JavaScript så att du kan läsa den, eller minifiera din egen kod för att göra den mindre inför driftsättning.CSS clamp()-kalkylatorAnge en storlek för små och stora skärmar och få ett flytande clamp()-värde som skalas mjukt däremellan – för textstorlekar, padding, marginaler eller gap.Gradient-generatorBygg en linjär, radiell eller konisk toning, lägg till färgstopp och ställ in riktningen, och kopiera sedan CSS-koden med ett klick.Box Shadow-generatorDra i reglagen för att forma en box-shadow, stapla lager för djup och kopiera den färdiga CSS-koden direkt.FärgkonverterareKonvertera färger mellan HEX, RGB, HSL, HSV, CMYK och LAB – ändra valfritt fält så uppdateras resten automatiskt.JSON-formaterareFormatera, validera och minifiera JSON direkt.