Sometime when some component is offscreen, but still get focus when we tab though the page. This can cause users' confusion. One easy to to find out the offscreen component is typing in your console, document.activeElement It will shows your the curr…

For example, when we use checkbox, if we do like this: <div class="inline-control sign-up col-1"> <input type="checkbox" checked name="jLetter" id="jLetter"> Receive promotional offers? </div> When…

When you developing a complex component by your own, one thing you cannot ignore is Accessibility. Checkout this link. It lists all things you need to do regarding to accessibility when implements a complex component. The tech we are using is: Roving…

For a menu item, when we tab onto it, we want this element get 'focus' event, so that the submenu will show up. In the post,  we will see how to achieve it by using JS+css, we will also see how to use 'nextElementSibling' to only focus the elemnt has…

You can make any element keyboard interactive with the HTML tabindex attribute. But you might need a little extra JavaScript and ARIA to support keyboards and screen readers. For more on using tabindex in practice, check out focus management lesson.…

Abstract "HTML5 Differences from HTML4" describes the differences of the HTML5 specification from those of HTML4. Status of This Document This section describes the status of this document at the time of its publication. Other documents may supe…

1. WebSockets -- full-duplex communication The main HTML5 pillars include Markup, CSS3, and JavaScript APIs For whole set of HTML5, visit html5rocks.com (google product)   The URL The following image shows the WebSocket URL example in tokens: schema…

分享人:herry 弹幕篇:弹幕文化与HTML5 说说弹幕 弹幕文化 1什么是弹幕? 弹(dàn)幕(mù)在国内兴起已经有个把年了,相信很多朋友都差不多知道弹幕这个东西. 弹幕系统最初的起源是一家日本的网站,名叫“NICONICO”,被国内人们称为N站,是一家以动漫ACG为主的视频网站,.所谓弹幕,实际上就是观众对当前视频的评论吐槽.只是这句有一定的针对性了.在视频播放到某个时间段时用户对该时刻画面的评论. 国内首家弹幕视频网站是ACFUN,大家称之为A站.之后有出现了一个名为BILIBILI…

HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据推送).我们来看下,传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: 基于数据推送是这样的,当数据源有新数据,它马上发送到客户端,不需要等待客户端请求.这些新数据可能是最新闻,最新股票行情,来自朋友的聊天信息,天气预报等. 数据拉与推的功能是一样的,用户拿到新数据.但数据推送有一些优势. 你可能听说过Comet, Ajax推送, 反向Ajax, H…

一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas" width="600" height="300">您的浏览器不支持canvas,可以选择升级您的浏览器</canvas> 2 开发基于canvas的应用程序的最基本的几个操作 1),使用document.getElementById()方…