ProjeKt D.K

还是讨论mobile web design的话题，对之前的Going Mobile做些补充和修正。因为我的blog模板是完全用HTML5重写的，所有不支持HTML5以及CSS的移动设备浏览器全部忽略，我指的是此文只针对iPhone Safari，Google Android Chrome Lite以及Opera Mini/Mobile这些Modern Browsers。

善用@Media规则

Opera Mini/Mobile, Chrome Lite, iPhone Safari都支持@media规则，所以下面这行代码基本上就能搞定这些主流的移动设备浏览器了。

@import url(css/handheld.css) only screen and (max-device-width:480px)

如果你希望为iPhone Safari/Chrome Lite添加独立的样式表的话，加上-webkit prefix就可以了。

@import url(css/handheld_iphone.css) only screen and (-webkit-max-device-width:480px)

Read More

还是接着上回的话题吧，感谢leafduo和Lushnis两位很有手机品味的朋友的测试 :D

为什么做这个测试呢？我自己现在绝大部分时间都是在用手机上网，所以自然而然对我的blog进行mobile化改造很必要了。我的Nokia E71上用的是Opera Mini浏览器，它有两个优点，一是对标准（HTML5, CSS）的支持，二是页面经Opera服务器中转压缩处理，省流量。Nokia S60自带的基于webkit的浏览器我也试过，但是既不能解读handheld也不能处理高级点的Media Queries，所以基本上如果单纯从CSS, HTML下手，没法把它从众多桌面浏览器中区分开来，为它设立一个格外的mobile stylesheet。iPhone Safari我也把玩过几次，它对页面的渲染相当好，几乎不需要我格外去设立一个stylesheet了。其他的掌上设备浏览器还包括Android Chrome Lite，Netfront，UCweb等，我都没测试过。

针对各主流手机浏览器设立独立的样式表

因为目前主流的手机屏幕宽度像素都在320px以内，为了让我更好的用E71浏览我自己的blog，我为320宽度屏幕设立了一个独立的样式，把整个容器的宽度都调整到320px，字号也调小到相对大小1.3em。
Read More

既然Firefox, Opera, Chrome, Safari都已经支持HTML5了，为什么不开始向HTML5迁移呢？

从xHTML 1.0 Strict迁移到HTML5的工作量远比我想象中要小的多，header, nav, section, footer, article这些标签的使用让整个页面代码语义化，简洁化不少。基本上本站已经HTML5化了，至于代码的细节打磨工作慢慢来吧。

至于IE…全部不予考虑了。

另外，最近给blog加入了打印样式表，移动平台的话用Opera Mini，iPhone Safari也都测试过了。

最后分享两个HTML5过程中的小tips:

1. 一定要记得在CSS里加入这句，不然新的HTML5元素都是以inline方式显示的。

header, footer, section, nav, aside, article, dialog, figure {display:block;}

2. 为了平滑过渡到HTML5，以及减少CSS修改工作量。建议在header, footer这些新标签里保留原来的id属性。我都是这么写的: <header id="header">。

总而言之…如果你的浏览器太old-school了，还是直接订阅feed看就是了。

一直都想介绍一下Quanta Plus这款linux下的IDE (基于Qt的程序)。这是我目前使用过的最好用，最上手的网页编辑器了，D.K的所有代码也都是在这个编辑器下写的。我曾经推荐过另一款linux下的IDE: Aptana。那相比Aptana，Quanta Plus有什么优势呢?

1. Quanta Plus的界面相当的简洁，而且如果你一直用的是KDE下的Kate或Kwrite的话，你会发现Quanta Plus和Kwrite,Kate具有很好的consistency，相似的界面设定以及一致的快捷键操作，统一的高亮显示，它基本上可以说是Kwrite的Deluxe版，上手非常方便。

2. Quanta Plus支持标签页显示…不过在我的Gentoo上标签页有点小问题，就是关闭标签页时会出现1到2秒的无响应。

Read More