【原】YUI压缩与CSS media queries下的bug

简介:

大概是上个月,使用YUI压缩一个css文件后,发现只要是被压缩后的css文件有部分根本无法工作,一直都不知啥问题引起的,让我感到头疼。

今天发现了只要是在媒体查询中的样式无法起作用,于是才开始怀疑是media被压缩后引起的bug,对YUI压缩不得不产生成疑问

后来谷歌了:

果然是YUI引起的bug:

上面的图片解释为:如果电脑的YUI compressor还是旧的版本,压缩中,YUI compressor将media中的and后面重要的空格给删除了,导致media queries失效。

后来我查看了电脑的YUI版本,我擦,居然是2009年8月份,严重out了- - 亲!要与时俱进啊!

下载个最新版本后终于解决问题啦/(ㄒoㄒ)/~~

下载地址:https://github.com/yui/yuicompressor/releases

想要更快更简单的压缩办法吗?

直接在线压缩:http://ganquan.info/yui/?hl=zh-CN

 

参考文章:

http://www.456bereastreet.com/archive/201012/yui_compressor_and_css_media_queries/

 

作者:白树

出处:http://peunzhang.cnblogs.com/

目录
相关文章
|
Web App开发 前端开发 开发者
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
595 0
|
缓存 前端开发 IDE
【专栏:工具与技巧篇】HTML与CSS代码压缩与合并
【4月更文挑战第30天】本文探讨了优化Web性能的关键——HTML和CSS代码压缩与合并。代码压缩通过移除空白字符、注释和缩短标识符减小文件大小,而代码合并则减少HTTP请求。开发者可借助在线工具、构建工具插件、编辑器扩展或手动方式实现压缩和合并。最佳实践中,应保留未压缩备份,测试压缩效果,利用缓存并自动化流程。同时,注意适度优化,避免影响首屏渲染速度。关注新工具和策略以维持网站性能和可维护性。
481 3
|
Web App开发 前端开发 JavaScript
CSS 媒体查询 @media【详解】
CSS 媒体查询 @media【详解】
422 0
|
存储 前端开发 JavaScript
详细解读CSS的压缩方法与解压
详细解读CSS的压缩方法与解压
171 0
|
存储 前端开发 JavaScript
详细解读CSS的压缩方法与解压
详细解读CSS的压缩方法与解压
237 0
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
编解码 前端开发 容器
CSS语言的@media查询
CSS语言的@media查询
|
编解码 前端开发 信息无障碍
CSS媒体查询(@media)全面解析
CSS媒体查询(@media)全面解析
276 1
|
编解码 前端开发 信息无障碍
CSS媒体查询(@media)全面解析
CSS媒体查询(@media)全面解析
299 1

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    224
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    216
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    154
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    129
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    261
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    394
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    171
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    108
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    181
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    249