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 - это хороший способ увеличить скорость загрузки вашего сайта. Действительно, уменьшив 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. Если вы использовали любые другие инструменты, которые более полезны, чем упомянутые выше, поделитесь ими с нами в комментариях.

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

Похожие

6 основных дополнений Firefox для дизайнеров
... CSS . Функции этого меню включают в себя возможность отключать стили, отображать CSS по типу мультимедиа, просматривать CSS, просматривать информацию о стилях, добавлять пользовательские таблицы стилей или напрямую редактировать CSS . Следующей особенностью, интересующей дизайнеров, является меню «Изображение» . Помимо возможности отображения атрибутов ALT, размеров изображений, размеров файлов изображений и путей к изображениям, вы можете отключить
15 самых популярных онлайн-инструментов HTML Validator в 2019 году
... для окончательного выполнения, то это может создать некоторые проблемы. Таким образом, если клиент может удалить все синтаксические ошибки, если таковые имеются, тогда ожидаемый результат может быть достигнут. Здесь
Проверка работоспособности DOM с помощью Google Chrome и CSS HTML Validator
... код HTML, сгенерированный из DOM, в буфер обмена. CSS HTML Validator должен автоматически видеть новый HTML в буфере обмена, открывать его (как новый документ) и затем проверять его (если вы также включили автоматическую проверку). Важный CSE HTML Validator v16 может не обнаружить текст буфера обмена как документ HTML, поскольку он может не содержать DOCTYPE. Эта проблема решена в v17 +, потому что он улучшил обнаружение
... иглашаю вас прочитать гостевую запись Marcin Pachla, частного автора блог о музыке Kinta"> Я пригл...
... иглашаю вас прочитать гостевую запись Marcin Pachla, частного автора блог о музыке Kinta"> Я приглашаю вас прочитать гостевую запись Marcin Pachla, частного автора блог о музыке Kinta.com.pl кто сталкивался с рекламной кампанией сети Play » Проверьте свой смартфон
Как запускать приложения Firefox OS в вашем браузере Android
... вой телефон Android? Установка APK на Android вручную открывает целый новый мир приложений, и это легко сделать. Подробнее и установить его на своем устройстве. Откройте веб-сайт Firefox Marketplace, который должен быть одним из эскизов по умолчанию в разделе «Лучшие сайты» на главной странице Firefox. Вы также можете перейти непосредственно на этот сайт, введя https://marketplace.firefox.com/
Проверка файлов веб-контента
WebStorm выполняет два разных период действия проверки: Полная проверка включает проверку структуры в дополнение к проверке правильности формы. Полная проверка доступна для файлов, связанных с Схема XSD (определение схемы XML) или содержать Определение типа данных (DTD) , WebStorm проверяет, соответствует
Журнал Lightspeed: больше, чем сумма его частей Джо Холдемана
Вот Это Да! Трудно превзойти сочетание великого писателя и великого рассказчика в перспективе от первого лица. Это именно то, что « Больше, чем сумма его частей » Джо Холдемана:
... кода цифрового компаса и обнаружили, что большинство свободно доступных примеров использовали уст...
... кода цифрового компаса и обнаружили, что большинство свободно доступных примеров использовали устаревший Sensor.TYPE_ORIENTATION. Немного больше копания, и я обнаружил, что Sensor.TYPE_ORIENTATION на самом деле никогда не был настоящим аппаратным датчиком, а программным сервисом, который составлял значения акселерометра и датчика магнитного поля. Таким образом, потянув из нескольких онлайн-источников, включая Статья
Дизайн для печати с помощью CSS
... и веб-разработчиком, писателем и докладчиком. Она является автором ряда книг, в том числе ... Подробнее о Рейчел ... Если вы упоминаете печать с помощью CSS для многих людей, которые работают в Интернете, таблицы стилей печати это использование, которое приходит на ум. Мы все хорошо привыкли к созданию таблицы
Мастер PHP | Maven и PHP
... свой первый проект Для создания простого проекта из командной строки я буду использовать Maven Архетип Плагин , Плагин Archetype позволяет пользователю создать проект Maven из существующего шаблона, называемого архетипом. Вы можете запустить плагин Maven Archetype с помощью команды mvn archetype: generate для создания нового проекта из архетипа в папке, соответствующей его идентификатору
АТБ, Сильпо, Таврия В и другие: топ мобильных приложений украинских ритейлеров
Ассоциация ритейлеров Украины проанализировала: из продуктовых сетей занимался созданием мобильного приложения, функционал и возможности в него вложил, а также провела тест-драйв всех существующих приложений компаний группы FMCG. Как оказалось, купить продукты через приложение можно только в мобильном приложении Таврия В. Остальные, да и то не все, только продвигают акции, позволяют составить списки покупок или найти ближайший магазин. Кто первый пошел в смартфон, как используют приложения

Комментарии

