布罗特的Blog » 前端开发

网站前端开发资料收集

admin — Mon, 01 Mar 2010 11:06:46 +0000

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

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

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

sIFR technology

admin — Sat, 23 May 2009 15:17:43 +0000

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

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

原生JS选项卡切换

admin — Thu, 12 Mar 2009 11:17:28 +0000

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS选项卡切换</title> <style> body{font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif} #wrapper{margin:0 auto;width:400px;height:auto;border:1px #333 solid;position:relative;overflow:auto/*clear floats*/} .box{margin:0;padding:0;clear:both} ul{margin:0;width:100%;padding:0;float:left;background:#ccc; list-style:circle;list-style-position:inside} ul.json{margin:24px 0 0 0} #wrapper h3{height:24px;line-height:24px;margin:0;width:85px; display:inline-block;padding:0 0 0 15px} #wrapper h3.json{position:absolute;top:0;cursor:pointer} #wrapper h3.on{background:#0099FF} #wrapper #box1 h3.json{left:0} #wrapper #box2 h3.json{left:100px} #wrapper #box3 h3.json{left:200px} #wrapper #box4 h3.json{left:300px} </style> </head> <body> <div id="wrapper"> <div class="box" id="box1"> <h3>title 1</h3> <ul> <li>content1</li> <li>content1</li> <li>content1</li> <li>content1</li> <li>content1</li> <li>content1</li> <li>content1</li> </ul> </div> <div class="box" id="box2"> <h3>title 2</h3> <ul> <li>content2</li> <li>content2</li> <li>content2</li> <li>content2</li> <li>content2</li> <li>content2</li> <li>content2</li> <li>content2</li> <li>content2</li> </ul> </div> <div class="box" id="box3"> <h3>title 3</h3> <ul> <li>content3</li> <li>content3</li> <li>content3</li> <li>content3</li> <li>content3</li> <li>content3</li> <li>content3</li> </ul> </div> <div class="box" id="box4"> <h3>title 4</h3> <ul> <li>content4</li> <li>content4</li> <li>content4</li> <li>content4</li> <li>content4</li> <li>content4</li> </ul> </div> </div> <script type="text/javascript"> window.onload=tabs; var Item = 4;//设置默认显示第几个Tab function addClass(element,value) { if (!element.className) { element.className = value; } else { element.className+= " "; element.className+= value; } } function tabs(){ var h3s = document.getElementsByTagName("h3"); /*将默认显示的tab高亮*/ addClass(h3s[Item-1],"on"); var uls = document.getElementsByTagName("ul"); for(var i=0;i<uls.length;i++) { //将所有ul切换到JS支持状态下 uls[i].className = "json"; //将默认显示的Tab对应的内容显示 if(i==Item-1) uls[Item-1].style.display = ""; //将其他的Tab对应的内容隐藏 else uls[i].style.display = "none"; } for(var i=0;i<h3s.length;i++) { //将所有h3切换到JS支持状态下 addClass(h3s[i]," json"); //点击选项卡时进行切换 h3s[i].onclick= function(){setTab(this);} } } function setTab(whichtab) { //获取当前鼠标点击标题时外层DIV对应的ID var boxid = whichtab.parentNode.getAttribute("id"); //截取ID最后一个数值 var id=boxid.substr(boxid.length-1,1); currentItem = Item; //如果鼠标不是划过默认显示的Tab，才进行下一步的隐藏和切 if (id!= currentItem) { var defaultBox=document.getElementById("box"+currentItem); //隐藏当前显示的Tab对应的内容 defaultBox.getElementsByTagName("ul")[0].style.display = "none"; //将当前显示的Tab切换到非高亮状态 defaultBox.getElementsByTagName("h3")[0].className = "json"; } var currentBox = document.getElementById("box"+id); //显示目标Tab对应的内容 currentBox.getElementsByTagName("ul")[0].style.display = ""; //将目标Tab切换到高亮状 addClass(currentBox.getElementsByTagName("h3")[0]," on"); //Tab切换完成 Item = id;//将当前Tab的数值存储到变量以供下一次调用 } </script> </body></html>

