飞鱼 ^_^ 浆抱罗斯‘s blog » 代码浅谈

vertical-align 图片文字水平对齐分析

飞鱼 — Tue, 06 Sep 2011 17:26:17 +0000

最近接触了许多关于图片文字水平对齐的需求，然后发现如果单单将vertical-align 设置为middle 的话，不同浏览器下居中对齐的位置有偏移，让人好不蛋疼~ =，=
网上搜了下好像也没有搜到相关的分析，大部分都是垂直居中的案例
于是专门针对vertical-align 做了次分析，功夫不负有心人，分析结果还是挺好玩的，对vertical-align 又有了一次深入的了解。给力~~~

demo 传送门： vertical-align 各属性分析 有错误欢迎回复纠正哦 ^__^

一些心得体会：

vertical-align 定义

最初我认为的vertical-align 解释跟text-align 一样，是容器内部的非block 元素居中对齐，但~~ 我理解错了
从w3c 官方对 vertical-align 各属性的解释来看，vertical-align 是定义当前节点，跟外围内容的对齐方式，跟text-align 的解释是不一样的。

vertical-align:baseline 基线对齐

分析所得，发现baseline不是在中文字的可见部分最下方，而是在英文字的可见部分最下方。
然后发现图片对齐的时候是以图片的最下方同相邻文字的 baseline 对齐。一直觉得为啥图片下方会有4像素的空白，现在明白了

不同字体会有不同效果

我这个demo 用的Tahoma 字体，发现如果使用类似 Yahei 等中文字体，在IE低版本下会有出现一些奇怪的现象，详细可以看demo。

vertical-align 最好不要混用

从定义来理解，就发现这个vertical-align 最好不要混用。因为本身不同属性会产生各种各样的兼容问题，如果混用，估计会出现更复杂的现象。虽然我也没有深入研究，但我觉得混用不太靠谱。

vertical-align: px 定位最稳定

这个属性一直都没怎么用，原先一直用middle 来实现水平对齐，在一次偶尔的项目代码里发现的。
相对定位是相对于baseline的偏差定位，负值代表图片相对baseline往下移。
在研究中发现使用相对定位兼容性最好，只有IE7会有2px的偏差，但基本可以无视，因为目前IE7的用户可以忽略不计。
不过这种方法也不是万能的，
因为是相对于baseline的相对定位，如果文字变大后，图片的对齐位置看起来就不会跟着移动区别于middle属性，不过个人觉得这样的情况出现概率不大，并且字大了再针对调整也没问题。
另外图片大小不一样大相应的负值也不相同，详细见demo。

高潮：vertical-align 最佳兼容方案

前面说了这次研究没有白费，个人推荐的vertical-align 用法如下：
1. 尽量保持主内容的 vertical-align 是baseline 即默认的，不要把vertical-align 当text-align 来理解使用。
2. 针对内部需要调整位置的图片等进行 px 定位。
优点：保证外围的vertical-align 是默认值，不产生混用现象。
缺点：针对不同尺寸的图片要针对进行定位，不过一般ico 大小差不多大，可以统一调整。

下一步研究方向：表单元素的vertical-align: px 是否同样适用？

您可能还对这些日志感兴趣

那些新增的标签 — html5 学习笔记

飞鱼 — Sun, 14 Aug 2011 04:27:12 +0000

html5已经出来有一段时间了，虽然万恶的IE面对其赤果果的色诱也硬不起来，但还是有很多优秀的网站开始应用了，毕竟大势所趋嘎嘎。
最近在啃html5动物书，虽然动物书讲的好多东西，在网络上的一些杂文里都看到过，不过毕竟是动物书，会有一些小细节是值得去翻阅的。

好了切入主题，讲讲心得：

section 是有语义的div

很多人很费解为什么html5 放着div 那么短小精干的东西不用，非要用section呢？
我的理解是div 依然有用，只是它可以代表无语义的东西。section像是一个沙盒子，将不同的部分，区块，模块，区分开。

header 不是一定要唯一

首先要说的就是这个header标签，之前看了好多关于html5的杂文，给人的感觉就像是 header 标签是网站头部进化过来的，其实不然，就像以前很多人认为 h1只允许有一个一样。
因为 header 可以包含在 article 里作为文章的头部标签。见(49页)

hgroup 在header 标签中充当目录指引作用

原先一直很不明白hgroup 的作用，因为w3cschool 上表现的例子中hgroup中都是些h* 标签集合，这种东西在实际应用中的应用场景非常狭隘。但当发现 article 里可以丢header 标签后这个问题就解决了。
其实个人觉得这个标签的重心在目录指引，在内容为王的时代，hgroup标签会给seo带来一定贡献。

有了沙箱后，网站结构变得不是那么虎头蛇尾

很多人认为一个web 中只能用一个h1 不能用太多 h2，以及少量h3，甚至都找不到 h4的踪迹。
事实告诉我们，我们甚至可以在 nav 标签中使用h1。
那么这样写不但不会混淆seo 抓重点。而且能让web 看着更加婀娜多姿，凹凸有致。

顺便普及一下html5 标志中的一些寓意以及新特性：HTML5标志

您可能还对这些日志感兴趣

css心得之善用 position:relative

飞鱼 — Sat, 11 Jun 2011 17:35:53 +0000

发现最近可以吐槽的东西越来越少 =，= 大概是工作有些忙了~ blog 都杂草丛生了 = =

技术文，看不懂可以提问哇，实在看不懂就挑好玩的看^__^ 很湿~
此文章堆在后台好久了，一直都没找到配图，思路也没理清楚，于是都快臭了~

