CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – YUI压缩器正在从过滤器值中移除空格大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个包含CSS的过滤器,用于在FF中添加Grayout图像,如下所示:
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中提供了跨域问题.请建议有人有任何想法如何解决这个问题?

解决方法

我发现通过试验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,1,0'/></filter></svg>#grayscale");

这是紧凑的,不会被css压缩机改变

大佬总结

以上是大佬教程为你收集整理的css – YUI压缩器正在从过滤器值中移除空格全部内容,希望文章能够帮你解决css – YUI压缩器正在从过滤器值中移除空格所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。