勇者无疆

也许有些人不喜欢用YUI的CSS，但是我觉得这个对我来说，简直是太方便了，特别是如果你赞同Yahoo的栅格理论的话，YUI Css几乎可以用在你所有的项目上。但是也有缺陷，YUI预设的Template中只为我们提供了六种预设的模板，并没有像整个页面那样提供一个可以自定义的标签，那么当我们的需求需要实现不同的宽度的时候，就只有自定义了，我的目标是实现一个符合yui-t规则的自定义样式。

在进行之前，首先了解一下YUI所使用的尺寸单位：em。作为一个相对单位，1em是指当前一个字体的大小，例如你将一个字体设置为14px，那么1em=14px了。选用相对度量单位的好处就是我们可以更改网页中文字的大小，而且这个好像是美国的 803 法案要求网页必须对于视力弱的人所具有的功能。但并不是px就没有了作用，我们的页面必须限制在一个宽度范围内以防止变形，所以 min-width 的设置就必须用px了。

#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7 {
margin:auto;text-align:left;
width:57.69em;
*width:56.301em;
min-width:750px;}

下面进入正题，我需要设置一个页面宽度800px，然后右边有一个350px宽的侧栏，如何写呢？

先计算一下页面宽度：800/13 = 61.54em; (For None IE) 800/13.3333 = 60.00em; (For IE)

侧栏宽度：350/13 = 26.92em (For None IE) 350/13.3333 = 26.25em; (For IE)

那么参考 yui-t1 的写法，我们可以知道了：

.yui-t-custom, doc-custom { margin:auto; text-align:left; width:69.46em; *width:67.73em; min-width:750px; }

.yui-t-custom #yui-main { float:left; margin-right:-25em; }

.yui-t-custom .yui-b { float:right; width:26.92em; *width:26.25em; }

.yui-t-custom #yui-main .yui-b { margin-right:27.92em; *margin-right:27.25em; }

Ok，大功告成

参考资料：

1、YUI Css Grids and customization

在CSS2的世界中，过渡常常是非常单薄的，要么是从一种颜色变成另一种颜色、要么是从不透明变到透明，总而言之就是由一种状态变到另外一种状态。这就导致了很多页面给人的感觉很突兀，没有一个平滑的过渡。

虽然我们可以使用DHTML或者诸如jQuery等其他第三方的库文件来完成过渡效果，但是为了完成一个简单的效果我们就需要大量的编码。

我们所需要的就是用一种简单的方法来实现这些过渡，因为我相信在今后的WEB应用中，平滑的过渡越来越成为一种标准的展现形式。

CSS3现在已经添加到了Webkit中，现在 Apple Safari 和 Google Chrome 都已经开始支持。再往前推几个月，那个时候人们还在争论是否将这些过渡写在CSS3中，一些人坚持认为过渡并不是一种样式属性，应当用脚本来进行处理。经过众多人的努力，样式不仅限于静态的样式，动态的样式也是非常需要的。于是过渡的样式终于开始写入CSS3的官方文档中。

废话少说，进入正题。

本文的例子需要支持CSS3的浏览器，所以你最好使用 Safari 或者 Chrome 来测试。

过渡、状态和动作

我们知道，CSS中都是通过伪类来实现页面中的一个元素与用户互动的。例如，用户鼠标的悬停和移动。下面列出了几个伪类：

过渡包含哪些元素

一个从蓝色变成红色的动态过渡包含哪些元素呢，我们先看一个实例：

#css3tr a:link {
    display:block;
    height:30px;
    line-height:30px;
    width:100px;
    border:5px solid #cccccc;
    text-align:center;
    -webkit-transition:width .25s ease-in-out, background-color .25s linear;
    transitiona:width .25s ease-in-out, background-color .25s linear;
}
#css3tr a:hover {
    color:red;
    background-color:#e9e9e9;
    width:200px;
    -webkit-transition: width .25s ease-in-out, background-color .25s linear;
    transition:width .25s ease-in-out, background-color .25s linear;
}

 

由此可见，transition 属性中包含了三个基本的属性：样式属性(CSS property)、持续时间(Duration)、计时函数(Timing Function)、延时(Delay)

看到这个图，大家对于这几个参数的作用应该了解了吧。很简单的几个参数设置，实现了我们之前需要用大量js脚本实现的效果，那么有什么理由不期待CSS3的到来呢。

可以应用过渡的元素：

过渡的时间和延时：

现在，就期待CSS3早日全面普及吧。

参考资料

1、CSS Transitions 101

2、CSS Transitions Module Level 3

以下只是在YUI学习和使用中零碎的一些心得体会，未成体系，发出来，供批判。

1、利用 Font、Base、Grid CSS进行快速的网页布局。

对YUI一直很有好感，最近开始看了看YUI CSS GRID，发现这个理念非常好，非常有利于我们工作效率的提高，特别是熟悉了这套CSS之后，我们就不必每一个项目自己都去写一些CSS。其实，我想有心的朋友或多或少的都会收集一些自己常用的CSS，在不同的项目间使用，但是能够做到像YUI CSS这样有逻辑性、模块清楚的，恐怕还比较少见。

