CssGaga

CssGaga – CSS 优化

保留空格(IE6 bug) Before: .classname:first-letter { font-weight: bold; } .classname:first-line { font-weight: bold; } After: .classname:first-letter {font-weight:bold} .classname:first-line {font-weight:bold} 中文字体Unicode编码 Before: .classname { font-family: 宋体; } .classname { font-family: 黑体; } .classname { font-family: 微软雅黑; } After: .classname{font-family:5B8B4F53} .classname{font-family:9ED14F53} .classname{font-family:5FAE8F6F96C59ED1} 注:支持以上三种字体

  • ytzong
    ytzong
CssGaga

CssGaga - 帮助索引

不接受 QQ、微信等 IM 方式咨询,请在博客留言或邮件联系 ytzong7[at]gmail.com 以下请按顺序阅读 从安装到使用(内附下载地址) [视频] CssGaga 初体验 、PPT及功能演示视频 (未同步更新,仅供大概了解下功能) CSS 压缩 CSS 合并 CSS 优化 DataURI 抽取图片 图片压缩 部署文件 哀悼日网站一键变灰 皮肤1toN Icon 1toN AutoSprite(自动合并图片) Image to Code 同步资源 时间戳 会话管理 CSS 关联性检查 快捷键

  • ytzong
    ytzong
性能

