Форматирование css кода онлайн – Бесплатный онлайн урок: Уроки CSS. Форматирование CSS кода: пробелы, переносы строк и табуляция в CSS

Инструменты для форматирования CSS-кода / Habr

Любите ли вы свой CSS-код так, как люблю его я? Если да, то, несомненно, стремитесь к тому, чтобы он не только хорошо себя вёл и чувствовал, но и приятно выглядел.
Надеюсь, что инструменты, описанные ниже, помогут вашему коду приблизиться к идеалу.

1. Styleneat

Вероятно, самый простой сервис из представленных в обзоре.
Возможностей у инструмента не так много:

• Сортировка свойств по алфавиту
• Сортировка селекторов по алфавиту (если стоит галочка “Safe Organize” (безопасное форматирование) –  этот параметр не доступен)
• Возможность выбрать стиль форматирования: многострочное или в одну строку
• Умеет вытягивать CSS-файлы, подключенные с помощью import, в основной файл и безжалостно их обрабатывать
• Можно передать код на обработку с помощью: текстового поля, загрузив файл или указав ссылку на CSS
• Результат можно забрать в виде CSS-кода или загрузить файл

2. FormatCSS

Не смотря на свой грозный вид, инструмент прекрасно справляется со своими функциями, коих у него предостаточно.
Настроить можно многое:

• расстановку пробелов/табов/новых строк,
• сортировку свойств и имён селекторов,
• преобразование имён свойств и селекторов в нижний регистр и т.п.

Чем мне особо приглянулся данный сервис: умением форматировать “лесенкой” субправила (я считаю это очень удобным способом организации стилей).

3. CleanCSS

Достаточно мощный инструмент, предоставляющий в наше распоряжение множество возможностей:

• Скормить CSS можно копипастом в поле “CSS-Code” или в виде ссылки на файл стиля
• Получить результат можно в виде текста или в файл
• На выбор пользователя предоставлены 4 типа форматирования исходника: код может быть оптимизирован для наименьшего размера или, наоборот, для лучшей читабельности. Есть возможность задать шаблон форматирования в поле “Custom temlate”
• Умеет объединять правила, приводить запись свойств к короткому виду
• Если необходимо –  удалит комментарии и невалидные определения
• Как и вышеописанные сервисы, с радостью отсортирует всё, что душе угодно по алфавиту и преобразует в нижний/верхний регистр

Кстати, в основе данного сервиса обнаруживается движок “CSSTidy” – опенсурсный CSS-парсер/оптимизатор. Так что, все желающие свободно могут изобразить на его базе свой собственный бьютифер, с блэкджеком и переключателями.
UPD> В комментариях подсказали ссылку на близнеца это сервиса: CodeBeautifier. Набор функций практически идентичен CleanCSS (сервис тоже работает на CSSTidy).

4. ProCSSor

На мой искушенный взгляд –  самое удобное из всего представленного в данном обзоре.
Сервис встречает пользователя приятным интерфейсом и очень наглядными всплывающими подсказками, позволяющими очень быстро разобраться с настройками.
Как и любой уважающий себя бьютифер, ProCSSor примет от нас код в поле ввода, в виде файла или ссылки. Отдаст результат в браузер и выведет ссылку на скачивание файла.
Настроек у инструмента вполне достаточно, чтобы угодить практически любому пользователю, перечислять их не имеет особого смысла – лучше сразу попробовать.
Приятной фичей сервиса является возможность сохранить свои настройки, чтобы в следующий раз можно было пропустить этап настроек и сразу перейти к процессу облагораживания.
Ещё одна достопримечательность –  ProCSSor предоставляет API, с документацией можно ознакомиться здесь: http://procssor.com/apidoc.pdf.

5. CSScomb

Проект нашего соотечественника, хабрапользователя miripiruni. CSScomb является инструментом для пересортировки CSS-свойств в заданном порядке, подробнее о возможностях можно узнать на этой странице.
Из приятностей:

• есть плагины для редакторов TextMate, Coda, Webstorm и IntelliJIDEA;
• существует возможность задавать и сохранять собственные настройки

Автор обещает в ближайшем времени большие обновления сервиса и предлагает следить за каналом @csscomb

Онлайн сервис форматирования HTML кода