Tips:You can change the code before run.

浮动的bug与清除浮动

admin — Tue, 17 Feb 2009 03:51:13 +0000

今天用回原先做的模板，修改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 路在何方

admin — Wed, 19 Nov 2008 07:21:44 +0000

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的网站开发，可以看看这里的文章。

谁说容易谁说难

admin — Tue, 04 Nov 2008 08:39:35 +0000

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

浏览器的CSS兼容性笔记

admin — Sat, 25 Oct 2008 10:31:44 +0000

曾经在某前端开发的招聘要求中看到要知道在IE6.0、IE7.0、IE8.0、Firefox1.5+、Opera下css的不同表现，浏览器兼容性自己也不是很清楚，总是碰到问题了去google，或者用hack，还是慢慢记录下来一点，免得忘记。CSS2 手册在线版：http://www.52css.com/css/

CSS hack浏览器兼容一览表：http://www.w3cn.org/article/tips/2006/120.html

CSS 属性介绍、兼容性查找：http://reference.sitepoint.com/css/

1. min/max-width/height
IE5.5 & IE6：不支持
IE6在怪异模式下支持td，th，tr的min-height(via)
IE7，IE8：支持
Firefox 1.0+：支持
Opera 9.2+：支持
Opera 9.0(2007.03.28) 对图片max-width支持有bug Via Bug Download
Safari 1.3：部分支持，Safari 2+：支持

2. ul标签在firefox中默认有左padding 40px,上下margin 16px的,而在IE中只有左margin 40px=30pt

3. overflow-x,overflow-y在opera中不支持会同时出现水平和垂直滚动条 Via

4. clear属性在IE5.5,IE6,IE7下有Bug Via IE6 Peekaboo Bug IE7 Bug Report IE7 Bug

5. z-index属性在ie和ff下表现不同，在IE中，子元素无法突破父元素的限制，所以子元素与父元素的同级会出现按照既定顺序来排列的情况；在FF中，子元素可以突破限制，盖住父元素的同级。Via

蓝色的开心网

admin — Wed, 27 Aug 2008 10:23:58 +0000

仅仅改了颜色和宽度，模仿成早期FB的型。CSS调整宽度完全是个体力活，只改了些常用的页面，很多还没有测试过。使用方法：Firefox+Stylish,添加kaixin_blue_style到Stylish。

Html Enhancement with Spry

admin — Sat, 28 Jun 2008 03:11:19 +0000

图中Dreamweaver CS4中正在编辑的网页其实是一个Spry的例子，利用HtmlDataSet从静态页面中获取数据然后填充到Spry区域中，实现简单的ajax效果。Spry这个框架发展到现在已经不再像cs3刚出来时简单的选项卡下拉，它的include目录就有35个js文件，涵盖HTML,XML,JSON,DOM,Effects等等方面，这都是Adobe公司以及开发者的努力完成的，而这个还处在Labs中的产品还在开发之中，最新版本1.6.1。

上面的例子在Adobe的官方文档页可以找到详细的说明，具体是怎样实现最终的效果都有介绍。而我所关注的是范例是否与web标准冲突，考虑用户是否禁用js，是否禁用css，在各种情况下用户能不能看到最重要的内容。这个例子做的比较好，唯一有点不完美的就是HTML中掺杂了Spry数据代码，当用户禁用了js的时候，虽然可以看到默认的内容，但是多除了那些代码，可能会造成困扰。如果用js来生成可以更好，不过那又是一项繁复的工作了。

a:hover在IE6中的bug

admin — Fri, 20 Jun 2008 02:25:31 +0000

HP Mini 产品页中有一个功能，产品图中有4个热点，鼠标划过时可以显示说明文字，在firefox下很完美，不过在IE里有些瑕疵，鼠标划过时出现说明框，一开始还有残留的背景图片一角。搜索到淘宝UED上的一篇文章：IE6 中 a:hover 的bug 尝试修改了一下css，position:static解决了问题。效果页:IE6鼠标划过有残影版本修正后的完美版本。PS:2个页面在Firefox里一样，在IE6里不同。