好吧进入正文~~
=========================华丽的吐槽线======================
可能是个人习惯吧，我个人在写css 样式的时候 position:relative 都很少用。不到逼不得已不用，因为这东西在面对IE大叔的时候总是会各种被推到，比如多个positon 嵌套的的时候会产生类似 z-index 优先级的失控，不知道其他coder们碰到过这个问题没？反正我是碰到不下1次了。

举个栗子如下：html 代码 节略写法，你懂的

ul.pp
    li 大宝   span 大宝的屁屁
    li 二宝   span 二宝的屁屁
    li 三宝   span 三宝的屁屁

从上面的代码本来没啥问题，问题在于给他穿上衣服(css)之后，因为一些需求，你讲li 的css position:relative 了，
那么li 就傻逼了，这个时候你怎么设置li 的z-index 为多大都盖不过之后下一个li 的内容。
不理解上面表达的意思可以见下图。

css代码

.pp{
	width:300px;
	margin:50px auto;
	background:#fff;
	height:300px;
	padding:10px;
}
.pp li{
	border:1px solid #ccc;
	margin-bottom:10px;
	height:30px;
	position:relative;
	background:#fff;
	z-index:9;
}

.pp span{
	display:block;
	width:40px;
	height:40px;
	background:#f09;
	position:absolute;
	right:10px;
	bottom: -20px;
	z-index:10;
}

如图，左边是chrome 下的效果，右侧是IE6的效果，可见，当给li 设置positon:relative 后无论里面的元素设置z-index 为多大，都改不过之后的li 内容。(爷的我又把上面的字重新打了一遍 = =)

解决方案

从视觉上面理解，这样的情况就像 AI(Illustrator)里的图层一样，一层比一层高，也像个沙箱，内部的z-index 是怎么也不能超越下一层的z-index。
最好不要给列表型的li 或者 div 添加 position:relative，一直以来针对IE这样头疼的bug，都是以避开这样的情况来解决。(其实应该不算bug，应该是浏览器开发者理解性上的不同)。

当然还有一种办法，由于是因为下一个li 设置了position 盖住了前一个position 的 li，那么只要避免position盖住position就可以勉强实现这样的情况。所以你只需要在position:absolute的dom外面套一层div，做到不盖住前一个li中的 position:absolute就可以。

另外一种方法是在特定的情况下如hover事件，如触发式弹出浮窗(显示更多信息)，
这个时候我是这样来实现，当hover的时候给 li 添加一个class “hover”，然后只要定义hover 的时候是position:relative就可以了，这样的好处是hover 的时候其他 li 没有position:relative ，那么就没有之前的bug了。
对于高级浏览器可以直接写:hover 甚至都可以脱离 js 效率会更高

position:relative 在:hover 上的妙用

先看下图，左侧这样的按钮不知道应该会在一些效果里接触过吧？类似向左向右的按钮，

仔细观察发现按钮中间的线是共享的，但是按下去的时候颜色会变深。
实现办法很多，我一般是对其中一个按钮使用负边距，然后在:hover效果上动手脚(由于IE6只支持a上的hover，所以一般都是使用a)，其实很简单就是在hover 的时候，给它设置position:relative，然后将z-index 设置一个数字就可实现。

以此类推，上图中apple 的导航也可以使用这样的办法来实现效果。是不是挺带感^__^

好了，要是有更好的idea 可以留言评论。

您可能还对这些日志感兴趣

闭包式 js架构前端书写心得(上)

飞鱼 — Tue, 24 May 2011 15:30:26 +0000

5月份的杭州区w3c标准化交流会

带着感冒去了口碑做了次分享，分享的内容是最近刚接触到的并且用的比较爽快的《闭包式js架构》
顺便吐槽一下，这次来的人不多，不知道是不是不太好意思来交流还是怎么了，是不屑么~？，就当交朋友么~ 其实我也很菜的，听了就知道。

以下是我最近在做新系统的时候用到的一种闭包式js架构书写方法，大家慢慢看，有些地方似曾相识，说不定有你想要的东西，仅仅是分享，也许又更好的实现方法。

1. 说说闭包

因为这样的架构思想又一些类似 javascript 的闭包概念。所以我在分享的时候做了下闭包的引导。
分享前做PPT的时候特意去百度娘那里看了下关于闭包的知识补习一下。百科
分享的时候因为主要讲的不是闭包所以顺便带过一下，不过会后，似乎有人反而对闭包感兴趣，嘎嘎。真是指哪哪不响哇。

回来又抽空查了下《javascript 高级程序设计》中的闭包解释，似乎比百度娘上面的更浅显一些，百科上的是一种比较极端的闭包，(有空朋友可以翻阅一下：p56)。最简单的闭包就是全局变量。

2. 利用匿名函数解决$冲突

很多朋友应该会碰到过一个老系统页面里好多js库的情况吧。神嘛 prototype jQuery mootools 会时不时暂用$符号，导致各种冲突。
记得jquery 有个方法是把$让出来。
这里给出一个比较好用的匿名函数来形成封闭作用域来实现。 很多jquery 插件就是这样来书写的

(function($){

/***
 * make $ in Closed Scope
*/
$(function(){
    //do something on dom ready
});

})(jQuery);

利用匿名函数把，jQuery 引入匿名函数，这样在匿名函数的作用域里，你就可以自由的使用$了，并且这样也同样试用与其他库。

3. 怎样不污染命名空间

这个问题曾经困扰我挺久的，因为原现公司老系统里遍地都是全局变量全局fun，命名空间污染的让人蛋疼菊紧。 =，=

那么经过我哥的教导，就是利用变量类形式只占用一个全局变量。如下：

(function($){

$.namespace('Platform.tms.home');

})(jQuery);

上面的namespace是一个jquery插件用来方便建立命名空间。
其实它就等同于下面这段代码。是不是用插件看起来简单多了。

var Platform = {}
    Platform.tms = {}
    Platform.tms.home = {}

