分类“设计”的存档

2009.1122
默认Web字体样式

通常用户看到的页面的样式会受到三层控制,第一层是浏览器的默认样式,第二层是网页定义样式,第三层是用户自定义样式。和CSS一样,后面的优先级高于前面的,也就是说网页定义样式可以覆盖浏览器的默认样式,而用户自定义样式优先级最高。实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能,但是极少数会有用户去自定义,一般用也是高级用户。而浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

拿字体来说,各个浏览器默认的字体种类、字体大小和字体行高都不一样,比如IE8的中文版在Windows XP下显示网页时默认字体是宋体,而英文版肯定不会如此。所以我们需要统一设置默认的字体样式,以便实现一致的显示效果来保证设计的一致性和提高开发效率。

以后准备使用如下默认字体样式:

body{
  font: 12px/1.5 arial;
}

阅读全文 »

标签:, , , ,
在18:36发表于HTML & CSS,有评论26
2009.1105
动态加载JavaScript的小实践

动态加载JavaScript文件和CSS资源为Web前端开发提供了巨大的灵活性,同时也实现了lazy load和按需加载,相比XMLHttpRequest而言其没有跨域的限制使其广泛应用。其基本原理是:在页面DOMReady后,利用JavaScript把指定文件路径的script和link元素插入到页面中,然后判断其加载状态再进行继续操作。

阅读全文 »

标签:, ,
在0:56发表于Javascript & DOM & AJAX,有评论10
2009.0910
IE中选择符的4095限制

去年曾总结了《IE对CSS样式表的限制和解决方案》中限制的第4条写道“一个CSS文件的不能超过288kb?”,这是一个疑问句,当时没有重现出来且参考来自Internet Explorer CSS File Size Limit。今天终于看到了IE在CSS上的另一个限制:IE中每个style标签或css文件的选择符个数不能超过4095。其实style属性也应该有这个限制,但是几乎不可能发生。这个限制在IE6、IE7和IE8中存在。请看IE关于4095个选择符限制的DEMO

阅读全文 »

标签:, , , ,
在23:42发表于HTML & CSS,有评论12
2009.0906
CSS实现HTML元素透明的那些事

CSS3草案中定义了{opacity: | inherit;}来声明元素的透明度,这已经得到了大多数现代浏览器的支持,而IE则很早通过特定的私有属性filter来实现的,所以HTML元素的透明效果已经无处不在了。首先看看A级浏览器所支持的用CSS实现元素透明的方案

阅读全文 »

标签:, , , , , , , ,
在23:44发表于HTML & CSS, Javascript & DOM & AJAX,有评论29
2009.0815
Data URI 和 MHTML

Data URI

Data URI是由RFC 2397定义的一种把小文件直接嵌入文档的方案。通过如下语法就可以把小文件变成指定编码直接嵌入到页面中:

data:[<MIME-type>][;base64],<data>
  1. MIME-type:指定嵌入数据的MIME。其形式是[type]/[subtype]; parameter,比如png图片对应的MIME是image/png。parameter可以用來指定附加的信息,更多情況下是用于指定text/plain和text/htm等的文字编码方式的charset参数。默认是text/plain;charset=US-ASCII。
  2. base64:声明后面的数据的编码是base64的,否则数据必须要用百分号编码(即对内容进行urlencode)。

阅读全文 »

标签:, , ,
在0:54发表于HTML & CSS,有评论18
2009.0727
在HTML中获取正确的URL属性值

在HTML中,常见的URL有多种表示方式:

相对URL:
    example.php
    demo/example.php
    ./example.php
    ../../example.php
    /example.php
绝对URL:

http://dancewithnet.com/example.php

http://dancewithnet.com:80/example.php

https://dancewithnet.com/example.php

同时HTML中有大量的元素属性值为URL,一般利用JavaScript获取这些URL属性值有两种方法:

阅读全文 »

标签:, ,
在23:57发表于Javascript & DOM & AJAX,有评论13
2009.0614
用doctype激活浏览器模式

为了处理根据Web标准创作的网页和根据在20世纪90年代末流行的陈旧实践创作的网页,现代的Web浏览器实现了各种不同的引擎模式。本文说明了那些模式是什么以及如何触发它们。

原文:Henri SivonenActivating Browser Modes with Doctype2009.05.19

文档范围

