我曾经根据网上一些流行的无障碍建议对博客进行改进，希望能方便视障人士浏览我的博客，但经过一番“改进”之后，我发现这些建议并不完全奏效，用 NVDA 实际测试后，网站的无障碍可访问性并没有得到明显提升。最近几天，我重新思考了无障碍网页的设计，最终得到一些比较有效的方法，在这里整理一下！ 一. 视障人士是如何浏览网页的？ 要想让盲人清楚我们的网页，首先要了解盲人是如何浏览网页。如大家熟知，视障人士是通过屏幕阅读器来感知网...
Read More –>正如上一篇文章所述，最近趁着有空把 jQuery 的浏览器模块抽取出来，再修改成独立简洁的一个对象 —— support，可以方便地使用 JavaScript 进行特征检测。 是的，这里要介绍的，是特征检测而不是浏览器检测！ 由于 JavaScript 在不同的浏览器中存在差异，尤其是不同内核的浏览器之间的差异更是明显，因此在传统的前端开发中，在实现某些功能的过程中会判断浏览器的型号和版本，再实现一个跨浏览器的解决方...
Read More –>接着上一篇《Let's free of jQuery!》，上一篇主要介绍 jQuery 中最常用的一些方法的原生解决方案，本篇则会介绍余下相对较少用到的内容。 11. form 表单序列化 在 jQuery 中，有一个 serialize() 方法，该可以通过序列化表单值，创建 URL 编码文本字符串，在 ajax 提交表单时很有用，下面介绍一下原生的方法： function formToString(formO...
Read More –>8月份时，断断续续把整个网站的 JavaScript 重写了一遍，原因很简单，自这个博客创建以来，一直都是依赖于 jQuery 库，随着 jQuery 库的愈发臃肿，以及自身对于 JavaScript 的日渐熟悉，摆脱 jQuery 的想法也越来越强烈了，于是终于在上个月，达成目标了。这里必须补充一下，Kayo 之所以想摆脱 jQuery ，原因有二： 一是因为 jQuery 的体积已经比较臃肿了，加载需时，对于移...
Read More –>早一段时间，有一直研究 HTML5 和 CSS3 ，自己也做了不少 Demo ，只是 HTML5 Video 和 Audio 由于自己平时比较喜欢留意不同的播放器，因此特别想做一个自己喜欢的设计，考虑到会比较花时间，所以一直没有做出完整的 Demo 。 刚好最近有灵感了，就下定决心做一个完整的视频播放器。首先放出成品： 做完这个播放器之后，感觉 HTML5 Video 提供的 API 已经很完善，考虑到一个播放器所...
Read More –>HTMl5 推出了一个很“特别”的 API Page Visibility ，之所以说它特别，是因为这个 API 关注的是一个很少人留意的功能 —— 浏览器标签( tab ) 是否被激活。这里必须解释一下，这个“激活”，指的是这个标签是否正被用户浏览，或者说是否为当前标签。 那么，这个 API 究竟有些什么用途呢？通常，很多传统的页面在用户没有激活它的时候，它还会继续工作，例如，当用户正在浏览新闻门户，而他之前打开的...
Read More –>偶遇两道 JavaScript 题目，觉得都比较有趣，分享一下。 第一道是很老的题目了，getElementsByClassName，写一下当作练习： 下面这个思路比较简单，基本也是 Robert Nyman 的思路了，判断了 IE5 中使用原生的 all 属性代替其不支持的 getElementsByTagName ，使用 indexOf 判断相应的 class 是否匹配。 function getElemen...
Read More –>因为万恶的 IE 存在各种的不标准，因此，在进行页面开发时不免要为 IE 单独写一些 CSS 。熟悉的方法有 IE hacks 和条件注释 CSS（Conditional Stylesheets），下面，不妨讨论一下这两种方法的优缺点。 IE hacks 举个例子，一个元素在其他浏览中的左边距是 30px ，而在 IE6 中则设置为 20px ，可以如下编写： .demo {margin-left: 30px; ...
Read More –>在实际的 Web 开发中，不免会出现一种情况 —— 为了做出美观的按钮样式或者是兼容低级浏览器，而使用 a 、span 等标签来设计按钮。从外观的角度上说，这样是一个不错的解决方案，做出了美观的按钮又便于兼容不同的浏览器，只是在这个过程中，网页的可访问性悄悄地降低了。 既然是可访问性降低了，那么在这个模拟按钮的过程中，相对于使用如 input[button]、button 这类原生按钮标签的网页来说，必定是缺少了一些...
Read More –>最近移动科技新闻版满屏都是两个新闻 —— Blink 的开发和 Facebook Home 的发布，当然，作为一个神秘的网站，如果我在这里讨论后者，童鞋们肯定会说“根本没有这个网站，我搜过了，打不开”。所以，今天讨论的重点当然是 Blink 。 Blink 是谷歌在 Webkit 核心的基础上自行开发的浏览器引擎，同时，谷歌放弃了对原生 Webkit 的开发。这无疑是一个重磅消息，因为这实在意味着太多了，我们不难想象...
Read More –>相对于离线应用，Web SQL Database 等特性，如 Canvas，Video 等媒体应用类的 HTML5 特性我用得比较少，于是今年年初的时候就尝试用这些新特性做点练习，感受一下 HTML5 在媒体应用方面的能力，今天重新翻了一下这些 Demo，整理了两个网页时钟 —— 一个主要用 Canvas 实现，一个主要用 CSS3 实现，为什么是“主要”？因为无论那种方式，都需要 JavaScript 和 HTML...
Read More –>看到标题，相信会很容易联想到 IE6 不支持除 a 外的 :hover 伪类，不过这只能说是万恶的 IE6 对于 CSS 选择器的支持太差了，还不能说是 Bug 。而接下来 Kayo 要说明的，是个实实在在、不折不扣的 Bug 。 这个 Bug 是关于一个比较常用的效果 —— hover 后改变子元素效果。 例如，有如下的一个导航， hover 后的链接中的文字会改变颜色 <div id="nav...
Read More –>