4. 所谓闭包式 js 架构前端书写

以上其实都是铺垫啦。
有了命名空间不污染全局变量，有了封闭空间匿名函数不会产生js库间的冲突，两者问题都良好解决。
现在要把两者结合起来，形成现在的架构形式。代码如下：

/**
 * @ TMS Package
 *
 * @author qilei.weiql
 */
(function($, TMS) {

var util = TMS.util;

})(jQuery, Platform.tms);

从代码里可以看出，我将独立的全局变量类Platform 和 jQuery 引入匿名函数。
这样做的好处显而易见，就是利用 Platform 搭建桥梁，让匿名函数内的资源可以通过 Platform 访问到其他匿名函数的资源。
简单的说就是类似：一个应用当它需要用到某组件，那么只要包含某组件js文件进来就可以。

5. 说明下这样书写的好处

好处除了前面说的，避免命名空间污染，不产生库冲突，同时在封闭作用域内，你可以通过引用将全局变量类冗长的名字简化。如上面的代码中就用TMS 代表 Platform.tms，然后直接使用 TMS.util 来访问 Platform.tms.util，这样看起来是不是就简洁许多。这个就是要懒得有风度的表现^_^
甚至可以直接缓存你需要的组件，如：

var util = TMS.util;

var dialog= TMS.widgets.dialog;

6. 从一个栗子表现书写心得

(function($, TMS) {

/*************************
 *  Header 头部控制类
 */
var Header = {
	init : function(){
		this._initHover();
	},
	_initHover : function(){
		//do something
	}
}

TMS.home.header   = Header ;

})(jQuery, Platform.tms);

先丢一块代码给大家。上面的代码是渲染一个应用的头部js 文件。
外围代码跟上面差不多。
我的书写方法是先新建一个 Header 变量类，里面有一些子方法，如启动方法，还有其他一切跟header 相关的方法都在里面。
然后将 header 跟 TMS.home.header 对接，便于被其他组件引用，当然(如果你不像被外接影响，可以不用对接，这样就完全不受影响)

7. 方便的启动函数便于调试

看了上面的那么多是不是发现写了那么多怎么启动。。。现在就跟你说怎么启动，
上面栗子中header 不是 init() 方法么，这个就是启动函数用来初始化一些数据以及启动专用。
那么一个应用里又很多区域需要启动那么代码就可以这样写。

(function($, TMS) {

$(function(){
TMS.home.header.init();
TMS.home.cate.init();
TMS.home.slider.init();
});

})(jQuery, Platform.tms);

上面就是对3个模块进行启动操作，就像开关一样，有些人会习惯在启动函数上添加一些参数神嘛的（类似插件那样），但是这就像是开关一样，开关追求的是一种简洁，讲复杂的东西都放在init()里去吧，会让代码更又层次。
同时当你需要只对一个模块进行调试的时候，你就只需要注释掉其他两行代码就可以不启动了。是不是很方便。

8. 闭包式的由来

说了这么多，这样的书写方法以及优点，闭包式的名字是因为它的两个特性跟闭包有点相似，一个是封闭的作用域，另外一个是有一个全局变量类，从一个封闭的作用域中能够访问到外部全局资源，这个就是类似闭包的概念。

当然这个名字还是我YY出来的，也许它已经又它的学名了，如果又谁知道的话就不要吝啬分享一下哇^__^

9. 其他一些可以扩展的东西

上面的那么多心得都是在我哥(笨笨) 虚心教导下产生的，
本来这次分享是直接邀请他来分享的，不过似乎他更忙些。
之后还会分享一些进阶内容

a. 目录配置规范，为了让组件更规范，必须又它的目录规范
b. namespace 命名空间的命名规范，一套好的命名规范能让整个架构非常又调理
c. Js 调试，合并方案，因为各个功能应用组件等都是分布在各个js 文件内的，在发布的时候需要又个合并方案，类似YUI

好了这次分享就到这里了，又更好的idea 欢迎留言交流学习呢 ^__^

您可能还对这些日志感兴趣

html5 新思路的开始 – web标准化交流会 (杭州站第三期)

飞鱼 — Tue, 01 Mar 2011 05:10:36 +0000

飞鱼：等交流会洗照片中………^__^
掐指一算发现又有一个多月没更新blog 了，我勒个去~~ = =
已经是第三次参加 web标准化交流会了，每次都还是有点收获的，更何况每次都是在不同公司感受不同的氛围。

本次交流会在杭州东软的思科会议室里举行，依然由蕃茄主持会议，这家伙每次闲话都很多嘎嘎，是一个对web 情有独钟的淫啊。

闲话少说：大概跟大伙回报一下这次交流会的内容以及心得吧。

一、div section article 傻傻分不清楚 – by 蕃茄

蕃茄大概介绍了一下html5 的一些标签，引导大伙去讨论。分享了下自己对新增标签的理解。
不过似乎是思科太高档了，（会议室里大大的会议桌，水果···）大家显得比较拘谨，可能是杭州人都比较含蓄。也可能是前端淫类都比较闷骚~~~ Orz

说到对标签的理解，正如我在交流会上说的
html5 新增的标签如 header footer nav aside article section 等。新增的标签让原先赤裸裸的div 变得更加语义化。
那么更加语义化对web 有什么好处呢。
我自己总结了一下几点：
1. 页面结构更加清晰 。从标签的语义就可以看出 section 的中文意思是地区，章节。让用户的体验是，预览网页更像是在看一本书(国外的例子 页面看起来就像一本书)，一本书有页眉页脚(header footer) ，目录(nav) ，旁注(aside) ，章节(section)，正文(article)，区块(section) (article 是特殊的section) 蕃茄写的文章里有说明(HTML5 中 div section article 的区别)。

