Компрессор YUI удаляет пробелы из значений фильтра

У меня есть css, содержащий фильтр для добавления изображений серого в FF следующим образом: -

filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */

Когда я использую компрессор YUI, он удаляет все пробелы между значениями фильтра и становится следующим: -

.desaturate{filter:url("data:image/svg+xml;utf8,<svgxmlns='http://www.w3.org/2000/svg'><filterid='grayscale'><feColorMatrixtype='matrix'values='0.33330.33330.3333000.33330.33330.3333000.33330.33330.33330000010'/></filter></svg>#grayscale")}

Его удаление пробелов, которое делает его бесполезным в FF.

Я также попытался переместить его в файл .svg, но затем он дает проблемы с перекрестным доменом в FF. Пожалуйста, предложите, чтобы кто-нибудь знал, как я могу исправить эту проблему?

Ответ 1

Я узнал, экспериментируя с JW. идея, что вы можете base64-кодировать всю строку, за исключением конечной части #grayscale и добавления соответствующей части кодировки, или, что еще лучше. только url-encode пробелы между атрибутами xml и/или именами тегов и разделение значений матрицы запятыми.

Итак, в итоге у вас есть:

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333,0.3333,0.3333,0,0,0.3333,0.3333,0.3333,0,0,0.3333,0.3333,0.3333,0,0,0,0,0,1,0'/></filter></svg>#grayscale");

который компактен и не изменяется при помощи компрессора css

Ответ 2

URL-адрес строки (от <svg до </svg>) должен быть закодирован в URL-адресе. Или вы можете поместить ;base64 после ;utf8 и Base64-кодировать URL вместо этого.

Но неправильно использовать пробелы в URL-адресе... почему компрессор YUI испортил его.

Ответ 3

Я собираюсь, если вы уже используете самую последнюю версию (2.4.7), то это скорее всего то, что их CSS minifier не учитывает, и вы захотите поднять отчет об ошибке с ними в http://yuilibrary.com/projects/yuicompressor/

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

Ответ 4

Вы можете добавить запятые между значениями feColorMatrix:

<feColorMatrix type=\'matrix\' values=\'0.3333,0.3333,0.3333,0,0,0.3333,0.3333,0.3333,0,0,0.3333,0.3333,0.3333,0,0,0,0,0,1,0\'/>

но это не устраняет проблему с пробелами между: svg xmlns

хотел бы понять это тоже.

Ответ 5

Я столкнулся с этой проблемой в порту PHP компрессора (https://github.com/tubalmartin/YUI-CSS-compressor-PHP-port) и отследил его до строки в extract_data_urls.

Это извлекает URL-адреса данных (как и следовало ожидать, учитывая его название) из тела css, чтобы предотвратить их минимизацию. Тем не менее, он выполняет небольшую обработку, прежде чем он сохранит их:

$token = preg_replace('/\s+/', '', $token);

Это заменяет любой пробел символами пробела ничем и поэтому удаляет все пробелы из тега SVG. Изменение этой строки на:

$token = preg_replace('/\s+/', ' ', $token);

исправил проблему для меня, оставив одно место.

Поскольку PHP-версия является прямым портом Java-компрессора, я бы предположил, что эта же ошибка.