HTML5

HTML5 input 搜索框

众所周知,HTML5为input定义了更多的输入框类型,比如date,number等。input type="search"也是其中之一,但其定义里并没有过多描述这个类型的功能,反而是同type=text在外观和功能上都没有多大区别,那么要其何用?当前,各浏览器对新特性的实现都还是部分支持,即便全部支持,差异也还是免不了的。这里仅以Chrome,Firefox以及Edge为参考。 用惯Edge的人可能对Edge默认为input text添加清空按钮(输入框有内容时尾部会出现“x”,点击后会清空输入框内容)并不陌生,其添加的清空记号同样适用于input search。换言之search和text两种类型确无二致。 Firefox无论是text还是search,都没有做什么可见的变化。 最后是Chrome,…

HTML5 资源提示(Resource Hints)

预加载是常见的优化页面的手段,基于推断预知用户的交互从而预先加载即将使用的内容并快速切换给用户,典型场景是加载后续分页的内容。早前,预加载在很多场景里已经被其他一些技术方式替代,比如XHR,比如css background等等,这些预处理技术特定于不同的应用,性能也不能与浏览器原生功能相提并论。更糟糕的是,不当的加载以及冲突反而会使得页面性能劣化。 HTML5的资源提示(Resource Hints)基本上可以简单地理解为预加载,浏览器根据开发者提供的后续资源的提示进行有选择性的加载和优化。“有选择性”这一项是必须的且极其重要的,也是有别早先替代方案的重点,因为很多情况下,预加载会受到所分配到的计算资源以及带宽资源的限制,浏览器有权放弃那些成本较高的加载项。 目前Resource Hints还处于w3c工作草案的阶段(官方文档:https://www.w3.org/…

Web发展路向何方?

记得是2005年,但也许更早,前端工程师这个职位开始在中国出现。如果再往前推,CSS的发展不过是十几年,HTML也才是个20岁风华正茂的小伙子。现在HTML5和CSS3,带来了诸多新的变革,web发展是日新月异还是略显老态? 浏览器路向何方? 曾经名赫一时的各种壳浏览器还剩下多少呢?像 IE green browser 这样的壳还有人在用么?主流里剩下了遨游,世界之窗,以及一干插足者。360和世界之窗的合作生出来个360浏览器,凭借360客户端数量和安全的旗号割据一方。搜狗打出了双核的旗号也同样凭借着输入法的装机量分到了自己的一杯羹。腾讯,仍旧是凭借其QQ加以推广。也许后来者还会有百度和阿里巴巴,今天的新闻又看到一个新的插足者——金山。 这种混乱的局面以前也曾经出现过,但过往的各种壳的特点是草根气息,现在的壳却都是大腕在暗自部署他们的客户端。…

浏览器模式

关于浏览器模式,一直以来的理解是这样的:浏览器厂商出于那些老站点的向后兼容的目的,创建了两种模式。即标准模式(standards mode)和怪异模式(quirks mode)。在标准模式里,浏览器按照规范渲染页面,而在怪异模式里,浏览器以一种老式的或者是模拟老式浏览器的渲染方式表现页面。 这些并没有错,但是还不够全面和深入。当我回顾《CSS Mastery》的时候,也让我想起了很多渐渐淡忘的、并且也可能是无关紧要的其他碎片。 比如,两种模式最大的差异的例子就是IE盒模型的解释。IE如此,Opera 7也是如此。再比如,Mozilla和Safari的第三种“准标准模式(…

HTML5 新标签 ruby

HTML5也许真的离我们不是很遥远。今天匆匆浏览了一下3月10日版本的关于HTML5和HTML4区别的W3C的草案: http://dev.w3.org/html5/html4-differences/#changed-elements ,就更加觉得仿佛就在眼前一般。在新标签里看到了ruby的名字突然就联想到了ruby语言。虽然这个ruby和ROR没什么关系,但引起了我想要去了解的兴趣。 ruby元素是用来标记称之为 ruby 注释的。ruby 注释是用ruby字符标示在汉字等东亚字符的上方或者右方用来标示的拼音的那部分。就像小时候读课文时,标记在文字上的拼音,就是ruby字符,或者称之为ruby(rubi)。 尽管ruby是HTML5的新元素,但W3C里有关ruby的定义不仅限于草案。这里面已经有ruby注释的推荐标准,甚至有ruby的CSS3组件定义的工作草案。而在HTML5的ruby元素的定义里,可以看到关于这个标签的说明 The…