布罗特的Blog

Category Archives for 前端开发

网站前端开发资料收集

Web 前端最佳实践之内容篇 Web 前端最佳实践之Server篇 Web 前端优化最佳实践之 Cookie 篇

三列互适应等高且中列宽度自适应布局的几个方法 [翻译]寻找圣杯

利用box-sizing实现div仿框架 body标签class属性的妙用(Google Reader前端简单分析)

IE中查看js错误 常用CSS缩写语法总结 PDA 网站制作规范 Web前端开发必备工具更新为2010.02.03

sIFR technology

几个月前曾经写过一篇"Web Fonts 路在何方",然而这种技术看起来要得到广泛应用还是不太可能,主要原因就是万恶的IE。碰到需要用到特殊字体的时候,还是sIFR更靠谱。其实sIFR技术在几年前就有了,w3cn.org上2005年就有翻译文章:如何以及何时使用sIFR,经过几年的发展,sIFR应该说是更加成熟,最新的内测版本都已经到了3.

下面留存几个相关网址,看完这些文章后,对sIFR的使用基本上就没有障碍。
sIFR官网 sIFR Generator OTF转换为TTF工具 谈谈sIFR - 可伸缩Inman Flash替换

原生JS选项卡切换

以前模拟新浪做过一个简单版的tab切换,这回增强一下,选项不采用常规的ul,li结构,更加语义化。此切换可以自己指定默认显示哪个Tab,兼顾JS被禁止情况下的页面效果,算是自己对渐进增强的一点点理解。

Read more...

浮动的bug与清除浮动

今天用回原先做的模板,修改DIV嵌套后出现bug一只,wrapper的白色背景无法被左右浮动的层里显示,最后才发现在footer中除了clear:both外还多了float:left;删除后bug终于解决。这只bug在别的blog中也很容易重现,虽然解决但是还搞不清楚原理是什么。footer清除了content和sidebar的左右浮动之后,照理应该与它们无关,没想到还会影响父层。另外还发现在IE6中body下一级div的margin-bottom不起作用,但是margin-top有效,给body设定padding-bottom可以实现,可能因为一级div高度不定时无法获取body高度,也可能是其他原因。

整理书签的时候发现quirksmode上的一篇Clearing floats,有时候页面中不存在footer,在不增加额外代码的情况下,使用overflow来清除浮动算是最简便的方法,不过必须指定宽度或高度来触发IE下的hasLayout。nnBTW:今天收到edong的邮件,提示bunorte.cn将于下月到期。这次不想再续,在godaddy注册了一个bunorte.com,可能空间还是跟风之逸一起合租。尽管域名和空间都托管在国外,访问速度会影响一些,但是不管怎样总比被“鸡爱抚大步流”监管好,案也不备了。

Web Fonts 路在何方

2007年8月28日,A List Apart上发表了一篇文章:CSS@Ten: The Next Big Thing,在宣告CSS十周岁的同时,更是带来了让网页设计师欢欣鼓舞的消息:Web Fonts 归来。时至今日,主流浏览器中目前只有Safari 3.1以上版本才支持web fonts技术。在CSS@Ten中提到Dieter Steffmann,一位强大的字体设计师,在他的主页上提供了非常多的字体下载。虽然web fonts技术对于中文用处不大(众所周知中文字体文件动则几M,严重影响网页打开速度),但是在英文这部分,设计师有了更多的发挥空间,不再拘泥于系统自带的那几个Arial,Tahoma,Verdana固定字体。在这里有一个Demo页,可以使用Safari 3.2观看效果。

在其他的浏览器方面,微软是一心一意进行自己的EOT技术,IEBlog上长篇大论的说的只是WEFT。Firefox 3.1开始新增对@font-face的支持,但是目前还没有发布正式版(不知道会不会跳票到明年),感兴趣的可以下载这个尝一下鲜。最新的chromium bulid5673 还不行。同样,最新的Opera也不支持。BTW:对于web开发者,尤其是iphone的网站开发,可以看看这里的文章。

谁说容易谁说难

简单的东西在不同的人眼里看来,还是有不同的,看到这篇教程,标题取名“谁说容易谁说难”,好像是一下子说到了心里。一个非常简单通用的tab切换,完全是静态内容显示,js调试也会让人花时间。也许自己再做注释只是为了以后能够看懂是什么意思。Blog有一个好处,你可以从别人写的东西里面了解他的经历,他曾经的心情。而我也看到很多值得学习的闪光点。