Google 上搜到了一个不错的工具,用于大型JavaScript的优化工作. Down 一个下来看看.
Month: 一月 2010
《JavaScript 高级程序设计》-闭包
ECMAScript 最容易让人误解的是它支持闭包 (closure) .所谓闭包,只是词法标识包括不必计算的变量的函数.也就是说,函数能使用函数外定义的变量.在ECMAScript 中使用全局变量是一个简单的闭包实例.
var ss = 「abc」
function say(){
alert(ss);
}
say();
代码中,脚本被载入内存后,并未为函数say()计算变量的值.该函数捕获 ss 的值以便以后使用,也就是说,解释程序知道在调用该函数时要检查 ss 的值. ?ss 将在函数调用 say() 时被赋值.显示.
之前我也一直存在一个疑问比如:
window.onload = function(){
var oDiv = document.getElementById(「divID」);
var ?btn = doucment.getElementById(「btnID」);
btn.onclick = function(){
oDiv.innerHTML = 「Hello world!」;
}
}
想这样的一个基于DOM的引用算不算闭包的应用,现在我想应该有答案了.
Jquery 日历插件
《JavaScript 高级程序设计》–读书笔记 类型篇
《JavaScript 高级程序设计》是由 Yahoo 的前端开发工程师撰写的一本在 Amazon 上销售得非常火爆的JavaScript书籍,通过第一遍的阅读,让我收益良多,这是我的第三次阅读,并且我把部分内容和代码以及自己的实验代码放在这一系列的文章里.方便自己对知识的巩固,同事也把它分享给大家和大家共同学习.
Function 类
使用 Function 直接创建函数的语法如下:
var function_name = new Function(argument1,argument2...,argumentN,function_body)
每个 argument 都是一个参数,最后一个参数是函数主体(执行的代码)参数必须是字符串.
例如:
function sayHi(sName,sMessage){
alert("Hello "+sName+" ,"+sMessage);
}
sayHi("James","Welcome to JavaScript World!")
还可以如下定义它:
var sayHi = new Function("sName","sMessage","alert('Hello '+sName+','+sMessage);");
sayHi("James","Welcome to JavaScript World!")
虽然可用 Function 狗仔函数的创建函数,请避免使用,因为它定义函数比传统的函数定义方式要慢很多,不过,所有的函数都应该看作 Function 类的实例.
Jquery 插件
jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery 的特长是网页效果，因此，它的插件库也多与 UI 有关。本文是 webdesignledger.com 网站推选的2009年度最佳 jQuery 插件。
一、拉洋片
在一个固定区域，循环显示几段内容，这种方式很像旧时的拉洋片，2009年，这种 Web 效果大行其道，jQuery 有大量与此有关的插件，以下插件无疑是最佳的。
由 CSS-Tricks 的 Chris Coyier 设计，功能齐全，应用十分广泛。
这个 Content Slider 插件既包含传统前后导航模式，又包含页码式导航。
Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。
二、图片库
那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过，借助 jQuery，这种效果已经可以在本地实现，以下是本年度备受欢迎的几个 jQuery 图片库插件。
这是一个基于 jQuery 的图片库，可以逐个加载图片并显示缩略图。
一个可以高度定义的图片库插件，无需对单个图片进行任何处理，这个插件会帮你完成一切。
slideViewer 会检查你的图片列表中的编号，动态创建各个图片的页码浏览导航。
一个令人惊讶的图片循环展示插件，包含各种变换效果和预加载选项，会对图片自动改变尺寸以适应浏览器窗口。
三、导航
我们相信，作为网站的导航系统，应该越简单，越易用越好，然而，假如你确实希望实现一些更炫的效果，jQuery 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。
Horizontal Scroll Menu with jQuery
四、表单和表格
在 Web 设计中，表单和表格都是不是很讨人喜欢的东西，但你不得不面对，本年度出现几个不错的 jQuery 插件帮你完成这些任务。
这个插件帮你评估用户输入的密码是否足够强壮。
顾名思义，一个支持 Ajax 又很炫的 jQuery Captcha 插件，它使用了很人性化的验证机制。
这个插件可以帮助你在表格上实现滚动条。
一个式样插件，帮助你对表单中的控件进行式样控制。
Uploadify
实现多个文件同时上传。
一个很轻量的 jQuery 插件，使你的表格可以扩展，在一些商业应用中，可以让表格更容易组织其中的内容。
CSS Sprites 学习的文章
一，关于CSS Sprite
CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会 像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需 顾忌这个问题。
按照yahoo的rules for high performance web sites的原则，应当较少Client与Server端间 的HTTP Request次数。通过CSS Sprites方法将多张图片组装成单独的一张图片，可以有效减少HTTP请求 的次数。
当整幅图片载入完成后，你就可以使用CSS方法通过设置背景位置的方式完成所需图片的准确调用。
加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。 客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大。
二，CSS Sprite的使用
有几篇关于CSS Sprites的文章，基本上把其原理和机制说明得很清楚。
Creating Rollover Effects with CSS Sprites
Building a Dynamic Banner with CSS Sprites
High Performance Web Sites中关于CSS Sprites的内容3.2. CSS Sprites
三，CSS Sprite的例子
[原文：http://blog.rexsong.com/?p=746#comments]
1. 图片限制(Image Slicing)
典型如文本编辑器，小图标特别多，打开时一张张跑出来，给用户的感觉很不好。如果能用一张图解决，则不会有这个问题，比如百度空间、163博客、 Gmail都是这么做的。
Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites
2. 单图转滚(Single-image Rollovers)
触发切换图片的需求，传统方案得重新请求新图片，因为网络问题经常造成停留或等待。如果能把多种状态合并成一张图，就能完美解决，然后再使用背景图 技术模拟动态效果。
ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/
3. 延长背景(Extend Background Image)
如果图片的某边可以背景平铺无限延长，则不需要每个角、每条边单独搞出来，图片能少一个就少一个。其实，这个理论还可以扩展到四角容器里，好处是能 大大简化HTML Structure。
Extend Background Image
http://demo.rexsong.com/200705/extend_background_image/
综合案例
Google Korea（1和2技巧）
http://demo.rexsong.com/200705/google_korea/
CSS Menus（2和3技巧）
http://demo.rexsong.com/200705/css_background_menus/
四，CSS Sprites的问题
由于IE6存在的background的flicker问题IE6/Win, background image on <a>, cache=‘check every visit’: flicker!，有人针对此问题提出了解决方案Fast Rollovers Without Preload
关于IE6的flicker问题，fivesevensix.com上 有一篇很不错的研究文章Minimize Flickering CSS Background Images in IE6
另外：brunildo.org的CSS tests and experiments是关于 css各种功能不错的参考手册和测试工具。
五，相关资源
What Are CSS Sprites?
http://www.peachpit.com/articles/printerfriendly.aspx?p=447210&rl=1
CSS Sprites: Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites/
CSS Sprites Generator
http://spritegen.website-performance.org/
Fast Rollovers Without Preload
http://wellstyled.com/css-nopreload-rollovers.html
JavaScript Sprite Animation Using jQuery
http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/
http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/
How to create CSS sprites
http://fatagnus.com/how-to-create-css-sprites/
Creating Rollover Effects with CSS Sprites
http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-Rollover-Effects-with-CSS-Sprites/
Building a Dynamic Banner with CSS Sprites
http://www.devarticles.com/c/a/Web-Style-Sheets/Building-a-Dynamic-Banner-with-CSS-Sprites/
CSS Sprites and IE/Win Flicker Issue
http://www.brajeshwar.com/2006/css-sprites-and-iewin-flicker-issue/
css用法测试工具：CSS tests and experiments
拯救MYSQL
今天早上在JAVAEYE看了这篇新闻.作为一个开源的爱好者,在这里我想希望借助浏览我网站人的力量(虽然可能不多)让大家一起来抵制ORACLE公司收购MYSQL数据库的行为
点击图片直接进入申请.
关于Web前端及百度web前端笔试面试题目
此文章来自 ?http://www.webryan.cn/2009/07/about-web-front-rear-and-baidu/#comment-370 ,感谢他们提供了这么好的文章
—————————————————————–
随着各大互联网公司设立了Web前端开发工程师、设计工程师等职位，web前端越来越得到互联网企业的认可。而且其重视程度与地位也随着浏览器端的富客户端的体现而日益提高。 眼前对HTML5的未来和走向，业内的预测是会和Flash、Silverlight等相结合，从而取代传统的客户端应用程序。而实现这个目标的客户端核心工作是有Web前端工程师来完成的。 从另一个角度，对于web产品来说，交互和用户体验是产品的第一价值，这部分价值的体现就是在web前端。可以说web前端是一个web产品的长相和谈吐、行为。
下面就简单的说明一下web前端的组成部分。
1.? UI设计部分
这是web产品化的第一步。这个部分通常在稍大型的公司里，被单独设立为一个部门或者一些人来工作。主要是要掌握Photo, AI,可以很快的将创意转化为平面设计图，并制作PNG等小图片。 同时，UI设计还要预包含用户交互设计的元素，如何和用户交互的基本原型等。
2. HTML/CSS,页面静态化
这是web产品化的2步，就是将UI设计师的设计图切成静态页面。这里的“切”不是单纯的切，而是使用css里面背景色和边框样式等方式对设计原稿进行解读，并形成符合web标准的html代码。这里web前端还需要将图片、html页面以及css样式进行合理的文件分布安排等
3.Javascript, AS 客户端动态化
这是web产品化的3步，工程师使用DOM操作、AJAX，实现数据和服务端的通信以及本地样式的切换。同时，由于Javascript、AS是一门动态语言，所以这部分的编码要求web前端工程师有较好的编码习惯，能写高效率的OOP代码，并对代码进行压缩上线以降低带宽消耗等。
4.Flash、Silverlight、Video???多媒体化
这部分针对不同web产品有不同的要求，通常要求是可以使用Flash和web、Server进行交互，并对Flash进行设计与开发。
5.PHP、Java等CGI, 服务端通信基本知识和编码
这部分主要是更好的使用Ajax等技术，了解服务端的工作方式将更有利于web前端工程师工作的开展。通常优秀的web前端工程师都是对服务端的一种开发语言很了解。
下面是webryan整理的百度web前端笔试和面试的一些题目和过程，提供给大家借鉴。
百度web前端笔试试卷上的题目：
1.判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20
2.截取字符串abcdefg的efg
3.让一个input的背景颜色变成红色
4。给一个页面，写html css
5。div的高宽等于浏览器可见区域的高宽，浏览器滚动，div始终覆盖浏览器的整个可见区域
6。判断一个字符串中出现次数最多的字符，统计这个次数
7。IE与FF脚本兼容性问题
又重新问的是1，4，6，7，这次问出题者的意图，并且让给出7的更多答案，以及IE FF不兼容的原因
然后看了看简历，没有问简历上的项目，而是让自己随便谈谈
1对于web客户端技术未来趋势发展谈谈看法
javascript + ajax=RIA
Adobe Flash AS 3
Flex
Sliveright
2web开发团队人员应该如何分工协作
布局 CSS 脚本
比如脚本人员长期的积累可能铸造类型YUI这样的产品级脚本库（亮点）
3web开发曾经的团队有没有别人遇到问题，什么问题，向你请教
4如果要实习，什么时候可以
5自己在开发的过程中遇到什么问题，谈谈看法
6web开发脚本开发环境用什么、调试用什么
试过aptana，现在就用editplus
调试肯定用firebug，ie下看页面DOM用IEInspector
7如果有个新技术，现在需要掌握，你会怎么做
新技术的发现我一般是通过RSS工具，比如我用GoogleReader
每天有半个小时左右在看最新的资讯、技术走向
发现新技术，首先有个大概了解，如果有深入的必要
我一般会看他的官网，比如jquery，我会搜索到www.jquery.com，然后看Docs、samples
如果要用到项目中，有困难的问题，我会svn得到最新的这个技术的源码，深入跟踪进去，看实现原理
一般现在涌现的技术都是opensource
提问时间
1百度web开发脚本是否有做类似YUI库的打算
2百度web开发工程师打算招多少人
百度电话二面回忆 web开发部–web开发工程师
首先是自我介绍
然后谈谈做的web项目
然后开始问技术问题
前端开发的优化问题
答:
产品发布时，js的压缩，即函数名替换、整个文件压缩成一行
css开发的时候 注释写清楚，先有个base.css，然后根据不同页面需要再加css，发布的时候将css中的一个定义写成一行，目的是压缩文件大小
最终发布的时候甚至可以将css，js分别压缩成一个文件，甚至css、js通过技巧压缩到一个里边（亮点）
这样的目的是，减少用户访问web产品的http连接数
web前端产品的开发流程
答:首先根据产品的定位、用户群，确定配色，然后纸上设计整体布局，然后png或者psd出效果图，切出需要的小图片，然后手写代码div+css构造出页面，然后根据功能写脚本
参考126邮箱首页，将所有小图片放到一个图片中，通过css的background-position实现页面，还是为了优化，减少http连接数
规避javascript多人开发函数重名问题
答:首先是通过命名规范，比如根据不同的开发人员实现的功能，在函数名加前缀，虽然函数名看起来复杂，发布的时候还是可以替换，从而优化。
还有一种办法是，每个开发人员都把自己的函数封装到类中，然后调用的时候即使函数名相同，但是因为是要类.函数名来调用，所以也减少了重复的可能性。
javascript面向对象中继承实现
答：我是用prototype.js extend.js扩展
然后子类中parent.initialize()…
答的不好
正确答案：
// 1. 构造器
function Animal() {};
function Mammal() {};
function Canine() {};
function Dog() {};
// 2. 原型链表
Mammal.prototype = new Animal();
Canine.prototype = new Mammal();
Dog.prototype = new Canine();
prototype.js实现的基本原理
答：
将功能封装
比如Ajax.Request，还是有判断浏览器的代码；Position这样的实现页面元素位置的计算
prototye太大，如果一个页面功能不需要这样的，自己实现，怎么做
答：首先页面、css、脚本分离之后，脚本中将整个模块功能写成一个类var Do={}
其中初始化函数init:function(){}，然后最后做Do.init()
其中init会对页面上form中需要交互的元素绑定事件，比如$(’input1′).onclick=function(){}
IE、FF下面脚本的区别
答：
1.IE有outerHTML，FF没有
2.页面元素id，IE可以直接取，FF必须document.getElementById()
3.Ajax里边FF是new XMLHttpRequest，而IE是
try new ActiveXObject(’Msxml2.XMLHTTP’) try new ActiveXObject(’Microsoft.XMLHTTP’)
FF下面实现outerHTML
答：.parenet.firstChild .parent.innerHTML
这个没答好
正确答案：原理是，get：取到这个标签的tagname，然后属性循环构造成这个标签的属性
set：把字符串用insertBefore插入到这个元素前面，然后removeChild这个元素
<head>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
if(typeof(HTMLElement)!=”undefined” && !window.opera)
{
HTMLElement.prototype.__defineGetter__(”outerHTML”,function()
{
var a=this.attributes, str=”<”+this.tagName, i=0;
for(;i<a.length;i++)
if(a[i].specified)
str+=” “+a[i].name+’=”‘+a[i].value+’”‘;
if(!this.canHaveChildren)
return str+” />”;
return str+”>”+this.innerHTML+”</”+this.tagName+”>”;
});
HTMLElement.prototype.__defineSetter__(”outerHTML”,function(s)
{
var d = document.createElement(”DIV”); d.innerHTML = s;
for(var i=0; i<d.childNodes.length; i++)
this.parentNode.insertBefore(d.childNodes[i], this);
this.parentNode.removeChild(this);
});
HTMLElement.prototype.__defineGetter__(”canHaveChildren”,function()
{
return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
});
}
//–>
</SCRIPT>
IE、FF下面CSS的解释区别
答：
1.png透明背景，FF下面没有问题，IE需要用滤镜通道
2.z-index在IE、FF下面的解释问题，
IE会认为第一个z-index=0
3.长字符串，word-wrap:break-all可以解决IE，但是FF需要overflow:hidden才行
冯舒娅补充：
1、有些标签在ff中不能用，比如button
2、滤镜
3、鼠标cursor:hand cursor:pointer
4、div的高度自适应
5、对box模型解析不一样
6、ul、ol的padding和margin
IE都能识别*，标准浏览器（如FF）不能识别*；
IE6能识别*，但不能识别 !important；
IE7能识别*，也能识别 !important；
FF不能识别*，但能识别 !important；
例如style=”*width:10px;!important width:20px;”
这样在IE6下宽度为10px,在IE7下宽度时20px
web前端技术的展望
答：javascript ajax；flash AS；Flex；Sliveright
附上网上的百度web开发工程师笔试问题集
1编写一个方法 求一个字符串的字节长度
<script language=”javascript” type=”text/javascript”>
new function(s)
{
if(!arguments.length||!s) return null;
if(”」==s) return 0;
var l=0;
for(var i=0;i<s.length;i++)
{
if(s.charCodeAt(i)>255) l+=2;
else l++;
}
alert(l);
}(”hello你好，我好,大家好！world!”);
</script>
2编写一个方法 去掉一个数组的重复元素
<script language=”javascript” type=”text/javascript”>
Array.prototype.strip=function()
{
if(this.length<2) return [this[0]]||[];
var arr=[];
for(var i=0;i<this.length;i++)
{
arr.push(this.splice(i–,1));
for(var j=0;j<this.length;j++)
{
if(this[j]==arr[arr.length-1])
{
this.splice(j–,1);
}
}
}
return arr;
}
var arr=[「abc」,85,」abc」,85,8,8,1,2,5,4,7,8];
alert(arr.strip());
</script>
3说出3条以上ff和ie的脚本兼容问题
IE 有children，FF没有；IE有parentElement，FF没有；IE有innerText,outerText,outerHTML，FF 没有；FF有HTMLElement,HTMLDivElement,XMLDocument,DocumentFragment,Node, Event,Element等等，IE没有；IE有数据岛，FF没有；IE跟FF创建HttpRequest实例的方法不一样。。等等。。
4用脚本写去除字符串的前后空格
String.prototype.trim? ?=? ?function(mode)
{//前后去空格
if? ? ?(mode==’left’)? ?{
return? ?((this.charAt(0)? ?==? ?” “? ?&&? ?this.length? ?>? ?0)? ??? ?this.slice(1).trim(’left’)? ?:? ?this);
}? ?else
if? ?(mode? ?==? ?’right’)? ?{
return? ?((this.charAt(this.length? ?-? ?1)? ?==? ?” “? ?&&? ?this.length? ?>? ?0)? ??? ?this.slice(0,? ?this.length? ?-? ?1).trim(’right’)? ?:? ?this);
}? ?else? ?{
return? ?this.trim(’left’).trim(’right’);
}
};
5算出字符串中出现次数最多的字符是什么，出现了多少次
<script type=”text/javascript”>
//<![CDATA[var str =」adadfdfseffserfefsefseeffffftsdg」; //命名一个变量放置给出的字符串
var maxLength = 0; //命名一个变量放置字母出现的最高次数并初始化为0
var result = 」; //命名一个变量放置结果输入
while( str != 」 ){ //循环迭代开始，并判断字符串是否为空
oldStr = str; //将原始的字符串变量赋值给新变量
getStr = str.substr(0,1); //用字符串的substr的方法得到第一个字符（首字母）
eval(「str = str.replace(/」+getStr+」/g,」)」); //详细如补充
if( oldStr.length-str.length > maxLength )
{ //判断原始的字符串的长度减去替代后字符串长度是否大于之前出现的最大的字符串长度
maxLength = oldStr.length-str.length; //两字符串长度相减得到最大的字符串长度
result = getStr + 「=」 + maxLength //返回最大的字符串结果（字母、出现次数）
}
}
alert(result) //弹出结果
//]]>
</script>
6写出3中使用this的典型应用
在HTML元素事件属性中inline方式使用this关键字：
7.最后一个问题是，如何制作一个combo选项，就是可以输入可以下拉菜单选择。
这个网上有很多成品，主要是通过绝对定位和相对定位结合的方式，改造原有的select 标签和input标签的方法。
附上javascript正则表达式的基本知识：
g: 全局匹配
i: 忽略大小写
^ 匹配一个输入或一行的开头，/^a/匹配”an A”，而不匹配”An a”
$ 匹配一个输入或一行的结尾，/a$/匹配”An a”，而不匹配”an A”
* 匹配前面元字符0次或多次，/ba*/将匹配b,ba,baa,baaa
+ 匹配前面元字符1次或多次，/ba*/将匹配ba,baa,baaa
? 匹配前面元字符0次或1次，/ba*/将匹配b,ba
(x) 匹配x保存x在名为$1…$9的变量中
x|y 匹配x或y
{n} 精确匹配n次
{n,} 匹配n次以上
{n,m} 匹配n-m次
[xyz] 字符集(character set)，匹配这个集合中的任一一个字符(或元字符)
[^xyz] 不匹配这个集合中的任何一个字符
[b] 匹配一个退格符
b 匹配一个单词的边界
B 匹配一个单词的非边界
cX 这儿，X是一个控制符，/cM/匹配Ctrl-M
d 匹配一个字数字符，/d/ = /[0-9]/
D 匹配一个非字数字符，/D/ = /[^0-9]/
n 匹配一个换行符
r 匹配一个回车符
s 匹配一个空白字符，包括n,r,f,t,v等
S 匹配一个非空白字符，等于/[^nfrtv]/
t 匹配一个制表符
v 匹配一个重直制表符
w 匹配一个可以组成单词的字符(alphanumeric，这是我的意译，含数字)，包括下划线，如[w]匹配”$5.98″中的5，等于[a-zA-Z0-9]
W 匹配一个不可以组成单词的字符，如[W]匹配”$5.98″中的$，等于[^a-zA-Z0-9
举例：验证email
var myReg = /^[_a-z0-9]+@([_a-z0-9]+.)+[a-z0-9]{2,3}$/;
if(myReg.test(strEmail)) return true;
IE8 hack
原文地址:http://www.css88.com/archives/1681,次文章转载自愚人码头.感谢他们写出了这么好的文章.希望更多的WEB前端开发人员能够借鉴.
———————————————————————————————————————
由 愚人码头 撰写 http://www.css88.com/archives/1681
首先感谢“丸子”提供的这个IE8的css hack；
关注过IE8的css hack的人相信大家都在使用这个hack，就是“\9”的css hack：
.test{
color:#000000;????????????????? /* FF,OP支持 */
color:#0000FF\9;?????? /* 所有IE浏览器(ie6+)支持 ；但是IE8不能识别“*”和“_”的css hack；所以我们可以这样写hack */
[color:#000000;color:#00FF00;????? /* SF,CH支持 */
*color:#FFFF00;???????????????? /* IE7支持 */
_color:#FF0000;?????????????? /* IE6支持 */
}
包括我自己也是使用这种的，这是我前段时间整理的《主流浏览器的一些CSS hack》。(转载请注明出处：WEB前端开发 http://www.css88.com/)
很多人再研究color:#0000FF\9;中的为什么IE6-IE8支持“\9”写法，和它的原理，我只是个工程师，不是科学家，我不懂为什么和它的真正原理，真的！很惭愧！
昨天在某个群里也看到部分前端工程师或网页重构师势利的一面，同样的一个解决方案，大公司有名的前端工程师或网页重构师写的东西都追捧，而小公司没名气的前端工程师或网页重构师写的解决方案却被反问：“css有这种写法吗？看来你连最基本的css的几个属性和属性值都没搞懂；就算你解决了问题你写的css也是不规范的，就是规范你跟我讲讲你解决方案的原理；”同样的一个解决方案，大公司有名的前端工程师或网页重构师写的这些反问质疑就全都没了，拼命的去研究他这个解决方案，呵呵，我觉得那些人很可笑。还有很多人问问题只有得到大公司有名的前端工程师或网页重构师的肯定回答后才放心而又开心的走了，甚至不留一句谢谢。当然没人（包括我）否认大公司有名的前端工程师或网页重构师在业界的影响力，他们为前端和重构业界做的贡献大家都是看得到的，只是觉得做人（特别是我们做技术的）不能太势利，多一点技术共享和探讨，多一点感激，学习成长才是最重要的。我承认我以前经常骂人，骂人家SB，内参国王说的对，骂人家SB就等于骂自己SB，我以前是很SB。不想探讨就看着呗，骂人是不对的！(转载请注明出处：WEB前端开发 http://www.css88.com/)
扯远了，回到IE8的CSS hack，讲讲color:#0000FF\9：
color:#0000FF\9的hack支持IE6-IE8（其他版本没有测试），但是IE8不能识别“*”和“_”的css hack，所以我们可以使用
color:#0000FF\9; ;/*ie6,ie7,ie8*/
*color:#FFFF00;/*ie7*/
_color:#FF0000;/*ie6*/
来区分IE的各个版本。
至于为什么使用“\9”我真的不清楚原因，但是“丸子”测试了其他0-13的数字，最终结果如下：
其中：OP表示Opera，SA表示Safari，Ch表示Chrome；当然你如果还有耐心可以测试“\14”，“\15”，“\16”。。。
从上面测试结果我们可以看出“\0”的写法只被IE8识别，ie6，ie7都不能识别，那么“\0”应该是IE8的真正hack。主流浏览器的CSS hack这样更好一些：
(转载请注明出处：WEB前端开发 http://www.css88.com/)
.test{
color:#000000;????????????????? /* FF,OP支持 */
color:#0000FF\0;?????? /* IE8支持*/
[color:#000000;color:#00FF00;????? /* SF,CH支持 */
*color:#FFFF00;???????????????? /* IE7支持 */
_color:#FF0000;????????????? /* IE6支持 */
}
其中：OP表示Opera，SA表示Safari，Ch表示Chrome；
这篇日志由 愚人码头, 发表在 2009年07月18日 于 12:47 下午, 文件归档于 (x)html+css 标签为 and tagged css hack, IE8. 添加永久链接到书签中. 获得所有评论更新使用这里的 日志RSS源. 发表评论 或者复制引用通告地址: 引用通告 URL.
From – http://www.css88.com/archives/1681
我是如何规划CSS的
突然有想法写这样一篇文章,是对工作的总结,写了CSS有一段时间了,可是我发现,我无法非常标准的规划自己的CSS结构.通常我的做法是建立一个最大的CSS.也就是global.css,然后建立一个link.css,font.css,reset.css,然后就是一些快速填充,用于快速修改的样式表文件…
基本如下
1.Global.css 文件中引入link.css,font.css,reset.css
2.Global.css 中一般写通用的样式,比如图片多大,按钮多长,背景色和背景等.
3.link.css中一般写 A 链接的样式,比如 <a href=」http://www.xxx.com」 ….. 那么相应的就有一个类似与 a[href^=」http:」] {background: url(../images/elementsImages/externalLink.gif) no-repeat right top; padding-right:10px;} 这样的样式文件,给a链接的右上角加入一个代表链接到外部的小图片用于标识 ( IE6不支持 ) 为什么不支持自己去翻 DOM LEVEL 规范.还有mailto:等这些常用的小样式文件(欧美的网站很多引用了这样的效果,国内貌似少).
4.reset.css 这个就不用多说了把,在IE,FF等浏览器下的还原样式文件,多数是对浮动和填充不一致的清理.(盒模型本质上还是有区别的)
5.引用了基础的样式之后就会写一些通用样式的的CSS比如用户管理,有资料管理,短消息管理等等属于用户管理文件夹下的所有页面,我会对其建立一个 umanagerbase.css 这里写一些可能会通用的用户管理目录下的公共css,然后针对每个页面写一个单独的css.
这样做的好处,就是能够让css重用,可是在日常开发中我也发现了很多弊端.
比如:
global.css 引入的文件还是不错.可是如果碰到有 javascript 动态操控 link .href 属性的话,经常会歇菜!!!! ( JavaScript 动态改变属性的话,执行效果相当于重新渲染了一次页面且把所有的css放在 </body>之后执行.
一个页面需要2-3个样式的导入,且如果有大量应用不是特别广泛的css的话,还是会有很多css代码没用而让浏览器白白的解析了……..
样式冲突的危险,这个是在项目中经常看见的,可是暂时也没有好的解决办法.只能在私有的css中重写冲突的css,可以避免冲突.
不过这样做带来的好处就是能够非常快速的完成页面的渲染和重构.至少目前是…代码拿过来马上能使用.(可能是我自己写的HTML和CSS完全配套了把,^_^)
但是这样做我总觉得不太好,希望还有更好的解决方案,先把文章写这里,过一段时间的尝试之后如果有更好的解决方案的话,再重新总结一下.