Приветствую вас, друзья. Отдельный привет тем, кто увлекается веб-разработкой потому, что этот пост посвящен именно вам. С этого момента в разделе: Инструменты будет работать сервис форматирования HTML кода онлайн. Все мы прекрасно понимает, что такое правильная структура HTML документа, но не у всех получается ее создать. Или же по долгу службы вам приходится ковыряться в чужом коде, а написан он так, что только от одного взгляда на него может пойти кровь из глаз. Логическое форматирование HTML кода онлайн поможет легко превратить кашу из кода в красивый структурированный, удобочитаемый.

Пользоваться им очень просто. Вставляете код в поле и нажимаете кнопку Форматировать HTML. При необходимости можно воспользоваться настройками, при помощи которых можно задать необходимые отступы. Сервис так же умеет форматировать CSS код, который имеется в HTML коде, но в некоторых случаях может возникнуть путаница. Особенно, если в таблице стилей прописаны пути к изображениям. Имейте это в виду. А в остальном работает отлично. Имеется нумерация строк, а так же подсветка синтаксиса для удобства восприятия кода.

Пример онлайн форматирования HTML кода

Я открыл исходный код своего блога и выделил и скопировал архив записей. Вот  так выглядит он в сжатом виде:

А вот так уже после форматирования:

Разница, как говорится, на лицо или — найдите 10 отличий. Данный инструмент будет полезен хотя бы для того, чтобы посмотреть исходный код какой-либо страницы в более читаемом виде. Попробуйте открыть главную страницу яндекса и посмотреть исходный код. А потом его отформатируйте. Чтобы не потерять, добавьте страницу в закладки. Пишите в комментариях, как вы форматируете HTML код и какими сайтами пользуетесь.

Перейти в сервис

Форматирование кода CSS | htmlbook.ru

Существует множество разных подходов, как же писать CSS-код. Кто-то упорядочивает селекторы по блокам, другой согласно структуре документа, третий по алфавиту. На форуме после обсуждения этого вопроса выявилась вполне закономерная тенденция — сколько людей, столько и мнений. Поэтому предлагаю ознакомиться с онлайновым инструментом, который форматирует CSS-код сразу четырьмя разными способами. А вы уж сами решайте, какой из них вам симпатичнее.

Ссылка на сайт
http://www.cssportal.com/format-css/

Принцип работы очень простой, вводите в текстовое поле свой код, нажимаете на кнопку «Format Code» и получаете четыре разных вида первоначального кода. Для примера я возьму следующий небольшой фрагмент.

body {
 font: 0.9em Arial, Verdana, Helvetica, sans-serif;
 color: #000;
 background: #fff;
 margin: 0;
}
.top {
 margin-bottom: 10px;
 padding-left: 3%;
 border-bottom: 1px solid #acacac;
}

В результате его форматирования получатся следующие варианты.

Форматированный CSS (Formatted CSS)

body {
    font: 0.9em Arial, Verdana, Helvetica, sans-serif;
    color: #000;
    background: #fff;
    margin: 0;
}

.top {
    margin-bottom: 10px;
    padding-left: 3%;
    border-bottom: 1px solid #acacac;
}

Порядок свойств не меняется, строки со свойствами сдвигаются вправо на четыре пробела, селекторы разделяются между собой пустой строкой.

Свойства в алфавитном порядке (Properties in Alphabetical Order)

body {
    background: #fff;
    color: #000;
    font: 0.9em Arial, Verdana, Helvetica, sans-serif;
    margin: 0;
}

.top {
    border-bottom: 1px solid #acacac;
    margin-bottom: 10px;
    padding-left: 3%;
}

Строки со свойствами сдвигаются вправо на четыре пробела, селекторы разделяются между собой пустой строкой, стилевые свойства упорядочиваются по алфавиту.

Лесенкой (Longest Property to Shortest)

body {
    font: 0.9em Arial, Verdana, Helvetica, sans-serif;
    background: #fff;
    color: #000;
    margin: 0;
}

.top {
    border-bottom: 1px solid #acacac;
    margin-bottom: 10px;
    padding-left: 3%;
}

Строки со свойствами сдвигаются вправо на четыре пробела, селекторы разделяются между собой пустой строкой, строки со свойствами упорядочиваются по длине. Вначале идут самые длинные строки, в конце самые короткие.