2. 让爬虫更懂你要传递的内容 。在搜索引擎如此发达的未来，语义化web 能让web 说要传递的信息更加清晰。比如爬虫可以有选择性的抓取正文以外的内容。让爬虫(在你的网站上)多飞一会儿，那么呈现给用户的就越多越快。

3. 让前端代码更加对象化，模块化 。这个思想也是最近在接触很多后端语言，接触手持设备开发语言(android and iOS) 越发期待的。就是期待未来的web 页面制作应该像 xcode 那样制作前端界面的时候根本不需要敲任何html5代码，(虽然类似Dreamweaver 也能做到，但不是最优化)。那么假如web标准化慢慢成熟之后是否直接可以建立一套类似那样的界面。
那么我们前端的工作就不再是：

a. 觉得 section 标签比 div 长 (交流会上有人提出这样的疑惑，这个不是问题，因为有自动补全工具);
b. article 标签里是否可以嵌套 section (这个是我突然对这两个标签是否可以交叉嵌套的疑惑).
c. 检查标签是否闭合，(前端的很多bug 都是标签误删没有闭合造成的, 当然html5 你可以不闭合，但必须遵循它的标准)。

以上就是我对前端工作的未来的设想。
当然前端的工作还有 javascript 部分，这块东西就像玉伯说的，水很深，我们还在河沿。

二、canvas 应用开发, 真3d引擎 – by 周杰 hehe123 思科网讯

第二部分有些高端，因为涉及到图形算法。听得好多在场的前端大大们一愣一愣，因为之前做过flash 对空间算法还是有点接触，所以听起来不是非常累。
之前我也写过一篇关于 javascript 3d 的介绍 –强悍的javascript — 3D效果。
canvas 是个怨念物。想掌握这个东西，还需要有一定的图形算法能力。
周杰给我介绍了下 web中的真3d 开发。我一直以为web上只能做做伪3d呢，不过就目前来讲，真3d 在性能上跟伪3d 还有有挺大差距的，真3d相当耗资源。可能是研究得还不够深入吧。也许未来的 web 版山口山离我们不远了。
具体还是不深入讨论了，这方面真的好深。有空自己做点 canvas 的真3d 出来 show 一下。

顺便放一个 canvas 的帅气应用 http://weavesilk.com/非常帅气，用cavas绘制类似极光一样的图，算法帝啊·~~ 膜拜

三、感慨：我们走得还不够快

发现不同的公司对web开发的理念就是不一样，像商业为主的网站大多都是以业务为导向，注重实用。觉得思科网讯这一点挺好，它们有个专门针对web的研发机制。以追求领先技术为导向，有点labs的感觉。

相对于这点，不禁膜拜来自日本的那些前端大牛。就像周杰说的当我们还在讨论 html5标准的时候，才开始学习html5的时候，他们就已经开始在研究canvas 的3d 引擎了。这样导致的后果是，我们永远都会在技术研发上落后于他们。
我就感叹一下~~~~ ^__^

您可能还对这些日志感兴趣

三元运算符使用小技巧一则 – javascript

飞鱼 — Wed, 05 Jan 2011 05:01:31 +0000

发现代码慢慢写多了的时候会不自觉的将if else 用三元来替代，仅仅是未了让代码更简洁精辟，当然也有人说用三元可以让你有高潮的感觉。最近在写js 的时候也有这样的感觉，并且收集了一些小技巧，分享分享。
大鸟请跳过下面这段，大大鸟帮忙指正 ^__^
====普及线====

表达式 (expr1) ? (expr2) : (expr3)
在 expr1 求值为 TRUE 时的值为 expr2，在 expr1 求值为 FALSE 时的值为 expr3。

============

普通用法

当你发现你经常用if else

if(拜春哥 || 拜考试帝){
    不挂科;
}else{
    门门挂;
}

那么三元的表示法就是

拜春哥 || 拜考试帝 ? 不挂科 : 门门挂

很帅气的发现代码精辟了好多。

日常中经常会有这样的 if else 判断，特别是嵌套比较多的时候用三元是比较和谐的，可以让你的代码看起来更加清爽，结构清晰。

稍微聪明点的用法

通过不断的变化，可以衍生出很多三元的用法。如下一段jquery代码

flag ? $('body').addClass('hover') : $('body').removeClass('hover') ;

甚至更变态些的。

$('.item')[ flag ? 'addClass' : 'removeClass']('hover')

上面的代码看着比较困惑。因为当flag = true 的时候，代码就变成以下代码：

$('.item')['addClass']('hover')

这样写法等同于。

$('.item').addClass('hover')

具体解释详见豪妹的文章
// 一开始我一直搞不懂为啥子可以这样写，经过沟通突然领悟了，咩哈哈

再升华一下

可以根据需要来调用自己想要的function来处理更多的事情。


function a(){
      do something
}
function b(){
      do something
}

flag ? a() : b();

那么为师的完全体

于是有了这么个案例，两个按钮一个向前的行为，一个向后的行为。操作的功能都差不多。

    var action_turn = function(e, type){
        var self = $(e).closest('li');
        var target = self[type === 'prev' ? 'prev' : 'next']();
        target.addClass('has-img');
        self.removeClass('has-img')
    }

    var btn_next = $('#item-photo-panel a.next')
    btn_next.click(function(){
        action_turn(this, 'next');
        return false;
    });
    var btn_prev = $('#item-photo-panel a.prev')
    btn_prev.click(function(){
        action_turn(this, 'prev');
        return false;
    });

尽量避免的情况

alert( true ? 'true' : false ? 't' : 'f' )

我指的是尽量避免如上嵌套的三元，因为在js 中语句是从右到左，上面的代码等同于

alert( true ? 'true' : ( false ? 't' : 'f' ) )

如php 中这个结果就完全不一样，三元嵌套的时候是优先左边的。

