专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

2011年6月

  • 区分IE8 、IE9 的专属css hack

    / 分类: 开发 / 8 Comments

    一般来说,我们写的结构比较好的时候,IE8/9下是没区别的.所以可能很少人关注只有IE8或只有IE9才识别的css hack.

    因为IE8及以下版本是不支持CSS3的,但是我们如果使用css3,在IE下IE9正常渲染,但我们又想让IE8及以下的浏览器实现同样的效果,且不希望使用css3pie或htc或条件注释等方法时,可能就会需要用到IE8和IE9的专属css hack了.

    .test{ /* 1. */
    	/* color:#09F\0; 以前是IE8/9, 现在10也支持 */
    	color:#09F\0/; /* 以前是IE8 only, 现在IE9/10也支持. 如要排除IE9需要使用下面的rule重设IE9样式 */
    }
    @media all and (min-width:0) { /* 2. */
        .test{color:red\9; }/* IE9 only, 现在IE10也支持 */
        /* Ps:老外的方法都是\0,根本没考虑Opera */
    }
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* 3. */
       .test { color: green; } /* IE10+ */
    }
    :root .test { color:#963\9; } /* 以前IE9 only, 现在10也支持, 优先级高于@media, 优先级太高, 尽量少用 */
    

    注: IE老不按规矩, 以前IE8 only/IE9 only的hack, IE10 一出现都乱套了~
    为了避免看此文的同学失望而归, 从新又整理了一下内容(2013-01-28), 如有错误望指出.
    现在, 要想写出专门针对ie8或ie9的hack, 把1/2/3种组合在一起使用. 如果可以, 使用CSS条件注释更靠谱.

    此hack已经加入到我08年写的那个用css 写的一个浏览器检测中。

  • Kplayer 1.2.2 发布

    / 分类: 实践 / 27 Comments

    Kplayer简介:一款MP3播放器,支持单曲、列表播放,自动记录播放位置,刷新页面可接着上次位置继续播放。代码用as3制作,UI部分全部是用代码画出来的,没有用到一点flash导出的素材。界面仿照Chrome的HTML5播放器界面,差不多类似HTML5的audio标签。还可以配合HTML5标签一起使用

    功能列表:

    • 1、自动记录播放歌曲的位置,即使刷新页面也会接着继续播放(并且,比如在firefox下播放,然后关闭页面,再用IE或其他浏览器打开,还会接着播放,这个记录是跨浏览器的)。
    • 2、不仅支持播放单曲,还支持播放json或xml格式的歌曲列表。
    • 3、可定义json/xml列表的路径。
    • 4、支持单曲循环、歌曲列表循环播放。
    • 5、可自定义从歌曲列表的第几首开始播放。
    • 6、歌曲加载错误会自动切换下一首,xml/json格式错误、加载错误会提示。
    • 7、可自定义默认的播放音量,可拖动、点击、滚轮控制音量。
    • 8、歌曲播放进度(在已加载的范围内)可拖动或点击控制。
    • 9、可显示歌手、歌曲名称。
    • 10、键盘控制:暂停、继续播放、上一首、下一首、快进、快退、音量调节。
    • 类似:暂停、继续播放、切换静音、加载进度条这些普遍的就不详细列出了。

    update log:

    2011-07-26: 更新版本号为1.2.2
    fix:修复储存播放信息的判断,之前的不严格会导致记录冲突
    fix:如果歌曲列表的歌曲地址全部失效(播放器没有1首歌可以正常播放),提示加载歌曲失败,并停止播放和记录。
    fix:增加一个极少数情况发生的歌曲加载失败的判断
    fix:一些操作如果不影响记录结果,就暂停自动记录,减少资源占用。
    add:新增参数:record,为0就不自动记录播放位置
    是否开启自动记录就看个人需求吧,我测试同时播放3个(每个都自动记录),内存变化不大,cpu使用和那些视频门户播放1个视频时差不多,此时应该算很正常了。所以如果一个页插入多个播放器一起播放(每个都开启自动记录),就控制在3-4个左右吧,这样应该没啥问题。Ps:同页面多个播放器千万不可把name参数的值都设置成一样的,例子可看下面参数列表的说明。
    add:鼠标移到按钮上显示提示按钮功能
    add:焦点在播放器上时,Tab键显示快捷键提示
    Note:不使用Tab键切换按钮焦点的原因:
    1、flash里的元素获得焦点后,默认空格、回车都会触发焦点的事件,所以会与播放器产生冲突:
    静音按钮获得焦点时,按空格即触发了静音按钮,也触发了暂停/播放按钮;音量滑块获得焦点,焦点会跳到其他按钮(因为按上下左右键会触发改变焦点)。
    2、如果是flex做的表单,tab切换是有必要的,就播放器来说tab切换焦点来控制意义不大(已经做了键盘绑定和鼠标提示)。
    3、为了满足用tab切换的同学,tab被改成了快捷键的帮助。采用这个折中的办法,我想是最好的解决方案。如果要tab让按钮获得焦点并高亮,不仅要对每个按钮加上focus事件的侦听,还要解决焦点冲突,增加的代码太多了。

    2011-07-22: 更新版本号为1.2.1
    加入键盘控制快进、快退,代码部分发现了几处可以优化的地方,优化了下。

    2011-07-20: 更新版本号为1.2
    fix: 修复当拖动音量到0,再点击静音按钮时的切换(改为初始音量)
    fix: 播放上一首没加载完,切换下一首有时出现的拖动问题
    fix: 重载页面时,播放进度条位置和播放时间没有对应记录的播放位置
    add: 键盘控制: 暂停(空格键)、继续播放(空格键)、上一首(ctrl+Left)、下一首(ctrl+Right)、快进(Right)、快退(Left)、音量调节(Up,Down)

    2011-06-22: 因为之前做了个基础版了,这次做了些重构,加了些功能,版本定位1.1吧,功能应该足够用了。

    演示:(播放歌曲并刷新页面试试。。)

    下载:http://pan.baidu.com/share/link?shareid=284648&uk=3338835672
    1.2.2演示:http://www.fantxi.com/demo/KPlayer/

    查看全文 »

  • adobe cs5 安装错误的解决

    / 分类: 工具 / 1 Comment

    因为cs5.5出来了,准备装Flash Builder4.5、fireworks5.5试试。下载后装cs5的时候报错:Adobe Setup has stopped working。

    网上找了一堆内容,整理下解决方法(基本都win7下面报的错):
    1、没装VC2008运行库
    2、没开启Windows Modules Installer服务

    我这里这两个都没问题,接下来:

    3、删除或改名(一般这里就解决了):C:\Program Files\Common Files\Adobe


    4、下载:WinCS5Cleanupscript
    运行后,发现cs3/4/5/flash player都可以选择清除。选择cs5,之后选择Clean All.就看到提示了。

    5、cmd,运行:
    reg delete "HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager" /v PendingFileRenameOperations
    忽略错误,就看不到上次安装失败需要重启的提示了。

    3-5是我这里操作的步骤。成功解决安装cs5失败安装。
    还有发现adobe的下载现在改成用Adobe Download Assistant下载了,速度还可以,如果要下载中文的,要选择Korean(简体中文、韩语、繁体中文在一个包里),语言列表下拉框居然没加上Chinese,居然要选择Korean,感觉有点那个啥了。
    直接url下载:需在官网登录adobe id选择任意产品试用下载(官方下载服务器认cookie),之后浏览器打开xxx.7z就可直接下载了。
    如果要用FW中文的同学可以再等等了,发现最新的里面居然还是FW CS5,而不是传说中的CS5.1,经测试FW无论中/英都是CS5,看来还要等等,或者只能下载Web Premium5.5试试了。

    经证实,Design Premium 5.5里面是fw5.1版(cs5.1 v:11.1.0.205)。

    失败的原因,应该是以前装过cs5的软件,没清除干净。
    另外gg搜到一篇adobe官方解决cs4在vista下安装失败的解决方法。这里面删除的东西更多,如果还没解决的同学可以试试这个。

  • doctype声明、浏览器的标准、怪异等模式

    / 分类: 开发 / 8 Comments

    群里看到一个面试题,doctype 标准(严格)模式(Standards Mode)、怪异(混杂)模式(Quirks Mode),如何触发,区分他们有何意义?
    而且据说是笔试题,汗。

    现在对做题比较感兴趣,so整理份答案(不保证满分。而且如果我做笔试题,每天打字,很多汉字都写不出了,只能让考官看拼音了。。虽然能答出个一二,但肯定没此文详细了):

    触发标准模式

    1、加DOCTYPE声明,比如:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <!DOCTYPE html>
    2、设置X-UA-Compatible触发。

    触发怪异模式

    1、无doctype声明、定义旧的HTML版本(HTML4以下,例如3.2)
    2、加XML声明,可在ie6下触发
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE ...>
    3、在XML声明和XHTML的DOCTYPE之间加入HTML注释,可在ie7下触发
    <?xml version="1.0" encoding="utf-8"?>
    <!-- keep IE7 in quirks mode -->
    <!DOCTYPE ...>
    5、<!--->放在<!DOCTYPE前面

    IE8有4种模式:IE5.5怪异模式、IE7标准模式、IE8几乎标准模式、IE8标准模式

    X-UA-Compatible设置对IE8模式的影响:
    1、设置X-UA-Compatible meta

    IE=5、IE=6(介于5、6之间的任意数字,比如5.987654321):触发IE5怪异模式(无论页面是否有DOCTYPE)
    IE=7(7<= 值 <8):强制IE7标准(无论页面是否有DOCTYPE)
    IE=EmulateIE7:遵循DOCTYPE(有DOCTYPE-IE7标准;无DOCTYPE-IE5怪异模式)
    IE=EmulateIE8:遵循DOCTYPE(DOCTYPE-IE8几乎标准模式(或IE8标准模式);无DOCTYPE-IE5怪异模式)
    @see: http://blogs.msdn.com/b/ie/archive/2008/08/27/introducing-compatibility-view.aspx
    IE=8、IE=Edge、IE=99、IE=9.9(大于等于8的):有doctype-使用几乎标准模式,或IE8标准;无doctype-IE8标准。
    无X-UA-Compatible、IE=IE8、IE=IE7、IE=a、把X-UA-Compatible写在<link>或<script>标签后:判断"X-UA-Compatible HTTP Header"。

    注1:把X-UA-Compatible写在<link>或<script>标签下面,X-UA-Compatible的设置无效。
    注2:页面、服务器HTTP Header都设置了X-UA-Compatible的情况,使用页面的X-UA-Compatible设置。页面无X-UA-Compatible,才使用HTTP Header设置的值。
    注3:几乎标准模式的意思和触发,下面的"Almost Standards Mode"有说明。
    注4:IE=xx的值,ie会尝试xx转换为最接近的值。比如:IE=7.789 -> IE=7;介于5、6之间的->IE=5;大于等于8的->IE=8。
    注5:IE=4、IE=3、IE=0.1、IE=-7 这些小于5的,包括类似IE=IE8、IE=IE7、IE=IE6、IE=a、IE=b、IE=bcd,和无X-UA-Compatible一样一样滴。可以理解为X-UA-Compatible设置了无效的值,所以跳过这里了。

    IE X-UA-Compatible的一些说明:http://expression.microsoft.com/en-us/dd835379

    2、设置X-UA-Compatible HTTP Header

    IE=5、IE=6: 触发IE5怪异模式(无论页面是否有DOCTYPE)
    IE=7(7<= 值 <8): 强制IE7标准(无论页面是否有DOCTYPE)
    IE=EmulateIE7: 遵循DOCTYPE(有DOCTYPE-IE7标准;无DOCTYPE-IE5怪异模式)
    IE=EmulateIE8:遵循DOCTYPE(DOCTYPE-IE8几乎标准,或IE8标准;无DOCTYPE-IE5怪异模式)
    IE=8、IE=Edge、IE=99、IE=9.9(大于等于8的):有doctype-使用几乎标准模式(或IE8标准);无doctype-IE8标准。
    注:设置了X-UA-Compatible(meta或http header)后,会覆盖客户端的兼容性视图设置。会强迫(优先)使用X-UA-Compatible设置的模式
    无X-UA-Compatible、IE=IE8、IE=IE7、IE=a、还有上面注5里面提到的:首先判断"兼容性视图",有"兼容性视图"的设置(doctype-IE7标准,无doctype-IE5怪异模式);未设置"兼容性视图",有DOCTYPE-遵循doctype,无doctype-IE5怪异模式。

    IE9有7种模式: IE5.5怪异模式、IE7标准模式、IE8几乎标准模式、IE8标准模式、IE9几乎标准模式、IE9标准模式、XML模式

    IE9和IE8大体上差不多:
    X-UA-Compatible
    IE=(0<= 值 <7) - 触发怪异模式(无论页面是否有DOCTYPE),注:这里的怪异模式和IE8下的有点不同,测试发现"-"、"_"这两个css hack符号,IE8怪异下是都识别的,IE9怪异下不识别"-"。
    IE=7(7<= 值 <8) - 强制IE7标准(无论页面是否有DOCTYPE)
    IE=8(8<= 值 <9) - 强制IE8标准,有doctype-使用IE8几乎标准模式(或IE8标准),无doctype-IE8标准
    IE=EmulateIE7、EmulateIE8 和上面IE8的情况一样
    IE=9、IE=Edge(值 >=9 ) - 有doctype-使用几乎标准模式(或IE9标准)。和IE8一样,靠doctype来选择IE9几乎标准,或IE9标准模式;无doctype-IE9标准。
    IE=(值 <0)、IE=IE8、IE=IE7、IE=IE6、IE=a、IE=b、IE=bcd、IE=xxx类似这样不靠谱的、或把X-UA-Compatible meta写在<link>或<script>标签后的,这些情况和无X-UA-Compatible是一样的:首先判断"兼容性视图",有"兼容性视图"的设置(doctype-IE7标准,无doctype-怪异模式);未设置"兼容性视图",有DOCTYPE-遵循doctype,无doctype-怪异模式。

    X-UA-Compatible的特殊写法

    msdn上面提到了X-UA-Compatible值设置成"IE=9; IE=8; IE=5"这样的,意思就是优先最前面的IE9,没IE9就用IE8,没IE8就IE5,并且并不推荐在生产环境下使用。
    触发Google Chrome Frame:<meta http-equiv="X-UA-Compatible" content="chrome=1">
    可以和IE的X-UA-Compatible混搭:比如:<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">。这样写的好处:可以让ie在最好的渲染方式下渲染页面。
    "IE=edge,chrome=1",可以写成"chrome=1,IE=edge"、"chrome=1; IE=edge"。

    几乎标准模式(Almost Standards Mode)

    Firefox 1+、Safari、Chrome、Opera(从7.5开始)和IE8/IE9增加了一个"几乎标准模式",它实现传统的表格单元格的垂直尺寸(没有严格的遵照CSS2规范)。
    意思就是,比如下面的代码:
    <table style="border:1px solid blue;" cellspacing="0">
    <tr><td><img style="border:1px solid red" width="364" height="126" src="http://www.google.com/images/logos/ps_logo2.png"/></td></tr>
    </table>
    比如在IE7标准模式下,图片底部和table是没空白的;"几乎标准模式"下,图片底部和table也是没空白的;而较新的浏览器在标准模式下图片底部和table会有个空白。
    @see:https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

    下面的DOCTYPE都可触发IE8标准模式:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <!DOCTYPE html>
    触发IE8几乎标准模式:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    Mac IE5、IE6/7、Opera(<7.5)和Konqueror无几乎标准模式(它们没有严格遵循CSS2规范,实际上,它们的标准模式更接近几乎标准模式)。HTML5把这种模式叫“受限怪异模式(limited quirks mode)”。

    IE、op、ff下几乎标准模式的相关文章:
    http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx
    http://www.opera.com/docs/specs/doctype/
    https://developer.mozilla.org/en/Mozilla's_DOCTYPE_sniffing

    XML模式 - application/xhtml+xml Content


    Firefox、Safari、Chrome和Opera中,HTTP头设置了MIME-type(Content-Type为application/xhtml+xml时),会触发XML模式。在XML模式中,浏览器会严格地以XML解析XHTML文档(很严格,用过W3C的xhtml验证的同学应该明白,比如"&"要用"&"+"amp;"、<br>要用 <br />)。
    任何一个XHTML文档的解析错误会导致停止解析,FF/SF/CH/OP会直接报XML解析错误,IE9可以在开发人员工具的console里面看到报错。
    MacIE5、IE6/7/8不支持application/xhtml+xml。
    发现IE9下使用此模式,doctype是无所谓的,<html xmlns="http://www.w3.org/1999/xhtml"> 这句命名空间必须的,没设置命名空间css会以文本解析而失效。
    同时XML模式下,X-UA-Compatible的设置将会无效。
    @see: http://www.w3.org/TR/html5/namespaces.html

    参考:


    http://hsivonen.iki.fi/doctype/#handling
    秦歌的译文:http://dancewithnet.com/2009/06/14/activating-browser-modes-with-doctype/

    总结:

    X-UA-Compatible只有IE>=8才识别,所以他们可以用doctype声明、X-UA-Compatible、兼容性视图设置来改变模式。
    IE6/7却依靠DOCTYPE来改变标准或怪异模式,类似这些低版本的浏览器下的标准模式,接近与“先进”浏览器下的几乎标准模式,因为它们都没有严格遵循CSS2规范。并且他们同样在标准模式下,各自的渲染还是是有差别的。没差别就不会有css hack的诞生。
    IE6-IE9下,怪异模式都在IE5.5下。
    不需要写X-UA-Compatible,用css也完全可以搞定各个版本IE的解析不同。

    模式、版本不同,不仅仅css解析不同,js的解析也有不同。
    了解浏览器解析模式的不同,可以避免我们辛苦写出的标准代码被怪异所残害。
    让开发者更注重遵循标准,无论在生产效率还是在协作、沟通上都有好处滴。
    现在几乎人人都用标准的doctype来声明文档,所以纠结标准、怪异模式对工作的影响不太大。

    Henri Sivonen文章里有2处我测试有误:
    1、IE=8 或 IE=Edge 或 IE=99 或 IE=9.9:进入“几乎标准模式”
    2、IE=IE8 或 IE=IE7 或 IE=a 或 IE=EmulateIE8 或没有或首先出现 script:进入”X-UA-Compatible HTTP头”
    不同之处,我上面已经说的比较详细了。

    以上说的东西全部经过本人亲测,win7 sp1 en 下的ie8,测试完毕装的IE9,都是原版。
    想自己测试结果的同学可以,使用我之前写的用css检测浏览器的文章:http://www.fantxi.com/blog/archives/browser_detector/ 来做测试,先装win8在装IE9,然后http头部分用程序或配置服务器来设置。代码修修改改,测了我一晚上。。
    推荐看看秦歌的译文,涉及了更多的知识,写的更全面。我这里只针对IE8/IE9的渲染模式做了个测试。