Preskoči na vsebino
TextArray
100% lokalno

Oblikovalnik CSS

Polepšajte zmanjšan ali neurejen CSS v čista, zamaknjena in berljiva pravila.

Vhod
Izhod

Oblikovalnik CSS

Prilepite zmanjšan ali ročno zapleten CSS in ta oblikovalnik ga razširi v čisto, berljivo slogovno tabelo: ena deklaracija na vrstico, izbirnik in njegov začetni oklepaj v eni vrstici, zaključni oklepaj zase in prazna vrstica med pravili najvišje ravni. Ugnezdeni bloki, kot so @media, @supports in ugnezdeni izbirniki, so zamaknjeni eno raven globlje, tako da je struktura lista očitna na prvi pogled.

Orodje bere vaš CSS znak za znakom, namesto da ga razdeli z naivnimi vzorci, tako da se nikoli ne zlomi na kočljivi vsebini. Nizi ohranijo svojo natančno vsebino, tako da vsebina: "a{b}" preživi z oklepaji v njej. telesa url() se kopirajo dobesedno, tako da podatkovni URI z lastnimi podpičji in dvopičji — url(data:image/png;base64,...) — ostane popolnoma sam. Komentarji ostanejo beseda za besedo v svoji vrstici v trenutni alineji.

Tri možnosti prilagodijo izhod. Zamik preklaplja med dvema presledkoma, štirimi presledki ali zavihkom. En izbirnik na vrstico postavi vsak izbirnik seznama vejic v svojo vrstico, kar je priročno za dolga združena pravila in čistejše razlike. Prazno vrstico med pravili lahko izključite, če želite, da je list bolj kompakten. Seštevek v živo šteje pravila, deklaracije in izhodne vrstice med tipkanjem, pri čemer je število pravil označeno.

To je protipostavka minifikatorju CSS: uporabite ga, da omogočite ponovno urejanje stisnjene proizvodne datoteke, da preoblikujete nedosledno kodo več avtorjev ali preprosto preberete slogovno datoteko, ki je niste napisali. Vse se v celoti izvaja v vašem brskalniku - vaš CSS ni nikoli nikamor naložen.

FAQ

Ali spremeni moje vrednosti CSS ali imena lastnosti?
Ne. Dodaja in normalizira le presledke in prelome vrstic. Izbirniki, lastnosti, vrednosti, barve, enote, telesa url() in komentarji so ohranjeni točno tako, kot je zapisano.
Ali bodo oklepaji znotraj nizov ali url() prekinili oblikovanje?
Ne. Pregledovalnik znakov sledi nizu, komentarju in stanju url(), zato sta vsebina: "a{b}" in url(data:...;base64,...) kopirana dobesedno in nikoli obravnavana kot struktura.
Kaj naredi "En izbirnik na vrstico"?
Vsak izbirnik seznama, ločenega z vejicami, postavi v svojo vrstico, tako da h1, h2, h3 postanejo tri vrstice nad začetnim oklepajem. Vejice znotraj :is() ali izbirnikov atributov se nikoli ne razdelijo.
Ali lahko popravi neveljaven CSS?
Oblikuje po najboljših močeh in nikoli ne prikaže napak pri pokvarjenem vnosu, vendar ne potrdi ali popravi vašega CSS. Manjkajoči oklepaji ali zatečeni znaki so postavljeni tako dobro, kot to dopušča njihova struktura.
Ali je moj CSS kje naložen?
Ne. Oblikovanje poteka v celoti v vašem brskalniku in vaš CSS nikoli ne zapusti vaše naprave.