YUI CSS GRID 中，最重要的是三个概念：页宽 Page width，预设模板 Template Preset和嵌套布局 Nested Grid。合理的利用这三个手段，我们基本上可以满足日常页面的布局工作。

但是YUI CSS GRID在YUI3中已经不被推荐使用，我为此感到惋惜和不解。不过幸好，及时不被推荐，我们仍可在项目中使用他。

2、 IO的使用。

YUI3中封装的IO具备了强大的功能，不仅能够通过GET、POST方式提交数据。而且支持整个Form数据的提交，这个方法对于希望全站都是用Ajax来做的同学无疑提供了极大地便利。

但是，现在由于不是十分的熟悉YUI3的API，绑定IO事件的时候，都是在初始页面中进行的编码，这样必须能够了解到这个页面中可能会出现多少个Form，并分别把Form的提交事件绑定好。我在考虑，能否将JS代码写在每个表单中，通过IO将表单调入到当前页面，然后JS生效，再进行提交呢？ 这样对应的表单带着自己的JS，逻辑上就比较清楚。

Y.io("/foo/bar/some_widget", {
  method: 'GET',
  on: {
    complete: function(id, respdata) {
      thediv.innerHTML = respdata.responseText;
      initWidget(); // this function is embedded in the responseText
                    // and doesn't get evaluated. I.e. it doesn't exist.
    },
    failure: function(id, respdata) {
      alert('Feed failed to load!');
    }
  }
});

这里作者提供了一个解决的办法，但是提到了一个缺点，用户在被搜索引擎导向到这个页面后这些代码还是不能够执行。

那么有什么办法解决呢？

有一位兄弟提出利用一种真正的ajax的方法，将返回结果分成两部分，一部分是HTML的内容，一部分是javascript的脚本，返回后就直接执行javascript的方法。这样做也未尝不可，但是在写这个响应页面的时候，就要稍微注意结果的形式。

我就采用了一种比较笨的办法，将脚本放在一个容器中，加载到宿主页面以后，再通过 eval 执行一下，暂时这个问题就被这么丑陋的解决了。

但是有一个问题需要注意，就是通过ajax传递过来的js代码中不能含有注释，否则 eval 的时候会报错，这个是在 ie 下发现的错误。

3、YUI3还是不够稳定。

还是使用IO的时候，当通过POST方式提交数据时，第二次点击提交表单按钮，就会发出双份的数据，第三次，发送出去的数据就会变成三份。这个在YUI的论坛里有人反映了，是一个bug，已经解决，但是官方的那个build还没有更新。

在排查这个错误的时候因为不了解 YUI Loader 的工作原理，所以费了一些周折，同样不了解的同学可以去 这里 看一下，补充一下相关知识。我将 io-base.js 的最新版本下载下来，覆盖了本地文件之后，发现问题并没有解决，使用firebug查看，如下：

原来这些模块都还是通过combo调用的远程的，很奇怪的是为什么在firebug的网络中没有看到这个链接消耗的时间呢，难道他不消耗带宽？

至此，发现了原来将 YUI(combine:true) 配置去掉，就可以调用本地文件了。但同时丧失了 combo 的这个节省带宽的优势，本地有办法自己搭建一个 combo 么?

参考资料

1、YUI3设计中的激进与妥协

2、Excute embedded javascript after ajax-call

3、Post-Ajax Javascripts Calls

4、YUI Library

5、YUI Loader 学习笔记

Logo设计的好坏，关系着一个企业如何树立形象的问题。Logo设计本身就是一个困难的课题，有了著名的Logo，将它重新设计就是一项更加挑战的工作。如果处理不当，他会带来怎样的后果？文中列出了2009年重新设计过的著名Logo，在这里不评判他们的好坏，只是列在这里，供大家来参考。

1、Telcom

2、Play Station 3

3、Sunny Delight

4、Lays

5、Sony Ericsson

6、Yale

7、Sprite

8、Segd

9、Pfizer

10、Opera

11、OMCA

12、MSN

13、Nicklodeon

14、Movistar

15、Meiji

16、Kraft Foods

17、Doctor WHO

18、Jack in the box

19、France

20、Master Card

21、Forth Worth Museum of Science and History

22、Cadillac

23、Discovery Kids

24、Chicken Now

25、City of Melbourne

26、Cheer

27、Bavaria

28、Audi

29、AOL

30、Art Gallery of Alberta

31、Videocon

32、Veggie Tales

33、Olympic Air

34、Quick Time

35、Firefox

最后，其实还有我们国内的新浪

有很多种方法，这里我用了一个比较偷懒的办法。

进入 /etc/yum.repo.d/ 文件夹

vi Centos-Media.repo

将文件中的 file 位置修改为dvd的位置 /media/dvd，并打开本地源，如下：

[c5-media]
name=CentOS-$releasever – Media
baseurl=file:///media/dvd/
gpgcheck=0
enabled=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-5
~

保存推出后就可以使用本地的dvd作为yum源了，当然，你要记得把光盘放进去哦