残忍:IE10↘IE7-IE9 type=email的完全抛弃

2012年12月13日 by 张 鑫旭 阅读 71847 次, 今日 2 次

有个顽童名叫IE, 其9岁的时候,不举;10岁的时候,可以举。这位叫做IE的顽童,跟纲手婆婆一样,可以向下控制年龄显示,7岁到9岁都可以。但是,为了不让人看穿其真实年龄,当其7~9岁模样的时候,需要不举。不过,身体是同一副,诱人妹子在眼前,不是说不举就不举的……

……

直接把小弟弟咔嚓了,这样,不就举不起来了嘛!!哈哈,我好聪明!!

阅读全文…

HTML5 Boolean类型属性(如required)值的JS获取

2012年12月11日 by 张 鑫旭 阅读 69230 次, 今日 2 次

HTML5 Boolean类型属性,看上去跟普通属性没什么两个,深入处理才发现事情没有想象的那么简单,尤其最近IE10浏览器的出现,更是血雨腥风,其兼容性问题夸张地令人啧舌,甚至最新版本的jQuery都无法避免地出现了bug.

本文就将详尽展示各种条件下,Boolean类型属性(如required)值,让你可以独眼龙看告示——一目了然地知道bug出在哪里,哪些浏览器上。本文还提供各种库的的兼容性修复方案,并作了简单扩展。基本上1~2天时候的测试与处理,本文的数据相信会对您的学习有所帮助的。

阅读全文…

HTML5 number类型文本框step属性的验证机制

2012年12月7日 by 张 鑫旭 阅读 50803 次

最近花了不少功夫折腾表单验证的些东西,主要是把HTML5的些东西向下兼容。本文是引子,相关基本内容之一。内容如标题所示,还有有点内容的,了解下没有什么坏处。外甥点灯笼——照旧,demo页面,丰富的截图以及必要的源代码展示。总之,希望本文的内容能够让您在末日之前学习到一点新的东西。

阅读全文…

Page Visibility(页面可见性) API介绍、微拓展

2012年11月29日 by 张 鑫旭 阅读 91781 次, 今日 2 次

某君王啪啪啪啪打开了十几二十个选项卡(就像他当初啪啪啪啪宠幸后宫那十几二十个宫女一样);但是,鞭长莫及,其一次只能浏览一个选项卡(就像他每晚只能宠幸一个宫女一样);可是,其他的选项卡并不知道君王何时会再过来(就像其他的宫女并不清楚君王今晚会不会来宠幸一样);于是,其他选项卡依然在不停地运行,守候(就像宫女依然留有希望,等待召幸);然而,最后,君王直接啪一下浏览器关掉了,N多不停忠心守候的选项卡被无情漠视了(就像宫女们苦守整夜……

阅读全文…

我是如何在实际项目中使用before/after伪元素的

2012年11月16日 by 张 鑫旭 阅读 79593 次, 今日 3 次

before/after伪元素相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪元素应用相当的普及以及兴盛,不过貌似我们这边前端er们普遍缺乏使用这两个伪元素的意识,要使用顶多也就是跟风的“清除浮动”应用。
我想,这可能受兼容性思维影响……

阅读全文…

小tip:FireFox下文本框/域百分比padding bug解决

2012年11月13日 by 张 鑫旭 阅读 52800 次

我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况。对于文本框或者文本域,光标最好距离左侧边缘有一定的间距。
但是,如果只考虑文本框本身(父标签无其他特殊处理),这一套在流体环境下是行不通的,因为固定的padding数组无法让文本框永远100%自适应外部的宽度,至少非现代浏览器下是如此!
目前而言,好的解决之道是……

阅读全文…

web上渐进使用jQuery Mobile中animate相关CSS

2012年11月2日 by 张 鑫旭 阅读 89404 次, 今日 1 次


animate虽然是CSS3中随时比较高级的东西,看上去与实际的web项目不搭噶,但是,这里,我要告诉你,在实际web项目中也是可以渐进使用CSS3 animation相关动画的,而且,操作难度以及兼容性处理都是很低的哦!

本文以比较实用的jQuery Mobile框架中开源的animate相关CSS代码为实例,分别展示了其中各种animate效果在实际交互中的应用。大量demo,大量截图以及源代码示意。相信本文的内容会对您的学习有所帮助的!

阅读全文…

视网膜New iPad与普通分辨率iPad页面的兼容处理

2012年10月25日 by 张 鑫旭 阅读 88284 次, 今日 2 次

本文内容多少有点含沙射影,旁击侧敲的味道。题目虽然是将new iPad与普通iPad不能显示屏上的兼容性处理,实际上,讲的是所有视网膜显示屏的一些处理;随着以后普通显示器和视网膜显示器2分天下,就是我们开发的苦日子时候。
既来之则安之,本文先打个预防针,分享点我近期iPad项目的一些处理经验。希望能对其他同行面对同样问题的时候提供一些帮助。

阅读全文…

“更多|收起”交互中渐进使用transition动画

2012年10月19日 by 张 鑫旭 阅读 109549 次, 今日 3 次

虽然,web世界中,交互动画效果N多多,但是,很多都是约定俗成的,或者称之为“有固定套路的”。
根据David Kaneda创建的Transitions动画CSS代码,我们可以将效果归结为这几大类:slide(滑来滑去), fade(淡入淡出), flip(飞来飞去), pop(大大小小).
如居中弹框呈现与隐藏,适合pop效果;绝对定位浮动层(如智能提示下拉框,自定义时间选择控件)等的呈现与隐藏使用fade效果;幻灯片播放的广告位效果一般为slide效果;点击某商品飞入页面右下角或左上角的购物车就是flip效果(类似最新FireFox浏览器关闭标签页效果)。
而对于页面上,“展开更多|收起更多”这类交互……

阅读全文…

ECMAScript 5(ES5)中bind方法、自定义及小拓展

2012年10月12日 by 张 鑫旭 阅读 116089 次

ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准最新修正。其中,新增了一个名叫bind函数扩展方法(),以前有提过,点击这里查看详细。
不过,之前的介绍纯粹的翻译,含糊其辞,水土不服,这里,换身接地气的装束,让大家好好了解了解……

阅读全文…