echo (( true ? 'true' :  false ) ? 't' : 'f'  )  //php中

tip：
另外发现php中的三元有这样的提示

Note: 注意三元运算符是个语句，因此其求值不是变量，而是语句的结果。如果想通过引用返回一个变量这点就很重要。在一个通过引用返回的函数中语句 return $var == 42 ? $a : $b; 将不起作用，以后的 PHP 版本会为此发出一条警告。

但是经过试验，发现在javascript 中上面的做法是可以起作用的，大概是js 比较BT，严谨度没有php那么大的原因。

您可能还对这些日志感兴趣

偏激害死人 – 再谈 OOCSS – 对象式书写规则

飞鱼 — Wed, 22 Sep 2010 05:25:12 +0000

配图:最近太宠小3(mac book pro 374)了,大老婆抖去了, 闹脾气起不来了.

看这篇文章前可以先去看下下面这篇文章. 精简高效的CSS命名准则/方法
当一个css 代码年龄超过 2年的淫都会想着怎样去偷懒,去节省那些重复的样式代码.
于是就出现了很多流派. (以下名字都湿我YY, 哥只是非专业的)
比如
直肠流: 写css 属性不换行. e.g..class{color:red; }
短线流: 写css 喜欢用短词用中横线链接 e.g. .home-notice-tit{...}
and so on..
当然也有上面文章里的大牛使用分离流 e.g. .pl4{padding-left:4px }
因为这样的分离流, 咱们星罗发飙了, 发扬愤青应有的愤怒.
的确, .pl4 .pl10 这样的做法飞鱼我也是很鄙视的, 丫跟内联样式有啥区别,
如评论所说的, 这样写无非是再写天书, 缺点毛多.
就像星罗说的一样,因为尝试过了,之后发现大的问题, 然后放弃了.

过分进行属性分离的后果

1.可读性: 1星, 还需要别人是很努力的记下你的缩写表.
2.可维护性: 1星, 曾经有个需求让哥去掉, 某tit(上左右1px border),的boder,然后给tit加一个背景, 代码类似: bt1 bl1 br1 .丫的, 搜了一下有他娘的40哥文件上百处.
3.CSS Sprites:1星, 用CSS Sprites 的时候,会很囧rz ,用了就知道
4.不可压缩及分布式调用: 随着需求越来越复杂, 公用样式包会越来越大, 又不能切分, 对于多样化的页面将是噩梦,会遇到只有丁点样式,而不得不调用庞大样式得尴尬情况
5. 还有好多…

以上只是过分属性分离的后果.
但是上文中张鑫旭的文章中也有好的部分, 比如他的 oocss 对象式css 书写规则,
这种对象式的书写方法也是我慢慢积累出来的一种方法.
oocss 的书写带来的效率及性能可以看这里: 翻译:同CSS技术及其CSS性能
也可以查看我之前写的又见IE6吐槽~ 并行结构式class引起的bug

好了回归主题, 说说我对 OOCSS 对象式css 书写的理解,还有心得.

什么是OOCSS ( Object Oriented CSS )

其实我是个土人, 没有5车的学府, 这名字还是之前google 来的 .
这个相信接触过OO面向对象思想的人, 马上就能明白其中的奥义, 飞鱼不才, 大学的时候接触过 oo 的毛皮, 接触了一些as3的面向对象思想,然后是php , 最近又在折腾小八的wince VC.
所以对oo 还是略懂略懂. 大牛看到了不要取笑,就当是学前班不懂事的娃

所谓面向对象简单的说就是 every thing is object . 其实这句话也挺抽象的 ^__^
更简单的说就是 用面向对象的思路去书写html 以及css 命名规则.

OOCSS 是如何在代码里体现的?

虽然 html 是由div ul li 等dom节点组成, 但是你可以将它们YY 成一些抽象的东西.

比如你可以把一个网页上的公告栏看成一个人.
这家伙的名字叫 lilei 于是就又了 id=”lilei” ,完了我想起大猫的李磊与韩妹妹的 H漫了.
这家伙是人不废话么,于是就了又了 class=”humen”
这家伙又是蓝种人 , 于是多了一种扩展属性 class=”humen blue-man”

于是对象div 就生成了

div class="humen blue-man" id="lilei"

根据命名规则修正一下就变成

div class="panel red-style" id="home-notice-panel"

这样来表现即可以全局控制panel,又可以部分控制red-style, 还可以单独控制 home-notice-panel

然后说这家伙有什么比如
这家伙又个头于是他多了 div class=”hd” (“原先我喜欢用tit”, 但是yahoo 过分的只用 hd ,于是我们就妥协了),
头上又什么? 头上写着他的名字丫不然怎么杀他, 哥可是有死亡笔记加死神之眼滴 ^__^.
对哦还有个耳环.我把尖括号去掉了,因为要转义,麻烦应该看得懂吧,看不懂拉出去弹jj 10下

div class="humen blue-man" id="lilei"
    div class="hd"
          h2  我是李磊
          span class="more"  耳环

这个时候突然: 李磊说话了 ” 丫得我的头圆角的 ” 滚你丫的~~~ 给你写个 radius (css3属性)不就好啦.
无奈,
加了两个耳朵

div class="humen blue-man" id="lilei"
    div class="hd"
          b class="bgl"  b class="bgr"  //学淘宝 用两个b 标签来实现左右圆角,css实现方法有好多.
          h2  我是李磊
          span class="more"  耳环

然后是身体部分.

div class="humen blue-man" id="lilei"
    div class="hd"
         ....
    div class="bd"
         ul  li

李磊说话了: =,= 我叉,我怎么才一条腹肌(li) 而且还是平的,我是那种 8块腹肌还有点古铜的那种
Orz 好吧,给你加上.
ul class="list-mod red-style"
这里的red-style 在ie6下会跟上面的red-style 有冲突,所以要想一种命名方式避开冲突

