Aug 5, 2009

CSS 优化工具

现在网页制作中采用CSS/XHTML技术,可以有效地对页面以及各种元素的布局、字体、颜色、背景和其它效果实现跨浏览器的精确控制。但是,就算是简单的博客,所包含的CSS文件就可能很大。举个简单的例子,WordPress theme的CSS文件有时就多大20k。从网页速度优化的角度来说,CSS有很大的可压缩空间。

CSS优化工具是一款基于CSS Tidy 的强大CSS优化器。它可以根据你的需要对CSS进行精简优化,提高网页加载速度。

之前我使用的优化工具是CSS Tweak,不过在使用了一段时间后,我却发现这个网页已经不复存在了。 为了方便自己使用,就在自己网站上安装了这款开源工具。也希望能给其他人一点帮助。

用法很简单:
把你的CSS代码复制进去,然后根据需要选择不同的压缩方式就可以了。一般建议自己保留一份未压缩的,然后网站上使用的css文件用最大压缩比方式(就是下拉菜单的第一个选项)来压缩。

Tags:     
Post by SUN @ 3:24 pm | 随笔杂谈 | Comment (0)
Mar 21, 2007

架构符合XHTML标准的博客

费了点时间让自己的网页上都贴上了Valid XHTML的标签,于是顺便扯几句。

XHTML,其实就是一个标准,至于来历,看我后面的扯谈。架构一个符合XHTML标准的网站并不难,可世界上的网站,真能符合w3C颁布标准的还真不多。因为养成的习惯要改并不是那么容易的,而且浏览器也都支持那些旧的标准,这也是不少网站对浏览器兼容不好的问题所在。如果要验证自己的网站是否符合这一标准,只要去 validator.w3.org/ 输入自己的网址就可以了。

如果你的网站不符合XHTML,这不代表它有什么太多的劣势(google的网页没一个符合的),而是你的网页有潜在的兼容性问题,结构上的问题可能让你耗费更多的时间来调整网页代码,使其在不同浏览器中看起来一致。我之前就一直不知道<li>必须嵌置在<ol>或者<ul>中,结果不得不花费时间来调整css代码。

而要架设一个符合XHTML的博客。

  • 最简单的开始就是先掌握XHTML相对于之前HTML的区别。http://www.w3schools.com/ 上给出了详细的说明,还可以做一下上面的Quiz。
  • 其次就是找一个比较好的平台。wordpress,blogspot,都是不错的平台,用他们编置出来的网页,错误相当的少(一般不会超过100)。
  • 尽可能的使用css来控制你网页上元素的性质(颜色,长宽,空白,一切的一切)。将这些元素从XHTML中剥离出来,也是他们的一个目标之一。
  • 随后就是利用上面的http://validator.w3.org/去验证你的网站,它对错误都会给出详细的说明,调试起来很方便。
  • 安装Firefox,使用它的插件的Web Developer进行各种调试纠错,会大大缩短你用的时间。

当你完成所有的纠错以后,就只剩下最后一件事情了。 :) ,在你的网页中插入如下的代码:

<a href="http://validator.w3.org/check?uri=referer" target="_blank">Valid XHTML</a>

【注】
说XHTML,就不可避免的从HTML说开去,自然,也就要提到Berners Lee这位互联网的鼻祖。
话说我刚上小学那会儿,还是个向往当天文学家的主,全因为有一年哈勃上了天;但当时的我却不知道(嗯,绝大多数人都不知道)―正是在那一年Berners Lee在欧洲的粒子实验室倒腾出了万维网。时至今日,你还能看到当年网站的屏幕截图
也正是Berners Lee,领导建立了现如今互联网的标准语言,其中就包括了大名鼎鼎的HTML,全称就是HyperText Markup Language。因为技术的障碍,之前的HTML不得不相对的松散,也就产生了诸多兼容性的问题,人们用不同的浏览器得到的效果经常会不同;而且,随着发展,website在跨平台信息交流中的作用也日益显现。所以Berners Lee们自然而然的就想到了将其标准化。而XHTML,也就是HTML4.01版,就是标准化过程中的一个里程碑。

Tags:       
Post by SUN @ 11:46 pm | 与时俱进 | Comment (0)