Подробное описание основных и дополнительных настроек. Сервисные функции. Общие принципы управления приложением, установка режимов конверсии CSS-файлов.
В этой статье:
Описанные в этом документе опции и настройки соответствуют текущей официальной версии приложения, в более ранних* релизах аддона часть настроек может называться иначе, а часть функций в них может отсутствовать.
* Для ознакомления с настройками этих выпусков смотрим соответствующие ссылки в Истории версий приложения.
CSSMinMax – скрипт на языке Python, компрессор/форматтер CSS‑файлов, дополнение 2-в-1 к текстовому редактору Notepad++. Преобразует CSS любой сложности и объёма, параметры обработки устанавливаются автоматически, могут быть изменены в настройках под текущие потребности пользователя.
Скрипт имеет достаточно развитую систему настроек, позволяющих оперативно менять условия конверсии и способы обработки, может использоваться для автокоррекции некоторых типовых ошибок и для оптимизации CSS путём преобразования цветов, размеров и медиа‑правил в сокращённый вид.
Для удобства пользователя все операции с файлами выполняются полностью автоматически. Исходя из этого в скрипте не предусмотрен какой‑либо визуальный интерфейс настроек, доступно только ручное изменение ряда параметров обработки, заданных по умолчанию (отметим, что настройки по умолчанию основаны на практическом опыте работы со стилями и будут оптимальны в большинстве случаев).
Тем не менее, при желании вы можете в любой момент изменить любой параметр настроек под ваши текущие потребности путём прямого редактирования исходного кода скрипта. При этом вы должны в достаточной мере понимать назначение и действие каждого из ключей настроек, а также учитывать их взаимное влияние друг на друга.
Проще говоря, прежде чем "крутить ручку", внимательно прочитайте следующие части этого документа и не меняйте настройки "от балды" – некорректно заданные опции могут не только дать непредсказуемый результат конверсии, но и привести к подвисанию как самого скрипта, так и редактора в целом!
Для лучшего понимания, как работает каждый из ключей настроек, перед применением скрипта "в боевых условиях" вы можете "потренироваться на кошках" – в комплект поставки скрипта входит тестовый CSS‑файл (CSSMinMaxR24_test.css), содержащий примеры различных видов правил, директив и медиа‑условий (в том числе и многоуровневые, для изучения работы форматтера).
В этом файле также содержатся "неправильные" директивы, с ошибками и "опечатками", которые предназначены для наглядного изучения работы автоматической коррекции ошибок в зависимости от различных настроек.
Как отмечено выше, CSSMinMax имеет дополнительные настройки, определяющие способы преобразования отдельных элементов таблиц стилей и непосредственно влияющие на конечный результат.
Кроме различий в выходном коде, обусловленных разным набором настроек (и их комбинаций), также может изменяться и время* обработки исходного кода. В отдельных случаях обработка может длиться от десятков секунд до минуты и более. Это нормально, поскольку сложная структура (особенно – при сжатии кода) анализируется и обрабатывается существенно дольше за счёт множественных пошаговых циклов в отдельных операциях конверсии.
* Особенно это может быть заметно на слабых компьютерах при обработке достаточно больших файлов, так как время обработки напрямую зависит от мощности вашего процессора и сложности структуры текущего обрабатываемого файла. На небольших и простых файлах разница по времени сжатия или форматирования практически незаметна.
Все доступные настройки сведены в отдельную переменную set (блок настроек, содержит вложенные переменные в виде "ключ":"значение"), которая может быть отредактирована вами в любой момент в соответствии с вашими конкретными задачами для правильной обработки ваших стилей.
Для изменения отдельных ключей (параметров конверсии) следует открыть файл скрипта в редакторе (можно в том же окне, что и обрабатываемые файлы), внести нужные вам изменения в блоке переменных set и затем сохранить файл скрипта. Сделанные изменения будут применены сразу же, при первом же вызове скрипта после его редактирования (перезапуск редактора не требуется, настройки считываются каждый раз при запуске скрипта).
Для удобства пользователя в блоке настроек имеются комментарии (на английском языке), кратко поясняющие действие каждого из ключей и возможные варианты обработки в зависимости от установленных значений параметров.
Ниже приведено описание каждого из ключей настроек и указаны допустимые значения этих опций, а также указаны значения параметров по умолчанию и описано взаимовлияние отдельных настроек друг на друга.
Общее примечание 1: если не указано особо, значение параметра, равное 1 (цифра) означает "включено", значение 0 или "" (пустое строковое значение) означает "выключено" (в этом случае также cработают определённые действия по умолчанию в отдельных функциях конвертера). После символа ":" указаны значения по умолчанию, заложенные в авторской версии скрипта (поставляемой в комплекте, в архивной копии каждой из публичных версий).
Общее примечание 2: если не указано особо, значение параметра по умолчанию указано в примере настройки, допустимые значения определяются из описания параметра или согласно примечанию 1 выше.
Работает только для компрессора, при форматировании никакие комментарии никогда не удаляются.
Одна из важных настроек, определяющая обработку комментариев в CSS‑файле. Это могут быть как текстовые комментарии разработчика, так и неиспользуемые (или временно отключённые) директивы и правила. Обработка комментариев определяется несколькими настройками (всего 5 флагов, включая этот, остальные указаны ниже), которые взаимозависимы и, в свою очередь, ограничены этой опцией, имеющий максимальный приоритет.
0: Пропускать (оставлять все комментарии как есть). 1: Автопроверка с сохранением "важных комментариев" и удалением всех остальных (по умолчанию). 2: Полное удаление всех комментариев, независимо от их "важности" (минимальный размер выходного файла).
Важное примечание: любое удаление любых видов комментариев производится только при компрессии (сжатии) CSS, при форматировании этот флаг НЕ работает и никакие комментарии НЕ удаляются (но обрабатываются согласно настройке следующих четырёх флагов).
Работает только для компрессора, при форматировании комментарии всегда отделяются новой строкой.
Зависит от значения "rmcm": если комментарии удаляются, эта опция игнорируется.
Работает только для компрессора, при форматировании никакие комментарии не удаляются при любых настройках.
При этом используется известный "хак", позволяющий защитить от удаления два подряд идущих комментария, если между ними находится блок директив.
Параметр не имеет смысла для современных CSS и современных браузеров. По умолчанию проверка выключена, обработка таких комментариев не производится, эта функция оставлена только для "экзотических" случаев.
Работает только для компрессора, при форматировании комментарии никогда не удаляются (при любых настройках).
Если этот параметр не указан (пустое строковое значение, по умолчанию), проверяется только маркер по умолчанию "*" (звёздочка). Маркер по умолчанию обрабатывается автоматически и устанавливается также для автозащиты закомментированных директив в "пустых" правилах (см. ниже).
В качестве маркера можно использовать любой* цифро-буквенный символ или спецсимвол (например, знак препинания). Все комментарии, начинающиеся с этого символа (идущего первым после директивы начала комментария /*), считаются "защищёнными" и не будут** автоматически удаляться.
* Не следует использовать в качестве маркера защиты служебные символы регулярных выражений: [^.(){}\[\]!$+/?|]. Такая настройка "ломает" логику работы скрипта и будет отключена на этапе проверки допустимости символа маркера. При этом ваши комментарии, содержащие некорректный маркер, НЕ будут автоматически защищены от удаления!
** Зависит от значения "rmcm": если комментарии удаляются, эта опция игнорируется.
Работает и для компрессора и для форматтера, если такие правила (например, содержащие только само определение правила, со всеми закомментаренными директивами) присутствуют в вашем файле, они будут полностью преобразованы в комментарий для исключения ненужного "балласта" из обработки в браузере.
0: Не сохранять и не преобразовывать пустые правила, все "пустышки" автоматически удаляются. 1: Только* правила со всеми закомментаренными директивами (т.е. если это не просто пустое место в "{;}"). 2: Сохранять* все (в том числе и полностью пустые, содержашие только само определение правила). 3: Автоматически, только на основе логики обработки комментариев (отработают маркеры защищённых комментариев).
Если эта проверка используется для сохранения* "пустышек", при установке флага сохранения (1 или 2), пустые правила маркируются как "важные" комментарии с использованием маркера по умолчанию "*". При установке "автомата" (3) все "пустышки" обрабатываются как обычные правила, независимо от наличия или отсутствия в них закомментаренных директив.
* Зависит от значения "rmcm": если комментарии удаляются (в компрессоре), эта опция приведёт к удалению правил!
Если включено (1), перед запуском любой обработки/конверсии в любом направлении копия текущего файла будет автоматически сохранена в новый файл с тем же именем с добавкой маркера бэкапа (*.css.BAK).
В большинстве случаев это не имеет особого смысла, по умолчанию выключено, однако, если вы придерживаетесь стратегии "мало ли что пойдёт не так", включите этот флаг.
Работает и для компрессора и для форматтера, независимо от любых других настроек.
По умолчанию включено, при этом "шапка" CSS‑файла (важные авторские комментарии, копирайты и прочее, обычно размещаются в самом начале) сохраняется "как есть", независимо от любых настроек обработки комментариев (даже если они все удаляются, "шапка" будет в любом случае оставлена).
Если отключить этот флаг (0), обработка "шапочного" комментария в компрессоре будет зависеть от ваших настроек, в форматтере этот комментарий просто останется на месте без изменения.
Работает только при форматировании, повышает читабельность выходного файла. Если включено (по умолчанию), создаёт аккуратную "ёлочку" с многоступенчатым отступом для внутренних правил и директив с любым уровне вложения.
Если выключено (0), для всех правил будет установлен только отсуп для директив внутри каждого отдельного правила, независимо от того, находится ли это правило внутри другого (@media/@supports и т.д.) или нет.
Если включено (не 0), улучшает читабельность файла стилей и/или оптимизирует медиа‑правила. Если выключено (0), никакие дополнительные "украшательства" и/или оптимизация не применяются.
1: Включить только для форматирования (по умолчанию), повышает читабельность выходного файла за счёт добавления дополнительных отсупов, строк и пробелов, лучшего выравнивания отдельных директив (например, содержащих URL в формате base64), а также путём удаления лишних символов там, где они не нужны. 2: Удаляет* ключевое слово "screen" из условий медиа‑правил (в большинстве случаев применение стилей направлено на вывод на экран и этот ключ в медиа‑условиях излишен). Работает как при сжатии так и при форматировании (в этом случае также отработают все "улучшаторы" читабельности, как для значения 1).
* В некоторых случаях при этом может потребоваться добавление в ваш CSS‑файл дополнительных директив для печати (правила с ключевым словом "print").
Работает как для компрессора так и для форматтера. Выполняет оптимизирующие преобразования отдельных директив и правил, в целом улучшает читабельность, упрощает обработку и уменьшает размер итогового файла стилей, разрешает коррекцию некоторых типовых ошибок и "очепяток", заменяет часть значений в отдельных директивах на их сокращённые функциональные аналоги.
0: Не использовать никаких дополнительных преобразований, все правила и директивы остаются "как есть". 1: Замена на сокращённые функциональные аналоги и коррекция ошибок (по умолчанию). Преобразование всех RGB(A)/HSL(A) цветов в HEX-формат (6- или 8‑символьный) с последующим укорачиванием их до HEX‑3/HEX‑4 (по возможности). Преобразование незначащих нулей и отсечение незначащих единиц измерения (например, margin:0 0 0 0; или margin:0px конвертируется в просто margin:0). Проверка правильности отступов перед скобками для условий в медиа‑запросах и в директивах с вычислением значений, содержащих функцию calc(). 2: Оптимизация* медиа‑правил. Замена операторов "or" на перечисление через "," (улучшает совместимость вашего CSS с разными браузерами). Предупреждение: "автоматика" конвертера может сработать не всегда корректно, если попадутся достаточно сложные условия правил! 3: Оптимизация* медиа‑правил. Конверсия с объединением условий правил (по возможности). Например, двойное условие проверки ширины экрана браузера (max-width:100px) and (min-width:50px) будет сконвертировано в более короткое диапазонное условие 100px >= width >= 50px). Предупреждение: такая конверсия может стать причиной ошибок обработки правил в старых браузерах!
* Оценивайте вероятность проблем при установке этого значения, учитывайте работоспособность конвертируемых правил в браузерах, на которых предполагается использование вашего файла стилей!
* При установке этого значения также будут применены все замены значений на сокращённые аналоги (как при установке значения 1).
Если настройка включена (1, 2 или 3), также будет доступна работа трёх дополнительных оптимизирующих параметров (корректоры кода, см. ниже), если она отключена (0), зависимые от неё параметры игнорируются и не применяются.
Коррекция основана на текущих стандартах для зарезервированных ключевых слов псевдо‑элементов.
Работает как для компрессора так и для форматтера. Выполняет автопроверку и исправление (при необходимости) неправильных операторов ":" для правил с псевдо‑классами и псевдо‑элементами. Работает также для части специфичных псевдо‑элементов (‑webkit/‑moz).
По умолчанию включено (1), отключайте только если эта коррекция на ваших файлах даёт ошибки.
Работает как для компрессора так и для форматтера. По умолчанию включено* (1).
* Может приводить к ошибкам в старых браузерах, "не понимающих" четырёхзначные цвета́ формата HEX. В этих случаях следует отключить опцию (0).
По умолчанию выключено (некоторое замедление процесса обработки). Это (отключение) связано с ненулевой вероятностью появления ошибок при "пакетной" замене по всему файлу (например, при конверсии повторяющихся цветовых директив), если обрабатывается файл большого размера и число повторов в нём достаточно велико.
Необходимость (и корректность работы) этой опции с вашими файлами следует проверять самостоятельно. Поэтому включайте, проверяйте и решайте только по результатам обработки именно ваших файлов.
Исправление проблемы с псевдо‑классами в браузерах MSIE‑5/6 (в современных CSS практически не используется, для всех относительно новых браузеров исправление не требуется).
Подробнее о проблеме можно прочитать: здесь (на английском) или вот тут (на русском).
По умолчанию выключено. Включайте только если вам реально требуется обработка такого фикса в вашем файле.
Относится только к конверсии "по месту" (при замене выделенного фрагмента в текущем файле). При обработке файла целиком (с записью результата в новый файл) автосохранение выполняется всегда и безусловно, независимо от установки этого параметра.
По умолчанию выключено. Включайте только если автосохранение вам действительно необходимо.
Относится только к конверсии "по месту" (при замене выделенного фрагмента в текущем файле). При обработке файла целиком (с записью результата в новый файл) это не требуется (исходный файл не меняется) и опция игнорируется.
По умолчанию выключено. Включайте только если есть проблемы с работой буфера отмены при ваших настройках редактора.
Относится только к сжатию (компрессор). Улучшает читабельность сжатых файлов. Если значение параметра больше 0, скрипт переносит правила с длиной, большей этого числа, на новую строку. Если какое‑либо правило длиннее, оно в любом случае не будет "разорвано" и останется на одной строке целиком.
По умолчанию выключено (0). При этом сжатый файл выглядит как один "большой кирпич" однострочного непрерывного текста и имеет минимальный размер (при прочих равных).
Поэкспериментируйте со значениями, подобрав подходящее для каждого вашего частного случая. Например, установка значения в 1 даёт неплохой результат: в этом случае опция будет работать как "одно правило = одна строка", что достаточно комфортно как при изучении так и при практической отладке даже относительно объёмных CSS‑файлов.
Допустимо указывать только целые положительные числа, в противном случае опция считается выключенной (0) и игнорируется при конверсии.
Относится только к операциям форматирования при обработке файлов целиком с сохранением результата в новый файл. При этом новый файл формируется из имени исходного CSS‑файла с добавкой заданного префикса. Расширение ".css" добавляется автоматически, его указывать не нужно!
Если этот параметр не задан (по умолчанию, ""), в качестве "довеска" по умолчанию используется "_MAX".
Например, если имя текущего файла "my_css.css", после форматирования результат по умолчанию будет сохранён под именем "my_css_MAX.css" (в той же папке, что и исходный файл).
Во избежание ошибок сохранения используйте в этом параметре только символы, допустимые для применения в именах файлов!
Относится только к операциям сжатия (компрессии, минификации) при обработке файлов целиком с сохранением результата в новый файл. При этом новый файл формируется из имени исходного CSS‑файла с добавкой заданного префикса. Расширение ".css" добавляется автоматически, его указывать не нужно!
Если этот параметр не задан (по умолчанию, ""), в качестве "довеска" по умолчанию используется "_" (символ подчёркивания).
Например, если имя текущего файла "my_css.css", после форматирования результат по умолчанию будет сохранён под именем "my_css_.css" (в той же папке, что и исходный файл).
При желании вы можете установить свой собственный "стандарт" на именование минифицированных файлов стилей. Чаще всего в качестве такого префикса используется ".min". При этом имя выходного сжатого файла для примера выше будет выглядеть как "my_css.min.css".
Включает проверку, вызов и запуск сжатия файлов скриптов на языке JavaScript с помощью дополнительного плагина JSTool (должен быть предварительно установлен в вашем редакторе).
Относится только к операциям сжатия (минификации) при обработке файлов целиком с сохранением результата в новый файл. При этом новый файл формируется из имени исходного JS‑файла с добавкой заданного префикса. Префикс и расширение выходного файла (например, ".min.js") должны быть указаны полностью в этом параметре!
При желании вы можете установить свой собственный "стандарт" на именование минифицированных файлов скриптов. Однако, чаще всего в качестве "типового" префикса используется ".min".
В итоге, если, например, имя текущего файла "my_js.js", после компрессии результат будет сохранён под именем "my_js.min.js" (в той же папке, что и исходный файл).
Если этот параметр не задан (по умолчанию, ""), попытка вызова плагина JSTool не производится, все файлы будут обрабатываться как файлы стилей (независимо от типа/расширения).
Относится только к обработке файлов целиком с сохранением результата в новый файл (как при сжатии, так и при форматировании исходного файла). При конверсии "по месту" содержимое фрагмента обрабатывается в соответствии с текущей кодировкой файла.
Включение этой опции (по умолчанию) гарантирует корректное преобразование и сохранение исходного кода, содержащего символы не только латинского алфавита (например, кириллицу, символы греческого алфавита и другие национальные языковые символы).
Если этот параметр выключен (0), сохранение нового файла будет сделано в кодировке по умолчанию, заданной в настройках вашего редактора. В отдельных случаях это может приводить к ошибкам обработки ваших стилей в разных браузерах.
Кроме регулируемых настройками функций, в CSSMinMax заложен ряд правил обработки, которые применяются безусловно и безотносительно направления конверсии. Эти правила призваны повысить качество кода выходного файла и привести его в соответствие с современными стандартами CSS (даже если разработчик стиля их не учёл предварительно, до запуска конверсии).
В частности, при конверсии всегда выполняются следующие безусловные действия и преобразования:
…если они "дороги вам как память", просто напишите в них хоть что‑нибудь…)
…и вообще всего, что является лишним "балластом", не несущим полезной нагрузки и даже приводящим к ошибкам…
Связано с требованиями текущих стандартов, смотрим: MDN: @charset и MDN: @import.
…кроме того, из всех "@charset" берётся только первый, он и переносится по принципу "должен остаться только один"…)
…по принципу "не трогать и не менять всё, что кавычках", точнее – почти всё, исключения тоже есть…
Это гарантирует неизменность строковых параметров CSS, их содержимое всегда остаётся в виде "как есть".
Срабатывает (практически)) безотказно, с определённым запасом по "дуракоустойчивости".
Если вы получаете сообщение "It's not a CSS!" при запуске скрипта, значит "что-то тут не так"…)
Если ваш файл (или выделенный в нём фрагмент) содержит хотя бы один пробельный символ (или перенос строки) после открывающей фигурной скобки, он будет считаться "несжатым" и для него будет запущена компрессия. В противном случае выполняется форматирование файла.
Кстати сказать, вы можете использовать эту "упрощёнку" как некий "хак" для быстрой обработки "старых" файлов – просто добавьте в любой ранее сжатый файл один пробел или "ентер" и для него автоматом запустится повторная компрессия с вашими текущими настройками.
Безусловная проверка отступов после объединяющих операндов перед следующими за нами скобками.
Связано с требованиями текущих стандартов, смотрим: Media Queries Syntax
Для наилучшего результата включите и используйте настройку "extr":1.
Безусловная проверка отступов перед и после знаков операций сложения/вычитания.
Связано с требованиями текущих стандартов, смотрим: MDN: calc().
Направлено на компактность и уменьшение размера выходного кода/файла.
Для достижения наилучших результатов рекомендуется сделать первоначальный "двойной прогон" (если ваш файл стиля ещё ни разу не обрабатывался "минимаксером"). Иными словами, просто запустите скрипт два раза (последовательно), чтобы конечный результат обработки был получен при прохождении конверсии в обе стороны (сжатие/форматирование или наоборот, форматирование/сжатие).
При этом гарантированно отработают все виды оптимизации и будет убран весь лишний "мусор" из кода, что в итоге даст на выходе компактный, качественный и корректный файл стилей.
В дальнейшем, при необходимости вносите нужные вам изменения и доработки в отформатированный (и проверенный!) файл, а потом запускайте только его сжатие перед вводом в эксплуатацию.
Проверить результаты конверсии можно разными способами, один из которых состоит в загрузке стиля в браузер и его исследования в консоли. Варианты проверок при этом ограничены только функциональностью вашего браузера и вашими навыками работы в консоли.
Ещё один, достаточно простой и быстрый (и, самое главное, беспристрастный), способ заключается в проверке вашего файла стилей на специализированных онлайн‑сервисах. При этом обеспечивается высокая скорость проверки и гарантированно отслеживаются нарушения стандартов (т.н. проверка "валидности") в директивах и правилах, причём, делается это независимо от каких‑либо функциональных особенностей конкретной версии вашего браузера.
Автор рекомендует для онлайн‑проверок сервис проверки CSS от W3C, как один из качественных ресурсов, позволяющих проверить ваши файлы стилей на предмет соответствия разным версиям веб‑стандартов и определить все "проблемные точки" для их последующего устранения.
В качестве примера оценки можно привести результаты валидации основного файла стилей, применяемого не только на этом сайте, но и на всех других сайтах Проекта Good CRX.
Далее, ошибки (если они есть) вы можете исправить и повторно загрузить ваш CSS‑файл на проверку. Лучше это делать с несжатым файлом (или с минифицированным с опцией "wrap":1), так проще найти строку/место ошибки и исправить её.
После исправления проблем ваш файл готов к сжатию и публикации на вашем веб‑сайте (или в другом вашем приложении).