好了让我们看一下完整的代码:

div class="humen blue-man" id="lilei"
    div class="hd"
          b class="bgl"  b class="bgr"
          h2  我是李磊
          span class="more"  耳环
    div class="bd"
         ul  class="list-mod red-style"
             li

OOCSS的优势在哪里 ?

看了上面的代码可能你还没了解 oocss 到底好处有哪些.
其实很简单
这个时候如果你要些一个韩妹妹的时候效果就体现出来了.
你会发现只要复制上面的代码,然后修改一下韩妹妹的特征就可以了

div class="humen white-man" id="hanmm"   //韩妹妹是白人
    div class="hd"
          //韩妹妹的头是方的,
          h2  我是韩妹妹
          //韩妹妹没有耳环,
          div class="hat" //韩妹妹有个帽子:比如下拉菜单, 可以用id来增强选择器.
    div class="bd"
         ul  //韩妹妹木有 腹肌 =,=
             li
    div class="fd" //韩妹妹有脚~~~~ 难道````李磊木有脚 囧rz~~~~

然后你应该就会发现,这两个东西有很多东西都是相似的.

他们公用了, humen 对象, 共有了 humen hd ,humen bd .
这样的好处是那天人类变异了, 头都变长了, 这个时候只要调 humen hd 就能把李磊和韩妹妹的头都变长.

再谈谈对 分离样式的建议.

适度合理,系统化的分离样式,

分离样式我是推荐的, 但是我不崇尚过度分离, 类似开头说的那样是不太可取的.
仔细想想我们平常已经又好多分离样式的存在,
比如 clearfix 就是分离样式还有类似 grid 都是分离样式
可以根据功能来区分
比如 clearfix 是用来清除浮动的, grid 是用来制造栅格系统的.
比如我平常做独立的小页面时使用的局域分离样式

.fl = float:left  .fr  float:right  来实现 浮动.
a.ico span.ico 来实现 图标化, 因为做系统的时候会将一些图标做成 CSS Sprites , 省去了ico 时需要写的 overflow:hidden ,text-indent:-999em 等属性.
.abs = position:absolute 绝对定位
.has-abs = postion: relative 绝对定位的容器.
.sp= margin-bottom:8px; //这个我一般会绑在 对象类的子属性上. 因为不同对象的sp 间隔不一样.

但是我不会写类似 pl4 = padding-left:4px; 这样的分离样式命名.

好了说了,这么多仅仅是分享一下我的心得,有错误还请指出.

PS: 顺路关注了一下 css 渲染的东西 , 发现css 的渲染原理跟之前理解的完全相反
传送门:深入学习浏览器CSS解析原理
我也抽空研究一下, 这个原理其实对我之前的css 书写有冲突的.
有兴趣的一起研究一下.

您可能还对这些日志感兴趣

神经特长 – lazy hover 延迟激活jquery 插件

飞鱼 — Tue, 07 Sep 2010 11:58:04 +0000

原图地址：淘宝tms里发现，偷过来用用，喜欢就去看看咩~~~

做导航菜单的时候，有的时候希望，鼠标移到菜单上去过会儿才激活二级菜单，鼠标移出去之后过会儿才消失。jquery自带的 hover 事件是立马响应的。google了下网上好像没lazyhover的插件。于是就华丽丽的诞生了这个lazyhover 的插件^__^。

闲话少说，先上代码：

$(function(){
    $.fn.lazyhover = function(fuc_on, fuc_out, de_on, de_out) {
        var self = $(this);
        var flag = 1;
        var h;
        var handle = function(elm){
            clearTimeout(h);
            if(!flag) self.removeData('timer');
            return flag ? fuc_on.apply(elm) : fuc_out.apply(elm);
        };
        var time_on  = de_on  || 0;
        var time_out = de_out || 500;
        var timer = function(elm){
            h && clearTimeout(h);
            h = setTimeout(function() { handle(elm);  }, flag ? time_on : time_out);
            self.data('timer', h);
        }
        self.hover(
            function(){
                flag = 1 ;
                timer(this);
            },
            function(){
                flag = 0 ;
                timer(this);
            }
        );
    }
});

插件使用方法我就不说了，直接贴带代码前就可以，当然jquery.js是必要的(丫不用jquery就当看A-V =，=)。

算了，还是贴个使用方法吧：使用方法其实跟 jquery一样就是多了两个参数，一个是延迟进入的时间(毫秒)，还有一个是延迟退出的时间。

$('#target').lazyhover(
    function(){
            $(this).addClass('unfold');
    },
    function(){
            $(this).addClass('unfold');
    },
    200,1000 //就多了2个参数
);

目前只是个初版，觉得有好多细节可以优化，
待优化点：

1. 比如当延迟时间是0的时候就要避开setTimeout，毕竟setTimeout是个比较耗资源的家伙。
2. 其次当操作对象过多的时候浏览器负载能力的处理，目前是单对象独立时间事件

好了打完收工，有意见想射就射出来吧。哥不怕，咩哈哈~~~~ 用脸接着
开源才是真汉子。

您可能还对这些日志感兴趣

又见IE6吐槽~ 并行结构式class引起的bug

飞鱼 — Mon, 16 Aug 2010 12:29:04 +0000

这个bug 在以前写代码的时候就碰到过了，因为觉得碰到的几率不高，所以就忽略不计了。
现在又碰上了，就努力的分析了一下，然后共享出来，晒晒更健康。

先说一下历史背景：
最近看了太多架构式的书，写出来的样式都比较戳。比如: 提交成功的提示框会这么写。

div class = "msg-mod error" //html标签就省略了，自己YY ^__^

