Разгъване на CSS онлайн
Поставете уплътнен стилов файл и отново го прочетете удобно. Селектори на отделни редове, по една декларация на ред, блокове и медийни заявки с отстъпи, както бихте ги написали на ръка.
Защо публикуваният CSS е един дълъг ред
Стиловите файлове често се минифицират преди публикуване, за да се намали текстът, изпращан към браузъра. Инструментите за изграждане могат да премахват интервали и коментари, да съкращават стойности или да обединяват съвместими правила. Резултатът зависи от избрания оптимизатор и настройките му; не се гарантира нито конкретно намаление на размера, нито по-бързо зареждане на страницата. Компилиран стилов файл с помощни класове може да съдържа много малки правила, което затруднява прегледа на уплътнения файл. Форматирането добавя последователно подреждане за четенето им, но не може да възстанови изходните компоненти, препроцесорните файлове или конфигурацията за изграждане, която ги е създала.
Как отново да проследите каскадата
Основната причина да форматирате стилов файл е да разберете защо дадено правило се прилага или не. Когато всеки селектор е на собствен ред с отстъпени под него декларации, можете да проследите каскадата: да намерите всички правила за елемента, да сравните специфичността им, да видите кое е последно и да откриете забравеното important, което отменя работата ви. Медийните заявки и съдържанието им се виждат като блокове, което улеснява проследяването на адаптивното поведение спрямо уплътнения файл. За целенасочена проверка копирайте цялото правило и обхващащата го относима медийна заявка, преди да правите промени. Видимият стилов файл обяснява само част от каскадата: вградените стилове, другите стилови файлове, наследяването и текущият DOM също имат значение. Инструментите за разработчици на браузъра показват кои декларации действително се прилагат към елемент. Използвайте форматирания файл, за да ги разберете в контекст, след което потвърдете поведението при размера на прозореца, който изследвате. Ако автоматичното разпознаване определи CSS като JavaScript, проверете показания етикет, преди да се доверите на резултата.
Поддържа се съвременен CSS
Инструментът разбира съвременен CSS, а не само остарял набор от конструкции. Потребителски свойства, изрази calc и clamp, съкратени записи за grid и flexbox, заявки за контейнери, вложени правила, слоеве, блокове supports и ключови кадри са сред възможностите на синтаксиса, които може да форматира. Дългите списъци със селектори се разделят на редове, за да се четат удобно, а коментарите, оцелели след изграждането, се запазват. Ако файлът смесва обикновен CSS със свойства с префикси за браузъри, резултатът запазва тези декларации и прилага стила на инструмента.
Практичен съвет за компилирани библиотеки
Когато форматирате компилиран стилов файл от Tailwind или Bootstrap, той бързо става много дълъг; десетки хиляди редове са нормални. Включете номерата на редовете и използвайте търсенето в браузъра за името на класа или свойството, което ви интересува, вместо да превъртате. Ако целта ви е да намалите файла, а не да го прочетете, помнете, че съществената работа е в конфигурацията за изграждане, защото неизползваните правила са генерирани още преди минифицирането.
Често задавани въпроси
Мога ли да разгъна компилиран стилов файл от Tailwind?
Да, това е едно от най-честите приложения на тази страница. Очаквайте много дълъг резултат, защото библиотеката генерира по едно правило за всеки помощен клас. Включването на номерата на редовете и търсенето в браузъра са практичният начин да се ориентирате в него.
Възстановяват ли се коментарите?
Коментарите, останали в подадения CSS, могат да се появят във форматирания резултат. Премахнатите от минификатор коментари не могат да бъдат възстановени от този файл, включително обясненията защо съществува дадено правило. Проверете оригиналното хранилище, когато ви трябват бележки по дизайна, насоки от автора или историята на селектора.
Работи ли със SCSS или Less?
Тази страница е предназначена за обикновен CSS, включително компилирания резултат от Sass или Less. Специфичните за препроцесорите променливи, миксини и директиви не са поддържани входни данни. Първо компилирайте тези източници с подходящите инструменти на проекта, след което използвайте редактора за преглед на получения стилов файл.