文章关键字 ‘HTML5’

小tip: CSS动态实现文本框清除按钮的隐藏与显示

2014年03月28日,星期五

search类型搜索框,设计师常常会设计一个叉叉图标,表示用户点之久可以清除输入的内容。

这是不错的体验!
当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视);FireFox浏览器貌似任何类型的输入框都无动于衷;IE10+浏览器貌似任何输入框都会出现清除按钮,但是长得略微粗糙了点,设计师同学接受不了。
貌似不和谐了,咋办?传授个新技能,借助HTML以及CSS,来模拟清除按钮可动态呈现的搜索框……

源代码、demo页面、截图一个不少,希望本文的内容能够对您的学习有所帮助。

阅读全文…

HTML5 Battery电池状态相关API简介

2014年01月27日,星期一

随着HTML5以及CSS3技术支持与发展,以及手机越来越高性能带来的可行性。移动端的页面显然会越来越烧电。例如,流畅的动画效果,模糊阴影等视觉体验。因此可能会出现这样的情况,用户电量快不行了,又没有电源来一发,你的网页还呼呼的烧电,显然,用户一旦感觉到浏览这破页面手机电量流失比武大郎那个还快,怕是会红杏出墙,寻找类似西门庆这种更持久的产品了。

因此,如果网页能够感知手机的电源,我们似乎能够为用户做的更多。比方说,当用户电量不足15%, 需要再来一发的时候……

阅读全文…

ajax与HTML5 history pushState/replaceState实例

2013年06月19日,星期三

众所周知,Ajax可以实现页面的无刷新操作——优点;但是,也会造成另外的问题,无法前进与后退!曾几何时,Gmail似乎借助iframe搞定,如今,HTML5让事情变得如同过家家般简单。

当执行Ajax操作的时候,往浏览器history中塞入一个地址(使用pushState)(这是无刷新的);于是,返回的时候,通过URL或其他传参,我们就可以还原到Ajax之前的模样。

本demo所展示的就是ajax的内容载入与地址栏的前进与后退,典型应用,对于熟悉相关知识点很有帮助。

阅读全文…

伪元素表单控件默认样式重置与自定义大全

2013年06月7日,星期五

所有的form表单元素都有或多或少的伪元素可以重置其浏览器内置的UI样式,我光demo就有17个之多,截图30+之多,本文虽参考之作,自己条条亲自验证设置。虽目前价值并未凸显,但是,过段时间,可能就是宝了。

阅读全文…

HTML5 datalist在实际项目中应用的可行性研究

2013年03月27日,星期三

本文内容属于边学习边总结的,到底说了些什么,我也不知道。就自己个人而言,熟练了JS的一些使用,更了解select下拉框,当然熟悉datalist是肯定的,文本就是讲这个的嘛。了解了IE9下onpropertychange以及oninput事件无法被delete的问题,不认识的datalist内部的option会被忽略等问题。

demo不少,截图更多,源代码也有,内容也不少,总之,希望磕磕叨叨的内容能够对您的学习有所帮助。

阅读全文…

翻译-盲人如何使用互联网的8个误区

2013年03月6日,星期三

虽然翻译的文章不少,但是,有时会看走眼,开始感觉不错,翻译完了发现其实没啥货。本文内容呢,还算不错的,说句良心话,自己也是学到了不少东西,至少对屏幕阅读器有个更准确的认识。至于细节什么的,您自己点击进去看看吧。希望能对你构建可访问性的网站提供一点帮助。

阅读全文…

HTML5 progress元素的样式控制、兼容与实例

2013年02月21日,星期四

如题,本文着重讲解HTML5 progress元素的一些相关东西,以便您可以在实际项目中应用。一如既往,多多demo,多多截图,必要的源代码展示。总之,希望本文的内容能够对您的学习或工作有所帮助。

阅读全文…

jQuery html5Validate基于HTML5表单验证插件

2012年12月20日,星期四

html5Validate HTML5表单验证jQuery插件
html5Validate是我今年折腾的比较靠谱的jQuery插件,基于W3C HTML5规范的表单验证规则编写的一款向下兼容的jQuery表单验证插件,着眼于未来以及大局,抓住了时代发展脉搏,有足够的生命力与潜力。在实际项目中也经过了一定的历练,自我觉得是挺OK的。

本文比较长,说得也比较详细,有很多demo,很多截图以及很多关键代码示意,相信会您的工作与学习有所帮助的。

阅读全文…

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

2012年12月13日,星期四

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

……

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

阅读全文…

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

2012年12月11日,星期二

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

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

阅读全文…