css hack 是个很有争议的东西,一开始我也很讨厌,因为我觉得可以饶过 css hack,通过另外的方法解决问题。但是,随着工作中的不断实践,改变了我的观点,css hack 虽然不能通过 w3c 标准认证,但适当是使用很有可能会使你的 HTML 结构更紧凑、有效的减少无语义标签或带来其他好处。
在公司,电脑里的浏览器是 ie6,除了开发部和技术部外,其他部门的同事很少装其他浏览器(不过有小部分可能会升级到 ie7/ie8)。而开发部和技术虽然会装 ff,但装好之后一般不会升级,因为他们不一定是前端开发人员,他们装 ff 的目的也只是看看自己做的东西在 ff 下是否正常,所以这就导致了公司里有各个版本的 ie 和 ff 都有。其实这不是最严重的,因为我做的东西除了在 op 下可能会有些差异外,在上面所有浏览器和 sa 、ch 下都表现的很好。最严重的是之前的有些东西他们做的时候可能只考虑到 ie6,所以如果要修复的话,会把我给郁闷坏,因为我不仅要针对浏览器修复,还有可能要针对浏览器版本修复。如果是你的话,你会头疼吗?所以我收集了一些我认为是比较简单方便的 css hack,一来是自己在工作可能需要,二来算是分享吧。这些 css hack 注意顺序一起使用,能区分不同的浏览器和版本。当然,如果你没必要考虑这么复杂的情况,就挑选需要的用咯。通过实例来体现吧。
html 代码
<body> <p>您的浏览器是</p> </body>
css hack 代码
p { margin:0; padding:0 55px 0 0; height:30xp; line-height:30px; font-size:14px;}
p { background:url(llq.gif) 90px -170px no-repeat;} /* all */
p,x:-moz-any-link { background:url(llq.gif) 90px -80px no-repeat;} /* for ff */
p,x:-moz-any-link,x:default { background:url(llq.gif) 90px -140px no-repeat;} /* for ff2+ */
p {[;background:url(llq.gif) 90px -260px no-repeat;]} /* for sa/ch */
p { background:url(llq.gif) 90px -50px no-repeat\9;} /* for ie */
*+html p { background:url(llq.gif) 90px -20px no-repeat;} /* only for ie7 */
p { _background:url(llq.gif) 90px 10px no-repeat;} /* only for ie6 */
因为没有找到 op10 的 css hack,所以标准的写法是给 op10 的,然后针对其他浏览器写 css hack。
另外,在修复过程中,我发现了网上流传的一个 css hack 有问题,这个 css hack 也许有很多人在用,就是[属性:值\0],有的人说这是 ie8 专用的,但我在测试过程中发现这个 css hack 除了 ie8 识别外,ff3 和 op10 也能识别(ff2 和 ff3.5 不能识别)。你可以使用对应的浏览器(如果你有的话)点击这个例子查看。
所以有些 css hack 还是尽量在多个浏览器里测试测试,以免误导别人。
注:op 代表 opera,sa 代码 safari,ch 代表 chrome。
修改:自动播放的 jQuery 幻灯片
日期:2009-10-11 | 分类:javascript/jQuery
一位读者在《自动播放的jQuery幻灯片》中反映了一个问题,就是鼠标在缩略图上快速反复移动的时候,会出大图和缩略图不一致、鼠标输出缩略图幻灯片仍在快速切换和 CPU 占用飙涨等问题。因为幻灯片切换的时候有一个动画过程,鼠标每经过一张缩略图都会执行这个动画过程,如果上一个动画过程还没执行完鼠标就移到另一张缩略图上,那这张幻灯片的切换动画会等到上一个动画执行完成才会执行。如果鼠标在这些缩略图上来回移动,那将会“累积”很多动画,它们会一个接一个的执行,所以引发上上面那些问题。
要修复上面的问题,加上一条判断语句即可:如果有动画正在执行,鼠标移到缩略图上就不执行动画函数。具体代码如下(和原来的相比就多了一句判断):
var theInt = null;
var curclicked = 0;
$(function(){
$('#transparence').css('opacity','0.4');
$('#pic_list img').css({'opacity':'0.6'});
$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
$('#pic_list a').click(function(){return false});
t(0);
$('#pic_list img').mouseover(function(){
if($('#this_pic').attr('src') == $(this).attr('src')) return;
if(!$(this).is(':animated')){
t($('#pic_list img').index($(this)));
}
})
})
t = function(i){
clearInterval(theInt);
if( typeof i != 'undefined' )
curclicked = i;
$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
theInt = setInterval(function (){
i++;
if (i > $('#pic_list img').length - 1) {i = 0};
$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
},3000)
}
用 js 模拟 css 属性选择器
日期:2009-09-21 | 分类:CSS
CSS 的属性选择器是很有用的,它能有效的减少类的使用,但众所周知,IE6 是不支持 CSS 属性选择器的,为了兼容 IE6 ,一般的做法还是给需要的元素额外加类。如果是静态页面,那还好处理,直接在需要的元素上加上类,但如果是动态内容或其他因素影响,不能确定要在哪个元素上加类,那就比较棘手了。这个时候用 js 来处理应该是比较好的,方法也许您也想到了,就是:获取元素属性的值,然后判断值是否包含指定的字符串,如果包含就加上类。
做一个列子吧,就拿最近做的一个东西来做吧,是一个列表,如果这个列表中的某个连接是直接打开 pdf 文件,就给这个链接后面加上 pdf 的小图标,以示提醒作用。看代码吧,XHTML 和 CSS 代码就省略了,看主要的 JS 代码:
window.onload = function(){
var list = document.getElementById('list');
var listA = list.getElementsByTagName('a');
for(var i = 0; i < listA.length; i++){
var href = listA[i].href;
if(href.indexOf('pdf') != -1){
listA[i].className = 'haspdf';
}
}
}
因为这段代码主要针对 IE6 及以下版本,所以可以加上 IE 条件注释。
CSS Expressions 有多可怕
日期:2009-09-8 | 分类:CSS
CSS Expressions 俗称 CSS 表达式,避免使用 CSS Expressions 是前端开发的一个重要指南,为什么要避免使用 CSS Expressions 呢?我们看看雅虎YUI的说明:
表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
从上面可以看出 CSS Expressions 是如此的可怕。但也许单纯的文字说明还不能使你深入的明白 CSS Expressions 的可怕,那就引用子鼠的例子来实际说明吧:
XHTML 和 JS 代码:
<body>
计算了<input id="c" />次
<script type="text/javascript">
var k = 0;
function test() {
k++;
document.getElementById('c').value = k;
return;
}
</script>
<div>
<ul>
<li><a href="11111111111111111111">22222</a></li>
<li><a href="11111111111111111111">22222</a></li>
<li><a href="11111111111111111111">22222</a></li>
<li><a href="11111111111111111111">22222</a></li>
</ul>
</div>
</body>
JS 代码是用来计算 CSS Expressions 的计算次数。
CSS Expressions 表达式代码:
body {
font-size:12px;
font-family:Verdana;
line-height:1.9
}
div a {
display:block;
border:1px solid #FF3366;
width:expression(this.offsetWidth > 750 ? test() : test());
}
查看Dome (用 IE6/IE7 查看)
从上面的例子就可以明显的看到 CSS Expressions 的计算的如此的频繁,由此可见它的可怕。
子鼠还提供了一个稍好一点的写法:
body {
font-size:12px;
font-family:Verdana;
line-height:1.9
}
div a {
display:block; border:1px solid #FF3366;
width:expression(function(abc){
abc.style.width = "750px";
test();
}(this));
}
查看Dome (用 IE6/IE7 查看)
另外 CSS Expressions 的兼容性很差,所以 CSS Expressions 能不用就不用。
自动播放的 jQuery 幻灯片
日期:2009-09-3 | 分类:javascript/jQuery
读者“辣椒”在《jQuery写的一个幻灯片》中留言说幻灯片没有自动播放效果,其实写好之后不久就觉得少了点什么,看来看去,最后发现就是缺少自动播放效果,想找个时间把自动播放的效果加上,但似乎总是没有时间。今天就乘读者“辣椒”提出了这个问题,就抽时间写一下吧。
结构和样式都没有变,只有 jQuery 代码有变,具体的代码如下:
var theInt = null;
var curclicked = 0;
$(function(){
$('#transparence').css('opacity','0.4');
$('#pic_list img').css({'opacity':'0.6'});
$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
$('#pic_list a').click(function(){return false});
t(0);
$('#pic_list img').mouseover(function(){
if($('#this_pic').attr('src') == $(this).attr('src')) return;
t($('#pic_list img').index($(this)));
});
});
t = function(i){
clearInterval(theInt);
if( typeof i != 'undefined' )
curclicked = i;
$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
theInt = setInterval(function (){
i++;
if (i > $('#pic_list img').length - 1) {i = 0};
$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
},3000)
}