所有的信息提示框，用msg-mod 这个通用库来封装。然后改通用库包含了一些状态，如：error ，ok ，tip ，notice等来表现“错误，正确，提示，注意”等状态。
于是如果你想写一个输出的正确框就可以写成这样。

div class = "msg-mod ok"

这样做有什么好处呢，

1. 首先样式全局化，使用msg-mod 来全局控制，
2. 使用非常语义化的状态：error,ok ，来衍生出不同的样式(使用并行结构式方法来实现，后面会解释)。
3. 更适合功能的一些特性：有些时候需要使用js 动态的改变msg的样式，这样写出来的js 语义也更强，可读性也增强。

如何实现：

这个应该都清楚。我就一笔带过，贴个代码。

div.msg-mod{  //全局msg-mod 样式，并且有一种初始的样式，使用div开头，增加选择器效率。
    padding:5px 7px;
    border:1px solid #92e577;
    background-color:#eefbed;
}

然后通过结构式定义不同状态的样式，这种将两个class组合起来，并行定义的样式，我称之为并行结构式

div.msg-mod.error{  //error 状态
    border:1px solid #ff8c40;
    background-color:#fff5e6;
}
div.msg-mod.notice{           //notice 状态
    border:1px solid #ffcc7f;
    background-color:#ffffe5;
}

思维扩展：

这样的表现形式还能接受吧？那么我们继续扩展。比如：如果想给一些msg-mod 添加图片来增加视觉效果(如配图^__^)。
要想配图么，于是又给msg-mod 新加了个class属性 has-ico，当然有人会说：默认为什么不给所有msg-mod都配图，给没图的配上属性no-ico，嘎嘎随你~~~，因为后面还有，慢慢看下去就知道了。

div class = "msg-mod has-ico ok"
  h2  提交成功
  p   订单已成功递交，请进入我的订单查看订单状态。

如上面的代码当有大字的时候就使用大的ico图标，当只有小字的时候，使用小ico。(如配图=，=)
于是乎我又添加了个属性 has-sml-ico。

div class = "msg-mod has-sml-ico ok"
  p   订单已成功递交，请进入我的订单查看订单状态。

然后在css样式实现的时候又重现了这个IE6bug，就是IE6下用并行结构式实现不了大小图配置。

分析原因：

经过分析，发现原因是，IE6在解析并行结构式的时候会出现解析错乱现象。比如

div.msg-mod.notice.has-ico{  //notice 有has-ico 的时候显示notice 图标
     background:...
}
div.msg-mod.error.has-ico{  //error  有has-ico 的时候显示error 图标
     background:...
}

这个时候，非IE6情况下，都能够根据css 的结构来显示出想要的结果，但是IE6脑残了，就将其解析成。

div.msg-mod.has-ico{   //忽略了中间的class。
     background:...
}

这样IE6下就以最后一个样式来呈现has-ico的状态。有兴趣可以回家试试，oh yah。

div.msg-mod.error.has-ico{  //error  有has-ico 的时候显示error 图标
     background:...
}

当然有人会说：那把结构式换成 div.msg-mod.has-ico.error试试。
经过尝试，IE6同样会忽略掉中间的class，解析成div.msg-mod.error囧rz~~~~

然后就无解。 ··· 折腾了好久，终于放弃了。然后想了另外的情况来解决。

解决方法：

导致样式错乱的原因初步定位为：3层class 并行结构式会忽略中间的class，(或者说忽略掉第一个也可能，具体我没有深入研究)
解决办法很简单，当然跟解决IE6的其他办法一样，能避开就避开，用其他方式来实现。
于是乎，重新整理了代码思路，整理如下：
既然并行结构式会导致bug，那么不并行的结构式会有问题么？
我将图片的实现放在子标签h2 上来实现，问题就解决了。如下：

div.msg-mod.error.has-ico h2{
     background:...
}

得出结论，使用非并行结构式样式在IE6下有解。·· oh yah。
不过以上代码还有些bug，这样会对msg-mod 下的所有h2 都增加了图标，于是这样优化了一下。

div.msg-mod.has-ico{
    padding-left:42px;
}
div.msg-mod.has-ico h2.ico{
    margin-left:-37px;
}
div.msg-mod h2.ico{
    padding:7px 5px 10px 37px;
}
div.msg-mod.error h2.ico{
     background:...
}

这样这样实现，通过给msg-mod添加has-ico 属性给内容增加左侧留白(多行的时候)。通过给h2添加ico样式来添加图标。当然单行时候也可以不用加ico，但是根据语义化，还是加上会happy 点。
同样实现小图的时候就添加 has-sml-ico属性，在标签p上添加ico 样式。代码如下：

div.msg-mod.has-sml-ico{
    padding-left:30px;
}
div.msg-mod.has-sml-ico p.ico{
    margin-left:-25px;
}
div.msg-mod p.ico{
    padding:0 5px 0 20px;
}
div.msg-mod.notice p.ico{
     background:...
}

这样，有效的避免了并行结构式带来的错乱压力~~~~ 万恶的IE6丫~~~~
这样处理有利有弊啦··。
就是必须要在里面的标签上多加一个ico 的样式。

其他目前还没有碰到什么问题。欢迎反馈~~·

您可能还对这些日志感兴趣

一知半解 – 分析淘宝商城首页的 lazy load 功能

飞鱼 — Wed, 30 Jun 2010 04:35:09 +0000

最近趁部门搬至淘宝办公。
研究了一下之前就开始注意的：商城首页 的lazy load 实现(也可以说是：伪异步加载)。
首先解释一下商城的 lazy load 是怎么一回事。
我们打开商城后发现，当你拖动滚动条往下，第二屏以下的东西才慢慢加载出来。
这样做能在初次打开的时候http 请求将大幅度减少，并且页面加载速度也提高不少。

