Deminificare CSS online
Introdu o foaie de stil comprimată și citește-o din nou confortabil. Selectorii apar pe linii separate, fiecare declarație are propria linie, iar blocurile și interogările media sunt indentate așa cum le-ai scrie manual.
De ce CSS din producție ocupă o singură linie
Foile de stil sunt minificate din același motiv ca scripturile: CSS blochează randarea, astfel încât fiecare octet economisit influențează direct viteza de afișare a paginii. cssnano, Lightning CSS și optimizatoarele integrate în Sass și PostCSS elimină spațiile, combină regulile compatibile și scurtează valorile. Rezultatul este rapid de descărcat, dar greu de inspectat. Când o regulă afectează afișarea sau trebuie să înțelegi stilurile unui site, fișierul compact nu mai oferă repere utile.
Citește din nou cascada
Formatarea pune fiecare selector și declarație la locul potrivit. Acoladele delimitează blocuri vizibile, iar indentarea arată imediat ce reguli aparțin unei interogări media sau unui context imbricat. Poți căuta o clasă, compara specificitatea selectorilor și urmări ordinea declarațiilor fără să separi manual sute de puncte și virgule. Este o modalitate practică de a înțelege de ce o suprascriere este ignorată sau ce regulă devine activă la o anumită lățime a ecranului.
Proprietăți și reguli CSS moderne
Proprietățile personalizate, funcțiile calc(), interogările media, regulile @supports, animațiile și imbricarea CSS standard sunt tratate ca elemente ale limbajului actual. Valorile și selectorii rămân intacte, iar prezentarea lor devine consecventă. O foaie generată cu Tailwind, Sass sau PostCSS poate fi inspectată după compilare, indiferent de organizarea surselor inițiale. Formatarea nu reconstituie însă mixinurile sau variabilele preprocesorului care nu mai există în CSS livrat browserului.
Un sfat practic pentru frameworkuri compilate
Când formatezi o foaie de stil Tailwind sau Bootstrap compilată, fișierul devine foarte lung într-un timp foarte scurt, zecile de mii de linii fiind ceva obișnuit. Activează numerele de linie, apoi folosește funcția de căutare a browserului pentru a găsi numele clasei sau proprietatea care te interesează, în loc să derulezi întregul document. Dacă scopul tău este să micșorezi fișierul, nu doar să îl citești, modificările utile se fac în configurația de compilare, unde poți elimina regulile nefolosite. Aceste reguli au fost generate înainte ca minificarea să înceapă.
Întrebări frecvente
Pot deminifica o foaie de stil Tailwind compilată?
Da, este una dintre utilizările obișnuite ale acestei pagini. Rezultatul poate fi foarte lung deoarece frameworkul generează o regulă pentru fiecare clasă utilitară. Activează numerele de linie și folosește căutarea browserului pentru a naviga eficient.
Sunt recuperate comentariile?
Doar cele care au supraviețuit minificării. Majoritatea minificatoarelor șterg comentariile, cu excepția notificărilor legale marcate special, iar cele șterse nu pot fi recuperate. Formatorul păstrează și aranjează corect comentariile încă prezente.
Funcționează cu SCSS sau Less?
Pagina este destinată codului CSS obișnuit, descărcat efectiv de browser. Sursele preprocesoarelor cu variabile, mixinuri și sintaxă specifică SCSS sau Less nu sunt intrarea vizată, deși imbricarea CSS standard este acceptată.