Приведите правила и свойства CSS к единому оформлению. Сделайте сжатые стили удобнее для чтения и проверки.
Как пользоваться
Вставьте таблицу стилей и получите результат. Исправьте ошибки синтаксиса, затем сравните вывод с оригиналом перед сохранением.
Пример
body{color:red;margin:0} станет правилом с отдельной строкой для каждого свойства и ровными отступами.
Вопросы и ответы
Проверяется ли внешний вид?
Нет. Разбор синтаксиса не проверяет поддержку браузерами, расположение элементов и конфликты селекторов.
Связанные инструменты
Практическая задача
В длинном правиле проверяйте группы свойств. Ровные отступы показывают вложенные условия и помогают заметить дубли. Форматирование не выбирает правильное из конфликтующих свойств.
Дополнительный вопрос
Можно ли вставить всю HTML страницу?
Используйте её CSS часть или форматирование HTML. Парсер стилей ожидает таблицу стилей, а не произвольный документ с тегами.
Детали для проверки результата
| Деталь | Пояснение |
|---|---|
| Каскад CSS | Один селектор может повторяться намеренно. Результат зависит от порядка, специфичности, медиазапросов и наследования. Короткая и аккуратная таблица стилей всё равно требует проверки на странице. |
| Оформление и поведение | Форматирование меняет вид исходника. Оно не доказывает правильность вычислений или отображения страницы. Проверку поведения проводите отдельно от проверки отступов и пробелов. |
| Читаемый и сжатый исходник | Сжатие создаёт компактную копию для публикации. Читаемый исходник нужен для поддержки и повторной сборки. Правка только сжатой версии усложняет проверку и теряет контекст комментариев. |
| Комментарии исходника | Комментарии содержат лицензии, заметки сборки и пояснения. Перед удалением проверьте условия сторонних материалов и сохраните важные уведомления в нужном исходном или распространяемом файле. |
| Границы предпросмотра | Ограниченный просмотр блокирует скрипты, внешние изображения, шрифты и другие ресурсы. Поэтому он отделён от активного поведения страницы, но не воспроизводит любой рабочий макет точно. |
| Границы источника | Резюме и редактура опираются на переданные материалы. Одна ссылка не загружает статью в этом интерфейсе. Добавляйте нужный отрывок и сохраняйте ссылки рядом с подтверждаемыми утверждениями. |
| Исходная и выходная версии | Преобразование создаёт другое представление материала. Если удаляются структура и знаки, сохраните оригинал. По выводу с потерями не всегда можно восстановить породивший его ввод. |
| Контраст цветов | Для читаемого текста нужен достаточный контраст переднего плана и фона. Красивые цвета не гарантируют доступность. Проверяйте размер, насыщенность шрифта и реальный фон вместе. |