浏览器后退操作时,表单状态的还原

测试页面:no_autocomplete_test.html

结论:

  1. Safari 和 Opera 是两个极端,一个完全还原,一个完全保留。
  2. Firefox 下最简单的办法是设置 autocomplete = ‘off’ 属性。
  3. IE 必须在 setTimeout 中还原表单值才有效。
  4. Chrome 除了不支持 onpageshow, 其它表现和 Firefox 一致。

最后胜出的是:

'v' == '\v' && setTimeout(function() {
    // reset code
}, 0);

同时在 html 中,将要还原的表单元素加上 autocomplete = ‘off’ 属性。
最后,忘掉 Opera.

Tags: , , , ,

内联脚本的位置对性能的影响

原文

Steve Souders: Positioning Inline Scripts. 好文无需废话,推荐仔细阅读。

测试

值得注意的一个结论:

要避免将内联脚本放在样式表和页面其它资源之间,这非常重要。这会使得看起来像是样式表阻塞了后续资源的下载。这种行为的原因是:所有主流浏览器都会保持CSS和JavaScript的顺序。在样式表完全下载、解析及应用之后,内联脚本才能执行。同时,必须在内联脚本执行后,剩余资源才能下载。这就使得,放在样式表和内联脚本之后的资源,下载被阻塞了。

内联脚本放在样式表之前,样式表和脚本的下载是并发的 阅读全文 »

Tags: , ,

淘宝工作一年记,兼前端招聘广告

去年四月份来的淘宝,一晃眼就一年多了。下面的文字,是匆匆岁月中的一点感想,愿其如歌。

喜欢

喜欢一件事才能做好它,这不是什么新想法。从北京来杭州,奔的就是前端这份职业,相信淘宝UED能给自己提供一份喜欢的工作。

要知道自己喜欢做什么,是件很难的事。人们经常会把喜欢做的事和擅长做的事混淆。擅长javascript,以为自己就喜欢前端开发。我写过c/fortran, c#/php/java, html/css, js, 都兴奋和沉迷过。但直到现在,也只能判定对某几门语言比较偏爱,至于究竟喜欢用来实现一个游戏引擎还是一套前端框架,心里真没谱。很多时候,做什么是由环境和机遇决定的。来了淘宝UED部,自然就喜欢上了前端开发,这没什么不好。

喜欢是多样的、易变的。接触到的东西越多,喜欢越容易扩散甚至转移。喜欢和兴趣千丝万缕。兴趣由好奇和求知欲驱动,喜欢则是在做事时体现的心态。当你发现做某件事情,自己能拥有良好的心态时,这就是你喜欢做的事情。

因此,我喜欢做的事情是编程。由于擅长html/css/js, 就变成了喜欢前端开发。除了编程,爬山、读红楼梦、听古典音乐、与朋友讨论有意思的话题、赚大钱等等,做的过程中和做完后,心态都很好,就都是喜欢做的事了。

喜欢是立体的。一个正方体有六个面,一件事也有好些视角 阅读全文 »

Tags: , ,

脱离文档流的容器,IE下宽度自适应的bug

时不时会遇见这个bug,学习PPK,记录沉淀下。

现象

测试页面:ie_hasLayout_width_bug.html

正常情况下,没有设定宽度的浮动容器test-wrap,当包含的block元素test-box也没有设定宽度时,test-box的宽度会和test-wrap保持一致:
ie_hasLayout_width_bug_1.png
其中test-wrap的宽度取决于所包含的子元素的最大宽度。

但在IE7下,test-box的宽度塌缩到最小了 阅读全文 »

Tags: , , , ,

Facebook的弹出框

很喜欢facebook的弹出框样式,官网是用table实现的,可以看克军抓取的demo页面:pop-dialog-facebook.html

一直想用非table方式实现,晚上尝试了一把:facebook_dialog_test.html

facebook dialog

花了一个多小时,仅针对Firefox3,IE8,Safari4,Chrome2和Opera9做了测试。没时间去理IE7和IE6了,有兴趣的可进一步尝试。
2009-05-17:修改了写法,已经支持IE7和IE6. IE6下直接降级为直角,圆角半透明太难折腾了。

一点想法:

  1. facebook的table实现方案,看起来多了不少标签,而且语义化不太好,但用table实现,思路非常清晰,兼容性也很好。大量采用table实现界面元素的公司,还有google.
  2. 在背景图尚未下载完全时,对话框的样式满足“优雅降级”。
  3. 在禁用CSS后,两种实现方案呈现出来的样式差不多。就是标题是h2还是h4的区别。(个人觉得h2更佳,但习惯性写成了h4,囧)
  4. 我的实现方案在Firefox3等高级浏览器中,一次编码全部通过。只考虑高级浏览器的话,工作量和table方式差不多。
  5. 在IE6等老旧浏览器下,两种方案表现得都不是很完美。相比而言,table方案工作量少点。
  6. 或许,我们应该更坦然的去接受table方案?对于这种小模块的布局,table真的很好用,实现的技术门槛很低。

语义,也许就如诗歌一样,努力去做,可以很优雅很美。但绝大部分世人更喜欢通俗小说,诗歌在现实面前是种奢侈品。

Tags: ,

Page 19 of 37« First...10171819202130...Last »