当然，也可以把strong的绝对坐标移到a之外也可以不出现残留，不过这里主要是考虑解决问题的方法。HP的这种嵌套形式值得借鉴,外层div相对，然后4个span绝对通过ID来确定不同位置,span里面a默认不设position，a:hover才相对span定位,最终strong默认不显示，移过a时才设定为绝对，同时都是对应各自的a,用得及其灵活，不过把热点做到背景图里后期修改就要麻烦设计师了，不过为了实现透明还是有必要的，采用png或者透明gif为background可能会需要多做点功夫。

Gmail Redesigned

admin — Fri, 23 May 2008 17:26:22 +0000

Gmail Redesigned (via Stylish) 大幅改善了Gmail的视觉体验，就靠一个界面就能让人使用Gmail。严重期待Google Reader Redesigned和Google Docs Redesigned.

利用好YSlow，提高网页打开速度

admin — Sun, 13 Jan 2008 06:22:27 +0000

在经过我修改模板，CSS，和功能后，用YSlow测试打开首页得分已经可以达到93分了。除了Use a CDN是F级，Make JavaScript and CSS External是n/a外，其他11项全部是A。要说是怎么做的，就是根据Yahoo的14条规则去进行优化，有些技术是以前听过的，有的则没接触过，不过凡事都是慢慢摸索出来的。Yahoo还提供了YSlow这样方便的插件，对于Web Developr来说真是一款利器，不管是自己的Blog,还是工作中碰到提高速度的问题，都可以进行应用。

一篇对14条准则的中文翻译。n原文地址：如何提高网页的效率（上篇）——提高网页效率的14条准则

一篇主要谈Expires Header，Cache,ETag的。n原文地址：Config HTTP Header For Better Client Performance

一篇主要介绍YSlow的文章。n原文地址:如何提高网页的效率（下篇）——Use YSlow to know why your web Slow

我对blog进行的几条优化。

1. 在后台选项->阅读中开启Gzip,在不使用wordpress内置缓存或者其他cache插件的情况下，Gzip可以很有效的压缩网页大小。当然，也有人研究出wp-cache与Gzip共存的方法，这里就不讨论了。

2.还是那句老话，压缩CSS，将用到的背景图片做到一张图里，通过位置来控制显示哪个。我Blog上的这些小图标其实全部都是一张图片。淘宝好像是把所有用到的背景图片做到一张图里，真是有点BT。不过这个活是有点技术含量的，要考虑不同的情况，并不是全部堆到一起了事。

3.规则13 Configure ETags 我以前从来没听说过ETag这个词，不过根据上面第2篇文章里的介绍有了点了解，对于使用单服务器的网站来说，静态资源(主要是图片)的生命周期比较长，所以没什么必要通过检测ETag来处理是否同一资源而像客户端发送，所以直接关闭就可以。对于Apache，就是在httpd.conf或者.htaccess中加一行FileETag none，我是采用后者，直接把.htaccess文件放到theme的images目录里。

4.规则3 Expires header 同样参照上面第2篇文章，给图片设置一个月后过期，style.css.php代码参考这个来对CSS进行Gzip,顺便设置过期时间，我是设置的一天，因为CSS修改算比较频繁。另外还可以看看这篇文章，我的.htaccess代码就是根据它修改的。比较幸运的是，我的空间支持mod_expires。

大致上就是这4条，不过要利用YSlow进行检测，看得分如何，有什么提示。目前我的YSlow有93分，也因为没有在Blog里加任何统计代码，不调用js。因为统计用的代码都会拖慢速度，如果用别人提供的自己无法控制Expires header，装自己空间里会占用一定资源，mint的调用方法比较难设置Expires，我还没找到其他什么好用的php+mysql统计程序。

IE里的图片间距

admin — Sun, 29 Jul 2007 13:35:43 +0000

