分类 » 前端开发

HTML5 Page Visibility

分类: , 标签:‚ ‚  评论:26 26 评论

HTMl5 推出了一个很“特别”的 API Page Visibility ,之所以说它特别,是因为这个 API 关注的是一个很少人留意的功能 —— 浏览器标签( tab ) 是否被激活。这里必须解释一下,这个“激活”,指的是这个标签是否正被用户浏览,或者说是否为当前标签。 那么,这个 API 究竟有些什么用途呢?通常,很多传统的页面在用户没有激活它的时候,它还会继续工作,例如,当用户正在浏览新闻门户,而他之前打开的...

Read More –>

两道 JavaScript 题目

分类: 标签:‚  评论:19 19 评论

偶遇两道 JavaScript 题目,觉得都比较有趣,分享一下。 第一道是很老的题目了,getElementsByClassName,写一下当作练习: 下面这个思路比较简单,基本也是 Robert Nyman 的思路了,判断了 IE5 中使用原生的 all 属性代替其不支持的 getElementsByTagName ,使用 indexOf 判断相应的 class 是否匹配。 function getElemen...

Read More –>

为 IE 单独写 CSS 的几种方法

分类: 标签:‚  评论:33 33 评论

因为万恶的 IE 存在各种的不标准,因此,在进行页面开发时不免要为 IE 单独写一些 CSS 。熟悉的方法有 IE hacks 和条件注释 CSS(Conditional Stylesheets),下面,不妨讨论一下这两种方法的优缺点。 IE hacks 举个例子,一个元素在其他浏览中的左边距是 30px ,而在 IE6 中则设置为 20px ,可以如下编写: .demo {margin-left: 30px; ...

Read More –>

提高模拟按钮的可访问性

分类: 标签:‚  评论:6 6 评论

在实际的 Web 开发中,不免会出现一种情况 —— 为了做出美观的按钮样式或者是兼容低级浏览器,而使用 a 、span 等标签来设计按钮。从外观的角度上说,这样是一个不错的解决方案,做出了美观的按钮又便于兼容不同的浏览器,只是在这个过程中,网页的可访问性悄悄地降低了。 既然是可访问性降低了,那么在这个模拟按钮的过程中,相对于使用如 input[button]、button 这类原生按钮标签的网页来说,必定是缺少了一些...

Read More –>

Blink 终于要来了

分类: 标签:‚ ‚ ‚  评论:18 18 评论

最近移动科技新闻版满屏都是两个新闻 —— Blink 的开发和 Facebook Home 的发布,当然,作为一个神秘的网站,如果我在这里讨论后者,童鞋们肯定会说“根本没有这个网站,我搜过了,打不开”。所以,今天讨论的重点当然是 Blink 。 Blink 是谷歌在 Webkit 核心的基础上自行开发的浏览器引擎,同时,谷歌放弃了对原生 Webkit 的开发。这无疑是一个重磅消息,因为这实在意味着太多了,我们不难想象...

Read More –>

小试 Canvas

分类: 标签:‚ ‚  评论:6 6 评论

相对于离线应用,Web SQL Database 等特性,如 Canvas,Video 等媒体应用类的 HTML5 特性我用得比较少,于是今年年初的时候就尝试用这些新特性做点练习,感受一下 HTML5 在媒体应用方面的能力,今天重新翻了一下这些 Demo,整理了两个网页时钟 —— 一个主要用 Canvas 实现,一个主要用 CSS3 实现,为什么是“主要”?因为无论那种方式,都需要 JavaScript 和 HTML...

Read More –>

:hover 在 IE6 下的一个 Bug

分类: 标签:‚ ‚  评论:19 19 评论

看到标题,相信会很容易联想到 IE6 不支持除 a 外的 :hover 伪类,不过这只能说是万恶的 IE6 对于 CSS 选择器的支持太差了,还不能说是 Bug 。而接下来 Kayo 要说明的,是个实实在在、不折不扣的 Bug 。 这个 Bug 是关于一个比较常用的效果 —— hover 后改变子元素效果。 例如,有如下的一个导航, hover 后的链接中的文字会改变颜色 <div id="nav...

Read More –>

一些惊艳的 CSS3 之二

分类: 标签:‚ ‚  评论:13 13 评论

接上一篇文章《一些惊艳的 CSS3 之一》 三. 多重背景 多重背景并没有使用新增的 CSS3 属性,而是在我们都很熟悉的 background-image 作出调整,支持同时使用多个图片,例如:传统来说,为元素设置背景图会像如下设置: #demo {background: url(bg1.png) no-repeat; } 但是在 CSS3 中,设计师可以同时为一个元素指定多个背景,例如: #demo...

Read More –>

一些惊艳的 CSS3 之一

分类: 标签:‚ ‚ ‚  评论:9 9 评论

最近对一些 CSS3 的新特性作出了不少的介绍说明,这些内容大多都是 CSS3 中相对比较普及的内容,其实 CSS3 还有很多很酷的特性,只是这些特性在浏览器支持和网站的具体使用上比较逊色,但是仍具有不少的魅力,今天这篇文章要介绍的就是几个比较酷而相对介绍较少的 CSS3 特性。 一. 边框新特性 在 CSS3 中,border 增加了两个新的特性,一是边框图片,而是在边框颜色中使用渐变色。 边框图片利用 borde...

Read More –>

CSS3 自定义动画(animation)

分类: 标签:‚ ‚  评论:12 12 评论

除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外,CSS3 还有一种自由度更大的自定义动画,开发者甚至可以使用变形(transformation)和转换(transition)制作自定义动画,利用纯 CSS 制作出像 Flash 一样的效果。在实际使用中不难发现,变形和转换更适合做元素的交互,而自定义动画除了做交互外还能使到网页具有活力,有了自定义动...

Read More –>

更多的 CSS3 变形 (transformation)

分类: 标签:‚ ‚  评论:9 9 评论

在 Kayo 之前所写的一篇文章《CSS3的变形与过渡样式》中,曾经对 CSS3 的变形 (transformation) 和转换 (transition) 作出详细介绍,但关于变形的部分内容仍可以扩展说明一下,因此写了本文补充一下变形的相关内容。 在前文中,已经说明了 transform 属性的两个用法 rotate 和 scale ,分别用于对象的旋转和缩放,具体的内容可以阅读前文。而现在要补充说明的,是 tra...

Read More –>

IE6 下 img 底部多出空白

分类: 标签:‚  评论:25 25 评论

是芥末日木有出现,Kayo 又可以继续写博客了。 昨天在优化主题时意外的发现了 IE6 下 img 标签的一个 Bug ,用块级容器包裹 img 标签时,在 IE6 下 img 标签所在容器底部会出现 5px 多余的空白,例如网页中有如下的结构: <ul> <li><img src="img-bug.png" alt="img bug" /...

Read More –>