专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端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演示：https://xhl.me/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检测浏览器的文章：https://xhl.me/archives/browser_detector/ 来做测试，先装win8在装IE9，然后http头部分用程序或配置服务器来设置。代码修修改改，测了我一晚上。。
    推荐看看秦歌的译文，涉及了更多的知识，写的更全面。我这里只针对IE8/IE9的渲染模式做了个测试。