YUI Compressor 正在从过滤器值中删除空格答案

【问题标题】：YUI Compressor is removing spaces from filter valuesYUI Compressor 正在从过滤器值中删除空格
【发布时间】：2013-07-19 02:56:01
【问题描述】：

我有一个包含 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 中出现了跨域问题。请建议是否有人对我如何解决此问题有任何想法？

【问题讨论】：

标签： css

【解决方案1】：

我通过试验 JW. 的想法发现您可以对整个字符串进行 base64 编码，除了最后的 #grayscale 部分并添加相应的编码部分，或者甚至更好。仅对 xml 属性和/或标签名称之间的空格进行 url 编码，并用逗号分隔矩阵值。

所以最后你有：

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 压缩器改变

【讨论】：

附带说明，即使解决方案有效，但在 IE8 和更早版本中应用灰色过滤器会导致 PNG 文件的多通道透明度丢失。还没有找到解决方案。

【解决方案2】：

字符串的 URL 部分（从 <svg 到 </svg>）需要进行 URL 编码。或者，您可以将 ;base64 放在 ;utf8 之后，然后对 URL 进行 Base64 编码。

但是在 URL 中使用空格是不正确的……这就是 YUI 压缩器搞砸的原因。

【讨论】：

这是正确的答案：您应该对数据 URL 进行 URL 编码。

【解决方案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 方法中跟踪到了一行。

这会从 css 的主体中提取数据 url（正如您所期望的，给出它的名称），以防止它们被缩小。但是，它在存储它们之前会进行一些处理：

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

这会将任何空白字符替换为空，从而将所有空格从 SVG 标记中去除。将此行更改为：

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

通过留下一个空格为我解决了这个问题。

由于 PHP 版本是 Java 压缩器的直接端口，我会假设同样的错误。

【讨论】：