Компактно (Compact)

 body {font: 0.9em Arial, Verdana, Helvetica, sans-serif;color: #000;background: #fff;margin: 0;}
.top {margin-bottom: 10px;padding-left: 3%;border-bottom: 1px solid #acacac;}

Селекторы и свойства записываются в одну строку, пустые строки удаляются.

Приведенный инструмент, конечно, не претендует на полноту, в нем нельзя задать величину отступа между селекторами, количество пробелов перед свойством. Также не сокращаются лишние пробелы перед значениями свойств. Тем не менее, главное, что процесс форматирования кода прост и удобен.

Инструменты для форматирования CSS-кода — HTML&CSS

Любите ли вы свой CSS-код так, как люблю его я? Если да, то, несомненно, стремитесь к тому, чтобы он не только хорошо себя вёл и чувствовал, но и приятно выглядел

Надеюсь, что инструменты, описанные ниже, помогут вашему коду приблизиться к идеалу.

1. Styleneat

Вероятно, самый простой сервис из представленных в обзоре.

Возможностей у инструмента не так много:

• Сортировка свойств по алфавиту
• Сортировка селекторов по алфавиту (если стоит галочка “Safe Organize” (безопасное форматирование) –  этот параметр не доступен)
• Возможность выбрать стиль форматирования: многострочное или в одну строку
• Умеет вытягивать CSS-файлы, подключенные с помощью @import, в основной файл и безжалостно их обрабатывать
• Можно передать код на обработку с помощью: текстового поля, загрузив файл или указав ссылку на CSS
• Результат можно забрать в виде CSS-кода или загрузить файл

2. FormatCSS

Не смотря на свой грозный вид, инструмент прекрасно справляется со своими функциями, коих у него предостаточно.

Настроить можно многое:

• расстановку пробелов/табов/новых строк,
• сортировку свойств и имён селекторов,
• преобразование имён свойств и селекторов в нижний регистр и т.п.

Чем мне особо приглянулся данный сервис:

умением форматировать “лесенкой” субправила (я считаю это очень удобным способом организации стилей).

3. CleanCSS

Достаточно мощный инструмент, предоставляющий в наше распоряжение множество возможностей:

• Скормить CSS можно копипастом в поле “CSS-Code” или в виде ссылки на файл стиля
• Получить результат можно в виде текста или в файл
• На выбор пользователя предоставлены 4 типа форматирования исходника: код может быть оптимизирован для наименьшего размера или, наоборот, для лучшей читабельности. Есть возможность задать шаблон форматирования в поле “Custom temlate”
• Умеет объединять правила, приводить запись свойств к короткому виду
• Если необходимо –  удалит комментарии и невалидные определения
• Как и вышеописанные сервисы, с радостью отсортирует всё, что душе угодно по алфавиту и преобразует в нижний/верхний регистр

Кстати, в основе данного сервиса обнаруживается движок “CSSTidy” – опенсурсный CSS-парсер/оптимизатор. Так что, все желающие свободно могут изобразить на его базе свой собственный бьютифер, с блэкджеком и переключателями.

Близнец это сервиса: CodeBeautifier. Набор функций практически идентичен CleanCSS (сервис тоже работает на CSSTidy).

4. ProCSSor

На мой искушенный взгляд –  самое удобное из всего представленного в данном обзоре.

Сервис встречает пользователя приятным интерфейсом и очень наглядными всплывающими подсказками, позволяющими очень быстро разобраться с настройками.

Как и любой уважающий себя бьютифер, ProCSSor примет от нас код в поле ввода, в виде файла или ссылки. Отдаст результат в браузер и выведет ссылку на скачивание файла.

Настроек у инструмента вполне достаточно, чтобы угодить практически любому пользователю, перечислять их не имеет особого смысла – лучше сразу попробовать.

Приятной фичей сервиса является возможность сохранить свои настройки, чтобы в следующий раз можно было пропустить этап настроек и сразу перейти к процессу облагораживания.

Ещё одна достопримечательность –  ProCSSor предоставляет API, с документацией можно ознакомиться здесь: http://procssor.com/apidoc.pdf.

5. CSScomb

Проект нашего соотечественника, хабрапользователя miripiruni

CSScomb является инструментом для пересортировки CSS-свойств в заданном порядке, подробнее о возможностях можно узнать на этой странице.

Из приятностей:

• есть плагины для редакторов TextMate, Coda, Webstorm и IntelliJIDEA;
• существует возможность задавать и сохранять собственные настройки