• ... наберите в поиске Google: sqrt(cos(x))*cos(300x)+sqrt(abs(x))-0.7)*(4-x*x)^0.01, sqrt(6-x^2), -sqrt(6-x^2) from -4.5 to 4.5
  • ...не всякое оценочное суждение должно служить модификатором поведения
  • ... сила трения - это комиссия реальности за перемещение энергии
  • ... наверх к шапке сайта можно вернуться с помощью кнопки "home"
  • ... нужна красивая кнопка на CSS - используйте наш конструктор
  • ... на нашем сайте открылся новый сервис - добавление винтажных эффектов к фото
  • ... Интернет весит больше, чем 530 миллиардов гигабайт!
  • ... участники групп Вконтакте, Google+ и Facebook знают про лампу, которая горит более ста лет, присоединяйтесь - это бесплатно же
  • ... в Microsoft Word и других редакторах неделимый пробел ставится сочетанием "ctrl+shift+space"
  • ... нажав "ctrl+alt+print scr", ты сделаешь скриншот именно активного окна в windows
  • ... снять защиту с PDF файла нереально? можно!
  • ... мы открыли магазин часов с обратным ходом и на широком ремешке добро пожаловать
  • ... прокручивать сайт вниз можно кнопкой "пробел", а вверх - "shift+пробел"
  • ... что такое реверсивный поиск изображений?
  • ... про онлайн калькулятор, который чертит графики - читаем далее
  • ... секретные смайлики Facebook - троль и ко, подробнее
  • ... что будет, если в поиске Google набрать "do a barrel roll"
  • ... как определить английский шрифт по изображению? читаем
  • ... как легко качать видео с Youtube и Vimeo?читаем далее
  • ... не сидите за компьютером больше часа без отрыва, встаньте пройдитесь!
  • ... чтобы открыть ссылку в новой вкладке браузера, достаточно при нажатии удерживать Ctrl
  • ... в английской версии Vk - нет рекламы, просто переключите язык в настройках
  • ... чтение детерминирует вербальную аддитивность
  • ... мы сами не знаем куда ведёт эта ссылка - "Мне повезёт!"
  • ... как удалить свой аккаунт в социальных сетях? легко и просто
  • ... используешь почту Gmail? прочитай про фильтры
  • ... вызывать диспетчер задач Windows гораздо удобнее сочетанием Ctrl+Shift+Esc, не снимая руки с мыши :)
  • ... как быстро изменить размер нескольким фото читать
  • ... онлайн тетрисы, которых Вы ещё не видели тут
Follow:

Оптимизаторы каскадных стилей CSS онлайн

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

При работе с популярными CMS (такими как WordPress, Joomla, Drupal и др.) нередко приходится работать с готовыми бесплатными шаблонами сайтов, но  иногда разобрать код CSS файлов в этих шаблонах просто очень трудно. Это может быть связано как с непрофессионализмом разработчиков, так и со специально запутанным кодом, например для скрытия баннера вебмастера.

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

Зачем это нужно? Несколько доводов на этот счет:

1. Запутанный код через некоторое время станет непонятным даже для Вас.

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

3. Ошибки в CSS будут препятствовать валидации кода и служат дурным тоном среди вебмастеров.

Список далеко не полон, но очень нагляден 🙂

Перейдем к практике

Для примера, мы взяли один из очень популярных CMS WordPress и файл стилей админ-консоли Dashboard.CSS. Как выглядит файл, можно посмотреть на скриншоте ниже:

Далеко не самый привлекательный код. Таким его сделали скорее для удаления лишних пробелов, но всё же хотелось бы прочитать его.

Чтобы исправить ситуацию мы пробовали использовать два онлайн сервиса по оптимизации CSS кода. Они очень схожи между собой, так как в их основу вложено единое программное ядро CssTidy. Эти онлайн сервисы используют различные версии ядра, но повторимся, функционал очень схож, поэтому будем описывать работу с одним из них, а второй Вы сами сможете опробовать.

Оптимизация кода файла стилей в CSS Beautifier.

Сервис обладает аскетичным дизайном и одной панелью инструментов. Остановимся на панели более подробно, пункты перечислены сверху вниз:

  • Compression (Степень сжатия)  — лучше не вдаваться в крайности и выбирать либо Standart, либо High.
  • Custom Template — поможет задать шаблон отображения CSS файла, если Вы новичок, то лучше не трогать это поле.
  • Preserve CSS — включите опцию, если хотите сохранить комментарии и пометки в файле.
  • Sort Selectors (caution) — лучше не включать, если порядок селекторов для Вас важен.
  • Sort Properties — сортирует свойства по алфавиту в классах.
  • Regroup selectors — группирует селекторы с одинаковым кодом, лучше оставить по умолчанию.
  • Optimise shorthands — оптимизирует сокращения, не совсем ясно назначение, но лучше оставить по умолчанию.
  • Compress colors — сжимает значения цветов.
  • Compress font-weight — сжимает свойства размеров шрифтов.
  • Lowercase selectors — переводит все селекторы в нижний регистр.
  • Case for properties — переводит свойства классов в нижний или верхний регистр.
  • Remove unnecessary backslashes — удаляет ненужные бекслеш.
  • Remove last ; — удаляет точку с запятой в конце файла.
  • Discard invalid properties — удаляет свойства, которые не соответствуют стандарту CSS версии 2.1, лучше так и оставить для лучшей совместимости с современными браузерами.
  • Add timestamp — добавляет время изменения файла.
  • Output as file — результат работы сервиса сохранится в файл.

Вставить исходный файл можно или в окно или отправить его по ссылке.

Пример работы сервиса:

Как видите, наша строчка из 6000 символов была преобразована в хороший структурированный файл, при этом потеряла в весе более 6%. Плюсы на лицо. Хотя, прежде чем полностью доверится онлайн сервису, сделайте резервные копии Ваших файлов, мало ли что 🙂

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

CSS Beautifier | CSS Beautifier(⇒)

CSS Beautifier | CleanCss(⇒)

Комментарии(2)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

    • Эти сервисы только код оптимизируют, такой градиент нужно программировать, можете просто посмотреть код например хромом. Скажу даже больше — оба градиента на этом сайте — это просто рисунки в дивах