Archive for 07月, 2008

一个另类的height:100%,width:100%的方法

07月 30th

这个方法是在做项目时候使用YUI,参考它对于阴影的做法得到的。
兼容性:
FF,IE7。IE6上不好用,虽然有hack的方法可以达到类似的效果,但是和实现的原理不一致。
IE6下设置bottom的值不能达到我们预想的效果,必须要设置height:100%。但是多数情况下,我们的父层container的元素会是自动适应内容高度而不是指定的高度,所以他的使用范围就打了一个折扣了。
代码如下:

#container{
width:200px;
height:300px;
border:1px solid red;
position:relative
}
#item{
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background:#ccc;
}
<div id="container">
<div id="item">this div id is item</div>
</div>

这样我们可以看到item的高度是和container的高度一致的。如果我们改变一下top和left等的值,就可以做出阴影一类的效果。
我用在哪里?
在wui项目中,需要用一个阴影的遮盖层来遮盖网页的部分内容,但是这个遮罩的大小又是不固定的,需要自动适应。半透明滤镜的方法大家都知道,在此就不多说。最初我们设置了一个大小固定的,足够大的遮盖层来处理,这样所有的内容都可以被遮盖到。但是由于ie对滤镜的渲染有问题,导致这样处理之后,页面奇慢无比。
当然最优的方案是遮盖层需要多大,我们就给他多大,这样可以最大程度的避免性能的损耗。而在项目中由于时间所限,又没办法使用脚本操作。所以就用了上述这个自动适应的办法。这样ff和ie7都满足了需求,而在处理ie6的时候,使用了一个适当大小的层来遮盖住一部分内容,这样兼顾了部分性能,以满足交互的需要。
主要问题在于YUI的另外一个观点:性能更优越的浏览器,我们应该让它更好。而不是一味兼顾所有浏览器上一致的表现。

斯是小室,何陋之有

07月 30th

在hi-id上面看到这篇文章。标题取的特好。感谢家人,我也有了陋室。

Micro-Compact Homes上层有一张双人床,下层有工作台以及供4,5个人的用餐空间。厨房台自然可以为上下层服务。出入口的休息处可以有多种功能,浴室、晾衣的地方、存储空间。

display和inline元素的区别

07月 30th

总结一下inline元素和block元素的区别

最常见的就是:inline元素会在同一行显示;block会在新一行中显示,就好像后面加了一个<br />
block在正确的渲染下面,是不会跟随其中的内容“撑开”容器的。inline元素的宽度和高度,则和其中的内容有关,即使你设置width和overflow:hidden,也是无效的。
width,height,垂直方向的margin和padding属性的设置对inline没有作用,但是line-height、垂直方向的margin和padding。可以扩充盒模型的范围,但是不会影响其他元素的盒模型位置。水平方向的margin\padding对inline元素有效。
注意到源码之间的换行了么?inline元素对于源码间的换行敏感。换行会导致在渲染的时候出现一个间隙(ff下,ie不会)

这里有一个demo可以查看。这个demo做的太糟糕了。不看也罢
特别请注意,block元素可以包含block或者inline,但是反过来,inline元素不可以包含block

别把html的嵌套顺序搞错了

07月 29th

发生了什么
好久以前的经验了,再在这里总结一下。
按照我上篇文章写的p2的第三条:在制作页面时抛开像素级的细节问题不提,在ie6,ie7,ff中可以做到一次成形,不需要太多的hack。这条初学者可能认为很难,但是就我个人的经验而言,在我开始注意适当(不是过度)关注语义化标签;注意haslayout;使用正确的嵌套顺序之后已经很容易做到了。其中少被人提及的是:使用正确的嵌套顺序
遇到了什么
在我刚开始写css时,遇到过非常多的莫名其妙的不兼容性问题(指不出现在常见的ie hack表中的问题),所以我只好利用很多很多的hack,代码变的很糟糕。总结后所产生的原因大概都是如下几类:

haslayout
嵌套错误
没有理解float

