tigtools

CSS-formaterer

Lim inn et stilark for å gjøre det lesbart eller for å komprimere det. Strenger, url()-verdier og kommentarer behandles som enheter, så ingenting inni dem ødelegges.

Kjører i nettleseren din Ingen registrering

Modus
Innrykk (mellomrom)

Skriv inn noe for å se resultatet.

Slik bruker du det

  1. Lim inn CSS i inndatafeltet, åpne en .css-fil, eller prøv eksempelet.
  2. Velg Forskjønn for lesbar kode eller Minifiser for minst mulig resultat.
  3. Når du forskjønner, velger du 2 mellomrom, 4 mellomrom eller tabulator.
  4. Kopier resultatet eller last det ned som en .css-fil. Hvis krøllparenteser eller anførselstegn ikke er balansert, viser feilmeldingen linje og kolonne.

Slik fungerer det

Formatereren deler først stilarket inn i tokener: strenger i enkle eller doble anførselstegn, url(…)-verdier, kommentarer, krøllparenteser og semikolon. Fordi strenger og url() er enkelttokener, vil et semikolon i en data-URI eller en krøllparentes i content: "{ }" aldri forvirre strukturen, og innholdet kopieres nøyaktig.

Beautify setter hver selektor i en selektorliste på egen linje, legger til mellomrom rundt barne-, søsken- og tilstøtende kombinatorer (>, ~, +), og skriver hver deklarasjon som «egenskap: verdi;» på egen linje. Blokker inne i @media, @supports, @layer, @container og innebygd CSS-nesting får ett nivå innrykk per dybdenivå. Et manglende semikolon etter den siste deklarasjonen i en blokk blir lagt til. Kommentarer beholdes der de er.

Minify fjerner kommentarer (unntatt /*! … */ lisensmerknader), slår sammen mellomrom, fjerner mellomrom rundt krøllparenteser, kolon, semikolon, komma og selektorkombinatorer, og fjerner semikolonet før hver avsluttende krøllparentes. Mellomrom som endrer betydningen beholdes: etterkommerkombinatoren i «.a .b», mellomrommet i «a :focus» og mellomrommene inne i verdier som calc(100% - 2px). «! important» normaliseres til «!important».

Verktøyet skriver ikke om verdier: farger, enheter og nuller beholdes slik de er skrevet, og regler blir ikke slått sammen eller omorganisert. SCSS- eller Less-filer med vanlig nesting fungerer vanligvis, men deres egen syntaks, slik som // linjekommentarer eller mixins, forstås ikke.

Eksempler

Lese en minifisert rammeverksfil

Lim inn et ettlinjes utdrag fra bootstrap.min.css og velg Beautify med 2 mellomrom for å se hver regel, mediespørringene og de nestede reglene deres på separate, innrykkede linjer.

Publisere et håndskrevet stilsett

Minifiser et stilsett på 12 KB med kommentarer og innrykk før du legger det inn som inline i en e-postmal eller i head-seksjonen på en side. Sammendraget viser antall tegn før og etter.

Finne en manglende krøllparentes

Et stilsett slutter å virke halvveis ned. Formatereren rapporterer «Denne { blir aldri lukket med en tilsvarende }» med linjen til regelen som mangler den avsluttende krøllparentesen.

Ofte stilte spørsmål

Er minifisert CSS fra dette verktøyet trygt å bruke i produksjon?

Det fjerner bare kommentarer og blanktegn som CSS ignorerer, så reglene oppfører seg likt. Det gjør ikke de dypere optimaliseringene som byggverktøy utfører, for eksempel å slå sammen regler eller forkorte farger, så resultatet kan bli litt større enn deres.

Hvorfor beholdes et mellomrom i «a :focus»?

I en selektor er et mellomrom etterkommerkombinatoren. «a :focus» betyr et fokusert element inni en lenke, mens «a:focus» betyr en fokusert lenke. Hvis du fjerner mellomrommet, endres hvilke elementer som matches.

Kan verktøyet formatere SCSS eller Less?

Vanlige nøstede regler formateres riktig. Syntaks som bare finnes i preprosessorer, for eksempel //-kommentarer, mixins med argumenter eller @if-blokker, forstås ikke og kan bli formatert merkelig, så sjekk resultatet.

Blir lisenskommentarer fjernet ved minifisering?

Kommentarer som starter med /*! beholdes, noe som er vanlig for lisens- og opphavsrettsmerknader. Alle andre kommentarer fjernes.

Personvern

CSS-en din behandles bare i nettleseren din. Ingenting lastes opp, lagres eller inkluderes i analysedata.