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

1. Проверьте свой код CSS
2. Надстройка CSS Validator для Firefox
3. CSSCheck
4. CSS Analyzer
5. Очистите свой CSS-код
6. CSS Redundancy Checker
7. Оптимизируйте и сожмите свой код CSS
8. CSS Tidy
9. Другие оптимизаторы CSS
10. Робсон CSS компрессор
11. CSS Drive CSS Compressor
12. CSS Optimizer [больше не доступен]

Реклама

Многие считают, что минимизация размера файла таблицы стилей CSS - это хороший способ увеличить скорость загрузки вашего сайта. Действительно, уменьшив CSS-файл на несколько килобайт, серверу потребуется меньше времени для загрузки, что приведет к более быстрой веб-странице.

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

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

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

Проверьте свой код CSS

W3C CSS Validator

Валидатор W3C CSS - это инструмент, который вы можете использовать для проверки вашего CSS. Вы можете либо загрузить средство проверки Java на свой компьютер и использовать его в автономном режиме, либо использовать онлайн-форму для проверки своего кода CSS.

Надстройка CSS Validator для Firefox

Чтобы вам было проще проверять свой CSS-код, в браузере можно установить это расширение для Firefox - CSS Validator. После установки вы можете легко и быстро проверить свой код, щелкнув правой кнопкой мыши.

CSSCheck

Даже если ваш код CSS проверен, это не значит, что он не содержит ошибок. Проверка только означает, что она соответствует стандартам CSS, установленным W3C. Если вы хотите проверить, а также рассмотреть несколько проблем совместимости браузера с вашей таблицей стилей, тогда CSSCheck - это хороший инструмент для вас.

CSS Analyzer

CSS Analyzer - это полезный инструмент, который позволяет вам проверять вашу таблицу стилей на соответствие стандарту W3C, выполнять тест цветового контраста и тест, чтобы убедиться, что соответствующие размеры указаны в относительных единицах измерения.

Если вам интересно, тест цветового контраста должен проверить, что комбинации цветов переднего плана и фона обеспечивают достаточную контрастность при просмотре кем-то с недостатком цвета или при просмотре на черно-белом экране.

Очистите свой CSS-код

Dust-Me Селекторы

Dust-Me Selectors - это расширение Firefox, которое находит неиспользуемые CSS-селекторы на странице, которую вы просматриваете. Когда вы тестируете последующие страницы того же домена, результат сверяется с предыдущими данными, и все найденные селекторы вычеркиваются из списка. Вы можете использовать это, чтобы проверить отдельные страницы или заставить его пауковать весь сайт.

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

CSS Redundancy Checker

Подобно Dust-Me Selectors, этот инструмент проверяет ваш сайт на наличие неиспользуемых и избыточных CSS-селекторов. Единственное, что отличается, это то, что вам нужно вручную вводить URI для каждой страницы, которую вы хотите протестировать.

Оптимизируйте и сожмите свой код CSS

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

CSS Tidy

CSS Tidy - это программное обеспечение с открытым исходным кодом, которое вы можете использовать для оптимизации и сжатия вашего файла CSS. Он доступен в формате .exe (только для Windows) и в формате zip-сценария php (все платформы, для веб-разработчиков). CSS Tidy в основном удаляет комментарии, ненужные пробелы и заменяет часть кода на сокращение. Во время сжатия вы можете выбирать между удобочитаемостью кода или максимальным сжатием. В зависимости от длины вашего кода, вы можете легко достичь степени сжатия до 30% и более.

Поскольку CSS Tidy является проектом с открытым исходным кодом, существует несколько сайтов, которые используют код и превратили его в онлайн-инструмент для людей. Вот некоторые из них:

Другие оптимизаторы CSS

CSS-оптимизатор FlumpCakes

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

Робсон CSS компрессор

Хотя это может выглядеть так же, как и у других, я обнаружил, что степень сжатия для Robson CSS Compressor самая высокая среди всех. Несмотря на то, что имеется несколько опций для настройки параметра, оставление всех параметров без изменений (все параметры отмечены) всегда дает наилучший результат.

CSS Drive CSS Compressor

Компрессор CSS, предлагаемый CSS Drive, поставляется в двух режимах, которые вы можете использовать: обычный и расширенный. В обычном режиме вам нужно только выбрать, какой уровень сжатия вы хотите (Light, Normal или Super Compact), а CSS Compressor сделает все остальное. В расширенном режиме вам предоставляется больше возможностей и больше возможностей для оптимизации таблицы стилей.

CSS Optimizer [больше не доступен]

Оптимизатор CSS от mabblog.com [больше не доступен] - это приложение командной строки для Mac и Linux. Он предназначен для тех, кому удобнее пользоваться терминалом, а не онлайн-интерфейсом. Существует также простая онлайн-версия для тех, кто хочет быстро покончить с этим.

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

Узнайте больше о: Веб-дизайн , Веб-разработка , Инструменты для веб-мастеров ,

Похожие

Комментарии