本文包括的模式转换(mode switching)适用于Firefox和其他基于Gecko的浏览器,Safari、Chrome和其他基于Webkit的浏览器,Opera、 Konqueror、Mac版Internet Explorer、Windows版Internet Explorer和内嵌IE的浏览器。避免提及浏览器引擎的名字,取而代之的是使用该引擎最知名浏览器的名字。

本文着重介绍模式的选择机制,而不是记录每个模式的确切行为。

阅读全文 »

标签:, , ,
在15:19发表于HTML & CSS,有评论29
2009.0402
《JavaScript语言精粹》

本书的作者Douglas Crockford是JavaScript开发社区最知名的权威,JavaScript的发明人Brendan Eich说他是“Yoda of lambda programming and JavaScript(lambda编程和JavaScript的精神领袖)”。他不仅仅给我们带来了JSON、JSLint、JSMin和ADSafe等等在JavaScript开发领域应用广泛且影响深远的作品,更重要的是给我们带来了受益终身的利用JavaScript进行高效开发的思想和风格,这就是本书的重要意义。

JavaScript曾是“世界上最被误解的语言”,因为它担负太多的特性,包括糟糕的交互和失败的设计,但随着Ajax的到来,JavaScript“从最受误解的编程语言演变为最流行的语言”,这除了幸运之外,至少还说明它是一个不错的语言。Douglas Crockford在这本书中剥除JavaScript糟糕的外衣,抽离出一个具有更好可靠性、可读性和可维护性的JavaScript子集,让你看到一门优雅的、轻量级的和非常富有表现力的语言。他从语法、对象、函数、继承、数组、正则表达式、方法、样式和优美的特性这9个方面来呈现这门语言真正的精华,这是语言最本质最优雅的部分,通过它们完全可以构建出高效的代码。他还通过附录列出了这门语言的糟粕和鸡肋部分,且告诉你如何避免它们。最后还介绍了JSLint,通过它的检验,能有效的保障我们写出优美高效的代码。

阅读全文 »

标签:, ,
在23:45发表于Javascript & DOM & AJAX,有评论25
2009.0329
JavaScript大牛:Douglas Crockford

Douglas Crockford是JavaScript开发社区最知名的权威,是JSONJSLintJSMinADSafe之父,是《JavaScript:The Good Parts》(英文版中文版)的作者。JavaScript的发明人Brendan Eich说他是“Yoda of lambda programming and JavaScript(lambda编程和JavaScript的精神领袖)”。他同时也服务于ECMA的JavaScript2.0技术委员会(TC39)。其个人站点和Blog是http://www.crockford.com/http://profiles.yahoo.com/blog/GSBHPXZFNRM2QRAP3PXNGFMFVU

Douglas Crockford现在是Yahoo的资深JavaScript架构师,曾在Atari公司(视频游戏工业的领袖)开发了办公自动化系统,同时也完成了对于游戏和音乐的研究;曾任Lucasfilm(卢卡斯)电影公司技术总监;在Paramount(派拉蒙)公司任职过新媒体执行主管;在电气社区,通常为人所知的是communities.com的创始人兼首席执行官;他还创办了State软件公司并作为该公司CTO,这也是他发现JSON时所在的地方。他同时也对Blissymbolics非常感兴趣,这是一种图形、象征性的语言,并且对永久减肥(Permanent Weight Loss)做过研究。

阅读全文 »

标签:, ,
在22:07发表于Javascript & DOM & AJAX, 互联网 & IT,有评论31
2009.0217
如何做好一份前端工程师的简历?

春节前在蓝色理想上发了个“雅虎口碑招聘前端工程师 ”的启事,节后收到很多简历,加之HR通过专业招聘网站得到的简历和朋友同事推荐的简历,数量上是相当的多,把这些简历一一看完真是一个漫长而幸苦的体力活,何况我还要仔细认真的去提取和核查有用信息评估其能力,尽量不错过任何一个埋藏在大量简历中合适的人,这绝大部分时间并不是一个相当愉悦的过程。所以,我感觉有必要来谈谈:如何做好一份前端工程师的简历。

一、你是前端工程师

虽然简历都会有一些常规信息,但职业决定了这份简历核心内容和求职成败。所以,这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》,前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二,学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》

毫无疑问,前端工程师应该知道如何用简历体现其专业技能和职业精神,这是每个应聘者应该考虑的问题。 阅读全文 »

标签:, ,
在0:25发表于web2.0 & so on, 杂事杂想杂感,有评论43

回到页眉