目前主流浏览器对CSS3 Media Queries的支持度已经非常好，那么就展望看看Media Query Level 4～前段时间抽空看了一下，就挑选几条感兴趣的说下。由于目前文档并非标准而只是工作草案，所以本文所列内容随时可能过期，只作为一个向导。 更新频度 update-frequency 查询设备的实际更新能力，取值也比较直观： none: 一旦渲染无法更新(比如打印机) slow: 更新缓慢(比如电子墨水) normal: 正常更新(比如我们更为熟悉的电脑屏幕) 这个查询可以为一些带有交互类的内容提供更多的外观控制，因为我们不是指定设备，而是根据设备的实际能力，对最终内容的样式加以优化。比如最简单的例子：…
自从4年前因为接下论坛任务开始，《HTML5与HTML4的差异》这份文档的翻译工作就一直视之是份内之事。在之前的2013年5月28日的版本之后，这份文档又更新了2次，限于精力有限，我只能跳过2014年9月18日的那个版本，直接重制了最新的2014年12月9日的版本，这也是W3C HTML5规范敲定后这份文档第一次的更新。 文档链接保持不变：http://swordair.com/docs/html5-diff/ 并将内容维护放置在了Github： https://github.com/iifksp/html5-diff 由于W3C HTML5规范已经在2014年敲定，所以这份工作笔记就开始往既定的规范靠拢，内容比起之前的有了大幅缩减。由于改动实在太大，我只能对内容做了逐行的比对，将主要变化记录，内容很多，…
时间追溯到4年前，那时刚出道，写了一篇CSS定位机制之一：普通流，转眼4年酱油人生，说好的浮动和绝对定位的篇幅也一拖4年。多少是因为对于熟悉的东西很难提起兴致，但更多还是因为懒惰。 这些年一过，浏览器环境的变化令人欣喜。当年甚少人讨论的BFC等概念，如今也已经说烂了。虽尚未满三十却深感锐气不比当年——说好的第二第三篇浮动和绝对定位应该不会有了，所以就随便聊聊浮动和绝对定位的一些麻烦之处——一些很多人可能不知道的，或者故意略过的，或者困惑的地方。 既然是浮动，那么首先第一个问题，什么是浮动？ 如果是4年前的我，一定会摆出一堆定义，然后对着各种可能是人尽皆知的特性码很多字。如今，要是在让我解释什么是浮动，我只会说：“浮动===靠边”，并且我觉得我已经找不到比“…
2014-08-07: 为ghost迁移并添加了以前wordpress的评论内容。小伙伴们可以继续吐糟了～ 11 January 2014: 由于平台整体从WordPress切换到了Ghost，而Ghost没有内建评论功能，所以请需要提交订正信息的朋友，将需要订正的内容发邮件到 iifksp[at]swordair.com，谢谢。 自上次翻译《HTML5 Differences from HTML4》以来已经过了两年，HTML不断发展和更新也导致我之前的翻译显得有些过时。2个月前，这份编辑草案再次更新，相比两年之前内容一下多出许多，于是就下来决心要重头再来一遍，于是就有了这次的重译。实际上，内容的变化多到已经无法用更新来完成，结构、…
去年我翻译了 HTML5 differences from HTML4，时隔约快一年了，这份工作草案再次更新。而我也开始着手更新自己的翻译稿。 这次的更新量相当大，所以翻译完整更新以及修订需要一些时间，但我会尽力最快地拿出更新稿。今天乘空的时候稍稍对比了一下两者，如果你读过去年5月25日版本，无论是英文原文，或者是我的翻译稿，那么你就可以从下面了解一些当前的最显而易见的改动。 新元素 WHATWG增加了一个 data 元素，用来把内容标注成机器可以读取的值。举个最简单易懂的例子： I have <data value="8"…
display:run-in; 是一个非常有趣的属性，虽然作为普通流里的一个环节，但却很少有人问津。Chris Coyier 曾经写过一篇 CSS Run-in Display Value，简述了这个属性的作用。除此以外，它几乎不被人所讨论。 对于其定义，大致上就是下面这三点： If the run-in box contains a block box, the run-in box becomes a…
原本是在蓝色理想上接了一个150积分的任务，然后开始翻译这篇虽然是草案却被广泛引用并且阅读的工作笔记——HTML5 Differences from HTML4，即《HTML5 相对于 HTML4 的差异》。对于翻译内容的一再斟酌花费了大量的时间，所以翻译工作比想像的更为耗时和费力。不过在经过了一系列的折腾后，总算迎来了成果。 你可以在这个链接看到我的译文：http://www.swordair.com/docs/html5-differences-from-html4/ 关于翻译的一些说明 文中遇到的**(译注，......)**是我额外添加的注释，目的是希望在某些可能阅读出现问题的地方给出些提示。 翻译风格尽可能遵循文档原意，在流畅度上保持一定平衡。 我翻译了前4章，…
前几天，一位叫做colin朋友邮件问了我一个关于包含块的疑问，大致是说，css2.1定义里有这样一句： For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container…