Может быть, вы можете получить скидку от вашего интернет-провайдера, если его услуги не на должном уровне?
Может быть, вы можете получить скидку от вашего интернет-провайдера, если его услуги не на должном уровне? Кредит фотографии: Wikimedia Commons
Хотите узнать больше о диете OXY?
Хотите узнать больше о диете OXY? Нажмите.
Q # 3) Каков рабочий механизм HTML Validator Tools?
Q # 3) Каков рабочий механизм HTML Validator Tools? Ответ: Он работает по простому механизму проверки программы, чтобы пометить ошибки, и предоставляет возможность выбрать ошибки одну за другой или сделать полную проверку приложения и напрямую заменить все ошибки. Q # 4) Что может быть возможным, если HTML-страницы не проверены? Ответ. Может существовать вероятность того, что текущий код работает нормально
Szast prast и тема , Вы не найдете время для этого?
szast prast и тема , Вы не найдете время для этого? Я говорю вам, что вы найдете :) И я уверен, что вы, как и я, вы делаете это годами. Я сделал книгу для Milenka # 1, и я собираюсь заказать еще несколько "Matuniowych" в конце этого месяца. И для нужд книг наших праздников я наконец-то сфотографировал наши две поездки, где мы разбивали фотографии и фильмы, как глупые, и ни одна из них не увидела свет :) В фотокнигах Empik есть готовые шаблоны для любого случая. вид
Я не знаю откуда, исходя из убеждения, что картинки всегда делаются по отношению к объекту?
Я не знаю откуда, исходя из убеждения, что картинки всегда делаются по отношению к объекту? Это чепуха! Идите к стулу, сделайте фотографию, лягте, сделайте то же самое, переместите немного в одну сторону, снова фотографию - сравните эффекты сейчас. Я уверен в твоем удивленном лице! [Я не рекомендую использовать перспективу «лягушка» в портретной фотографии, я объясню по случаю] Какая картина вас больше интригует? Стоит побороться за внимание получателей, отличным инструментом
В конце концов, большинство пользователей устанавливают приложения только через Play Store, а Google внимательно следит за тем, чтобы вредоносные программы не проходили, верно?
В конце концов, большинство пользователей устанавливают приложения только через Play Store, а Google внимательно следит за тем, чтобы вредоносные программы не проходили, верно? ... Подробнее приходит из-за пределов Google Play Store.
Является ли Firefox достойной заменой ChromeOS?
Является ли Firefox достойной заменой ChromeOS? Джек Валлен ответит на этот вопрос и проведет вас через процесс установки Firefox Quantum. Chromebook - удивительный инструмент, обладающий непревзойденной эффективностью, скоростью и простотой использования. Тем не менее, с выпуском Firefox Quantum пользователи Chromebook могут почувствовать себя немного обделенными одним серьезным опытом. Не бойтесь, бесстрашные Chromebookies, еще не все потеряно. С устройством, которое поддерживает
Что не боль?
Что не боль? Лежа на диване, смотрю Аббатство Даунтон в Prime Video и кричу вашему демону Amazon: «Алекса, мне нужно шесть помидоров семейной реликвии и бутылка оливкового масла экстра-класса для завтрашней доставки». Выберите свой рассказ: Amazon выигрывает, потому что
Ты до сих пор не знаешь Kiss my Ki?
Ты до сих пор не знаешь Kiss my Ki? Наши новые группы проектов в одном поиске Результаты более 100 интернет-магазинов. Посетите Kiss My Ki Защити свой телефон Там не было никаких сборов Наслаждайся музыкой Информация на этом сайте не гарантируется. Kimovil не несет ответственности за любые недостатки, упущения или
Чувствуете, что не можете загружать песни с YouTube без осложнений и хлопот?
Чувствуете, что не можете загружать песни с YouTube без осложнений и хлопот? Ну, эта статья может помочь вам в том, как легко скачать песни с YouTube. От iMobie | Опубликовано: 30 октября 2018, Последнее обновление: 25 апреля 2019 YouTube, как один из самых популярных веб-сайтов в мире, является веб-сайтом для обмена видео, который позволяет нам исследовать разнообразный контент и множество разнообразных возможностей в одном месте. И,
Что мне не хватает?
Что мне не хватает? Я знаю, что у докси очень сильная добыча, но почему он начал гоняться за кошками только в последние четыре месяца? A: Трудно сказать, почему вы вдруг видите это преследование, когда никогда не видели. Я предполагаю, что все кошки были резидентами до того, как туда попала ваша собака? Убедитесь, что режим тренировки вашей собаки регулярный и очень утомительный. Упражнения часто могут решить множество проблем сразу!

?вой телефон Android?
Может быть, вы можете получить скидку от вашего интернет-провайдера, если его услуги не на должном уровне?
Хотите узнать больше о диете OXY?
Q # 3) Каков рабочий механизм HTML Validator Tools?
Q # 3) Каков рабочий механизм HTML Validator Tools?
Q # 4) Что может быть возможным, если HTML-страницы не проверены?
Szast prast и тема , Вы не найдете время для этого?
Я не знаю откуда, исходя из убеждения, что картинки всегда делаются по отношению к объекту?
Я не рекомендую использовать перспективу «лягушка» в портретной фотографии, я объясню по случаю] Какая картина вас больше интригует?
В конце концов, большинство пользователей устанавливают приложения только через Play Store, а Google внимательно следит за тем, чтобы вредоносные программы не проходили, верно?