Mark Norman Francis作为一个专业的网页开发者，开发了CSS Prepare,这个项目：优化CSS。

如果你够细心，你会发现自己的CSS代码中，很多是可再重新组合的。例如：
div { margin: 0; }
li { margin: 0; }
div { padding: 0; }

平常网页中的password输入框，都是直接显示一排子弹如****** 或者●●●●●● 。这导致用户如果输入错误，而没及时发现，等提交验证后提示密码错误，再重新输入一遍。许多智能手机，包括iPhone,通过展示与延迟密码的领域，继而转化*或● 。这样一个好处就是：视觉反馈输入密码有无正确，及时更改。

1. 1.放一真正的label和password input
2. 2.通过脚本创建一个覆盖在password上面的普通input，且绑定它的focus,change事件
3. 3.当用户提交表单时，发送的密码字体是原来的password input值，而伪password input已被转换为一排子弹了

window.onload = function() {
  if(document.getElementsByTagName) {
    var inputs = document.getElementsByTagName('input');
    var password_inputs = Array();
    ...

在公司的项目中，基本上都会出现非系统默认字体。对一个专业的网页设计师来说，选择适合网站的字体是非常重要的。较早之前，我们会用图片来实现，如果是单语言的网站来说，这个方法也只能算是马虎应事，但没有灵活性可言。另外在外企我们所接触的项目80%要求多语言，更多时候需要考虑灵活性。其实是网站不管是不是多语言，对于一个专业的页面重构师来说，工作不应只是还原页面，还需考虑页面的可扩展性，维护性和性能。
目前就我所用过的3种方法实现非系统默认方法做个比较…

在我所做过中的项目，都基本上是要求按钮自适应。这时，会碰到button在IE7及低版本的IE浏览器的宽度会有默认的一个宽度，且这个宽度比其他IE7+，FF及其他都要长。

解决方案是设置overflow:visible

HTML中我们应该注意哪些标签过时了，哪些地方应该用哪些标签更贴近更符合语义，哪些标签的属性应该写在页面上，保持良好，简洁的代码及搜索引擎友好。写完之后应该多检查检查我们的HTML。

Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything. Why would you want to do this? Depending on the tag, the content in the tag can be interpreted in a certain way. Here are some examples.

昨天项目中碰到html中<label for=”ControlID”>value</label><input …./>
在.net中TextBox在页面输出的html时，其会带一长串乱七八糟的前缀，这时<label for=”ControlID”>这个ControlID我们不知道具体是什么个名称。这也缘由很多程序员对VS里的Label控件有一些属性没有太深入的研究，我们就不会犯这样的一个错误。

在很多项目中，按钮用自定义背景代替默认的按钮背景及文字，这就要求页面重构师，把默认文字隐藏起来。其实不是一个难题，但在IE里，就要用到一点小技巧了！

1.Html code

With the release of IE 7, the consistent use of PNG for Web sites and Web applications moved closer to a reality. However, while recently experimenting with a few concepts that rely heavily on PNG, I discovered IE interprets the gamma (gAMA) data chunk contained within a PNG differently than other browsers. The image will render darker(i have encountered with it,and it takes me some time to fix it.), which can be problematic if you need a GIF or JPG to match the color profile of a PNG.

Adobe Kuler




Colr.org