background:url(#)的性能问题

很久之前写了使用 background:url(#) 解决 IE bug,原理是请求一张不存在的图片,不过写法有些问题。 写为 background:url(#) 会增加一个http请求,比如当前css的URL为 http://imgcache.qq.com/qzonestyle/project/css/xxx.css 则会多请求一次 http://imgcache.qq.com/qzonestyle/project/css/xxx.css# 和以下类似(详见解决IE6.0.2800压缩HTTP数据Bug之草记) http://imgcache.qq.com/qzonestyle/project/css/xxx.

  • ytzong
    ytzong
Bug

IE font-family bug

三谈Web默认字体中有这么一段: GB 编码问题。font: 12px sans-serif; 不设置宋体,页面为 GB 系列编码时,非中文操作系统下(港台用户中有不少英文系统,还有海外华人),IE的默认字体是 Microsoft Sans Serif Regular, 很难看。截图为证: 有两个解决方案:a. 用”宋体”垫底;b. 不加 sans-serif. ——- 2013-7-31 补充 ——- 由于上面图片失效,补一个出现同样问题的图片 ——- 2013-7-31 补充结束 ——- 在Qzone简版个人中心(同事做的)也遇到过类似的问题,不过不局限于以上条件,详情如下: 出现在简体中文旗舰版Win7的IE8中(

  • ytzong
    ytzong
HTML

IE8 X-UA-Compatible 失效?

现在维护的项目中使用了 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > 来把IE8带入IE7标准,今天测试提出一个IE8下的小BUG,简单分析了一下,发现浏览器始终为IE8标准,并未切换到IE7标准(F12调出开发工具,文本模式自动勾选在IE8标准) 翻了下MSDN《定义文档兼容性》,里面有这么一句: X-UA-compatible 标头不区分大小写;不过,它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前的标头(HEAD 节(可能为英文网页))中。 MSDN有机器翻译的传统,再看下英文版: The X-UA-compatible header is not case sensitive;

  • ytzong
    ytzong
CSS

图文混排一粒

过需求时一不留神,很爽快的接了个如下图的效果: 条件及要求: 图片宽度及高度不固定 分享给好友贴底 照片描述及分享给好友左侧距图片10px 照片描述由后台控制输出字数 等做起来发现还挺折磨人,本想下周甩他们一句做不了完事,不过考虑 200,000,000+ P-people  no jobs… 马上变得蛋定,上代码: <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title&

  • ytzong
    ytzong
性能

CSS 换行符对 Gzip 的影响

之前做过一个css压缩工具,其中一点是把换行符都去了,有同事反映这个做法过于极端,加上服务器端会进行gzip,这个换行符到底要不要去掉呢?于是拿了个项目中的文件简单测试了一下(css中的注释已去除): 去除换行符保留换行符gzip前46.4KB48.0KBgzip后8.40KB8.58KB可见,去除换行符对性能来说还是有好处的,不过前提是注意这些[网站优化原则](http://www.99css.com/196)。

  • ytzong
    ytzong
工具

跨浏览器的Firebug

标题党一把,哇哈哈哈哈~ Firebug Lite越来越好了,Chrome的Firebug Lite扩展其实就是Firebug Lite(扩展的缺点是要安装),但是我发现身边的一些人(包括大牛)对其还不太了解,下面简单介绍一下 Firebug Lite安装及使用 用需安装Firebug Lite的浏览器打开Firebug Lite安装页面 设置浏览器显示书签栏 将此链接[Firebug Lite 1.3Xb](javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F.documentElement.

  • ytzong
    ytzong
Bug

IE6/7下划线对不齐bug

这篇帖子《关于IE下英文字体跟中文字体不能对齐的根源以及解决办法》说的已经很详细了,不过不止中英文混合才会出现这个bug,比如《Internet Explorer: Broken Underlines》。 解决方法一般有以下几种: 对下划线元素使用宋体,缺点是宋体的英文数字比较难看,我个人也比较鄙视这种做法 触发下划线元素的hasLayout,缺点是inline元素会变成inline-block元素,折行时会整块掉下来 使下划线元素浮动,缺点是inline元素变成block元素,而且还要清除浮动 去除下划线元素相邻元素(相邻元素的子元素或父元素等等)的vertical-align(或重写为baseline),垂直居中用position:relative结合top来实现 在使用inline-block元素做sprite容器时经常会遇到这个问题,2、4是比较好的方案,记得要分清楚使用场合哦~ 当然IE6下还会出现行高失效bug,old9给出了一种方法《A fix to the IE6 line-height/replaced element bug》,不过在某些追求精确到像素的情况下还是用PIE的方法《Microsoft Internet Explorer

  • ytzong
    ytzong
HTML

Web标准中的特殊字符»

在最开始学习web标准的时候有这么一条: 把所有<和&特殊符号用编码表示 : 任何小于号(<),不是标签的一部分,都必须被编码为& l t ;   任何大于号(>),不是标签的一部分,都必须被编码为& g t ; 任何与号(&),不是实体的一部分的,都必须被编码为& a m p; 注:以上字符之间无空格。 而在我们平时的工作中经常会遇到这种情况: 更多>> 国内的同行大多是写两个大于号&gt;&gt;或者干脆就写>>(更夸张的是有人为了追求和效果图完全一致的效果而单独对这里使用宋体),更合理的写法如下:

  • ytzong
    ytzong
Let's make the web faster

[转译]优化浏览器渲染

ISD Webteam的大布同学(twitter:@tc_bryanzhang)牺牲了自己大量的xx时间翻译了Page Speed系列中的Optimize browser rendering,因其blog还在重新打造当中,所以偶这里先转载了,以下是翻译全文: 优化浏览器渲染 资源被下载到客户端后,浏览器仍需加载,解释,并渲染HTML、CSS和Javascript代码。只需利用现有浏览器的特性简单地编排你的代码和页面,就可以提升客户端的性能。 使用高效率的CSS选择器 避免CSS expressions 将样式表放在页面顶部 指定图像尺寸 使用高效率的CSS选择器 概述 避免低效率的匹配大量元素的键选择器【key selectors】可以加快页面渲染。 详细信息 当浏览器解析HTML时首先构造一个内部文件树来代表所有显示的元素。然后浏览器根据标准的CSS级联、继承和排序规则,为元素指定匹配的各种样式。在Mozilla里的执行情况(可能在其他浏览器也是这样),CSS搜索引擎通过样式规则为每个元素找到匹配的样式。该引擎由右至左评估每个规则,从最右边的选择器开始(称为“键”【Key】

  • ytzong
    ytzong