网站底部有个广告图片区域，用的是li排列，里面插入的img标签，CSS里设置了ul,li,img的高度都统一，在firefox里很完美，图片紧贴着外边框。但是在IE里图片的下边很明显可以看到几px的间距，造成了高度增加，这样左右底部就不对齐了，影响美观。搜索了一下，发现了在li标签里加img的问题，进而找到蓝色理想的一篇帖子：IE图片下空隙问题解决方法集合，知道了几种解决方法.
1.设置img的display为block
2.设置img的vertical-align为top
3.设置img父容器的font-size为0
4.设置img 的margin-bottom为负值，同时针对FF设置margin-bottom为0

Script Rule

admin — Sat, 14 Jul 2007 09:54:53 +0000

慢慢积累日常写代码时的错误。1.定义数组要写Array,array是错的。2.length写成lenth。3.getElementsByTagName里Elements多了一个s，跟getElementById不同。4.script在头部调用和直接把代码复制到网页里效果不同。

Line-height/Replaced Element Bug

admin — Fri, 13 Jul 2007 13:30:51 +0000

发现在有图片，文字，文本框在同一行里，很难控制对齐。搜索到这篇文章中文的简单说明找到这里，但是按照里面的方法没有解决问题。不知道为什么。有时间再研究一下。

IE Comment Bug

admin — Thu, 12 Jul 2007 16:16:31 +0000

实际工作中碰到问题，通过论坛和搜索解决了，值得记一记。今天收到测试员的邮件，错误截图是IE6里的，在某处搜索结果的10/100出现了2个100，第2个100跑到第2行。在IE7和FF里都是正确的，联想到前些天在blueidea论坛看到的一个帖子，然后就去仔细看了一下，发现有人说这是IE的注释bug.可以通过加clear或者修改注释在程序的位置(其实就是程序员把注释写到div里面去了)。

搜索到这个，里面有人说在《CSS Mastery Advanced Web Standards Solutions》书里有说到经典的注释bug：

IE 6 duplicate character bug: This bug manifests itself when you have multiple comments in between the first and last of a series of floated elements. The first two comments have no effect, but each subsequent comment causes two characters to be duplicated.

解决方法就是把html代码中那些连续float元素间的注释给删了，我是为了方便还是给那个元素加了clear:both 。

!important的顺序问题

admin — Thu, 12 Jul 2007 15:40:32 +0000

虽然很早就已经从w3cn.org看到这个hack，但是今天突然发现以前的想法是错的。我以前知道只有IE不支持!important这个语法,其他浏览器都支持，所以在出现浏览效果不同的时候，就强行给某些属性加!important，但是都是后写!important，因为我的理解是IE不支持!important，那它就认定先写的没有!important的值，而后面写了!important的值就是其他浏览器读取。今天看到这个，发现我的想法是不对的。

正确的做法应该先写带!important的值，这样其他浏览器就认定这个优先级最高，读取这个值，然后再写一个为IE的值，由于它不支持!important语法，所以先写的带!important的值被IE读取为那个值，之后又被下面定义的值所覆盖掉，这样在IE里认定的后来写的值，而不是先前写的带!important的值。所以，以后要做CSS Hack,记得要先定义带!important的!!!!!!!!!

网页标准之常见错误

admin — Thu, 12 Jul 2007 14:00:37 +0000

要想达到This Page Is Valid XHTML 1.0 Strict!的目标，必须慢慢积累。写网页代码的时候要逐步向标准靠拢。最开始就要避免一些常规的错误.

1.所有的标签都要用小写。比如a,p,span,ul,li div等等。
2.所有的id,class属性后都要用引号。比如id=”wrapper”,class=”logo”。
3.调用java script最好单独把代码写到js文件里，然后从网页头部调用。并且要加type=”text/JavaScript”，不能用language=”Javascript”。
4.所有的单独标签要用/>关闭。比如
,

等等。
5.body里没有onload属性，要实现应该用JS。
6.target=”_blank”不符合严格标准定义，要换rel=”external” via

单图转滚和图片限制的运用

admin — Wed, 11 Jul 2007 05:02:30 +0000

Google Korea页面下方的动态效果研究 Via 明白了background-position中x,y轴的计算方法。