其中又以嵌套错误所产生的bug居多。我最初就过度关注于html标签的语义化问题而忽视了嵌套规则。
办法
有一个很清楚的嵌套规则表:Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict)已经有很多热心人士翻译过了。正确的html标签的嵌套,会让浏览器按照你预想的来渲染你的代码
表的内容好像比较复杂,但其实在满足语义化的情况下,只需要做到:

记住那些元素是block,那些元素是inline
block元素才能包含inline元素,反过来别这样做。
如果有控制之外的需求,导致inline元素包含了block元素,那么把外层的inline元素设置display:block
如果有元素已经是float,那么他的display属性也变成了block。

ok,如果这样做了。基本上你的页面在ie6/7 ff中的表现,应该不会和你预想的相差太多。

前端的责任心

07月 25th

前端开发是个蛮模糊的职业,你也可以说他很综合,前台后台连photoshop都要会用,html css javascript php 搞不好vbscript 和java你也要搞,浏览器要装一堆烦也烦死。
最近圆心推荐了篇文章:工作:近況 v.s. 回憶,是tw yahoo的前端开发工程师的日志。其中有提到 Hedger对他的影响。今年在yahoo召开的D2有幸也见到了Hedger Wang,一名很优秀的前端开发工程师。这里的优秀一方面是指技能很高,更重要的是他有非常良好的前端开发的责任心。
何谓责任心?这一阵都在做项目。也在思考,前端开发工程师该如何去发展?在其位谋其职,必然要尽力做到现在的最好。那么该如何做好呢?
ali系都是用p级别来划分技术序列。按照类比一下做一个小划分
p1

了解web标准,能够制作出基本符合w3c标准的页面。
知道基本的html标签的语义化含义。
了解基本的hack方案,能够让页面在主流浏览器上拥有一致的展现。

p2

了解web标准,可以在项目实施中解答成员对于web方面的疑惑。
了解主流浏览器中的常见bug,在遇到页面问题时可以去分析出是什么导致问题的出现。
在制作页面时抛开像素级的细节问题不提,在ie6,ie7,ff中可以做到一次成形。
有基本的脚本能力。

p3

深入了解web标准,并可以影响他人。
可以深刻理解在前端中表现层和行为层的概念,能够在coding中做到良好的分离。
有一定的脚本能力。
在开发中开始考虑前端的页面性能并做出优化,例如完全理解并使用css sprite、优化http连接数、脚本加载顺序对页面的影响等。
了解可用性问题,不仅包括用户可用性,也包括前端和后台的可用性问题。
在项目初始阶段可以开始审核设计方案是否存在“不经济的设计表现”。

p4

深入了解web标准,并跟踪业界前沿。
开始追求更优的页面实现方案,例如良好的、可扩展、易于维护的html结构,可大量复用的代码。
了解更多诸如css、html、javascript的技术细节,这意味着在有同事请教“为什么这样”时你可以很快告诉他问题在哪里。
开始注重可用性问题:例如用户在出现疯狂的状况时,脚本是否任然有效率。在主流浏览器上运行良好的页面,在非主流浏览器上能否任然可用。用户网络状况糟糕时,还能否满足交互流程的继续进行。有没有处理好多个ajax请求的状况,
哪些是重要的,哪些是次要的。
在项目阶段,能否提出“经济的、更好的前端设计”

p5
一个有责任心的前端开发。ok,我们已经到了p5了。相对于责任心,技能真的是一个其次的东西。你的责任心在哪里,项目的测试在加载你的代码时可能看不出code的好坏,工程在将你的代码和前台合并时也不知道你的代码好不好,只有离你很远的、很特殊的用户也许才能知道(因为糟糕的网速、陈旧的机器或者疯狂的操作)。剩下的都在你的心里面。
要:让你的每行代码都有灵魂,让你的页面在大多数的情况下都可以发光发热。
晕了。我好像不是代码狂人,菠萝才是
不过Progressive Enhancement。把细节一一做好了,那么也就越来越有责任心

« Previous Entries

Size

Colors