上面说的伪异步加载是咋一看的推测，感觉像是滚动到那里的时候整一个ajax请求，将下面内容加载进来。
后来在不经意之间看了下源代码发现的。
看下面是商城的源码截图。

从图中可以看出，源码中有很多 textarea 的标签，里面的值就是即将要加载的html，然后就恍然大悟，原来所谓异步加载也可以这样来实现。

分析实现流程

首先是将要加载的html代码丢进textarea 里，因为此时html 在 textarea 是一直val形式，不会被浏览器解析渲染，所以页面在刚加载的时候只显示第一屏。然后通过计算滚动条的相对偏移(数学问题)，将textarea的val 值添加到html 的dom里，因为浏览器是即时解析的，新添加的dom 会被重新渲染，这样新加的html 就显示出来了。这个就是所谓的lazy load ：伪异步加载。

为什么要用textarea ?

其实这个东西估计是因为html 标签的限制，这个方法的设计之初，设计师想将硕大的html数据缓存在一个不会被解析标签里，然后就发现textarea 刚好符合期望。

为什么不用ajax ?

因为数据不需要验证，不是时变性的数据，再者使用ajax 会增加http请求，并且维护性不好。
目前淘宝的 TMS 后台系统都是模版化引擎，使用ajax 会对模版化引擎产生冲突以及维护成本高等。

如何实现？

从实现流程来讲，这个功能实现起来没什么难度，唯一有难度的是，怎样把这个功能做成一个通用的模块，简易添加 class 以及配置就可以实现等来提高重用特性。

有合弊端

优点那么多，缺点又怎样呢·？
SEO：存在textarea 里的数据能不能被搜索引擎抓取呢？这个我最近在自己blog里研究一下。
web标准：这样的做符合web标准么？将html代码放在textarea来实现 飞鱼：只是一个标准而已。

好了打完收工~~~

===============2011年4月29日= 更新===================

SEO 的影响

我尝试着在项目中的list 页面中使用了这样的textarea 形式加载方法：(以下搜索引擎主要以google引擎来分析， 度娘V5 玩不起)
发现 seo 是能抓到 textrea 中的内容的，
1. 研究有发现 textarea 里的内容会被google搜索引擎当作大段内容形式来表现(google 会以为textarea 里的内容是‘正文’ 的错觉) ，如果是类似内容页，建议将textarea 部分放在内容部分之后，这样能让google 将真正的内容部分抓去当作正文。
2. textarea 里的html 代码也会因此暴露出来通过查看抓取页面(site:xxx.com)会发现(搜索结果的表述里会有html 代码出现) 因为google 认为这是内容而不是代码。
3. 因为以value 形式存在于 textrea 里，于是这里面的链接会被google直接跳过，当然有好处有坏处，好处是 google 可以快速得跳过这些链接加快网页抓取，坏处是会错过这些链接(只要做好sitemap 就能避免这样的问题)

以上：如果有好的idea 欢迎交流·· ^__^ 俺们都是菜菜鸟

飞鱼 ^_^ 浆抱罗斯‘s blog » 代码浅谈

vertical-align 图片文字水平对齐分析

vertical-align 定义

vertical-align:baseline 基线对齐

不同字体会有不同效果

vertical-align 最好不要混用

vertical-align: px 定位最稳定

高潮：vertical-align 最佳兼容方案

您可能还对这些日志感兴趣

那些新增的标签 — html5 学习笔记

section 是有语义的div

header 不是一定要唯一

hgroup 在header 标签中充当目录指引作用

有了沙箱后，网站结构变得不是那么虎头蛇尾

您可能还对这些日志感兴趣

css心得之善用 position:relative

解决方案

position:relative 在:hover 上的妙用

您可能还对这些日志感兴趣

闭包式 js架构 前端书写心得(上)

5月份的杭州区w3c标准化交流会

1. 说说闭包

2. 利用匿名函数解决$冲突

3. 怎样不污染命名空间

4. 所谓 闭包式 js 架构 前端书写

5. 说明下这样书写的好处

6. 从一个栗子 表现书写心得

7. 方便的启动函数便于调试

8. 闭包式的由来

9. 其他一些可以扩展的东西

您可能还对这些日志感兴趣

html5 新思路的开始 – web标准化交流会 (杭州站第三期)

一、div section article 傻傻分不清楚 – by 蕃茄

二、canvas 应用开发, 真3d引擎 – by 周杰 hehe123 思科网讯

三、感慨： 我们走得还不够快

您可能还对这些日志感兴趣

三元运算符 使用小技巧一则 – javascript

普通用法

稍微聪明点的用法

甚至更变态些的。

再升华一下

那么为师的完全体

尽量避免的情况

您可能还对这些日志感兴趣

偏激害死人 – 再谈 OOCSS – 对象式书写规则

过分进行属性分离的后果

什么是OOCSS ( Object Oriented CSS )

OOCSS 是如何在代码里体现的?

OOCSS的优势在哪里 ?

适度合理,系统化的分离样式,

您可能还对这些日志感兴趣

神经特长 – lazy hover 延迟激活jquery 插件

您可能还对这些日志感兴趣

又见IE6吐槽~ 并行结构式class引起的bug

如何实现：

思维扩展：

分析原因：

解决方法：

您可能还对这些日志感兴趣

一知半解 – 分析淘宝商城首页的 lazy load 功能

分析实现流程

为什么要用textarea ?

为什么不用ajax ?

如何实现？

有合弊端

SEO 的影响

您可能还对这些日志感兴趣

闭包式 js架构前端书写心得(上)

4. 所谓闭包式 js 架构前端书写

6. 从一个栗子表现书写心得

三、感慨：我们走得还不够快

三元运算符使用小技巧一则 – javascript