Welcome, Old Sport!

CSS制作的跨浏览器图标支持表

by ilikecss ON 2013/05/16 11546

跨浏览器图标支持表今天正在做一个新的动画效果(下周发布),完工后测试浏览器,低级别的IE不支持,依照惯例我会在文章中提及浏览器的支持范围,突然脑子里闪过一个念头,何不把浏览器支持情况做成HTML后插入到demo中呢,以后调用起来也方便多了。说干就干,我想使用到一些png的浏览器图标,做成图片形式比文字说明更形象了,对用户体验好感度也会上升,最后把图标做成了sprite,减少一点浏览器请求。对于CSS初学者来说这款效果还是很容易掌握和看懂的,一起来看下步骤和要点。

Step1. HTML代码

<ul>
    <li class="sprite non"></li>
    <li class="sprite"></li>
    <li class="sprite"></li>
    <li class="sprite"></li>
    <li class="sprite"></li>
    <li class="sprite"></li>
    <li class="sprite"></li>
    <li class="sprite"></li>
</ul>

Step2. CSS样式

ul {
	margin-bottom: 10px;
	overflow: hidden;
}
ul li {
	float: left;
	padding-right: 12px;
}
	ul li:last-child {
		padding: 0;
	}
.sprite {
	background: url("../img/browser_list.png") no-repeat -12px -12px;
	width: 25px;
	height: 26px;
}
	li.sprite:nth-child(2){
		background: url("../img/browser_list.png") no-repeat -58px -12px;
		width: 25px;
		height: 26px;
	}
	li.sprite:nth-child(3) {
		background: url("../img/browser_list.png") no-repeat -101px -12px;
		width: 25px;
		height: 26px;
	}
	li.sprite:nth-child(4) {
		background: url("../img/browser_list.png") no-repeat -12px -49px;
		width: 25px;
		height: 26px;
	}
	li.sprite:nth-child(5) {
		background: url("../img/browser_list.png") no-repeat -58px -48px;
		width: 25px;
		height: 26px;
	}
	li.sprite:nth-child(6) {
		background: url("../img/browser_list.png") no-repeat -102px -47px;
		width: 25px;
		height: 26px;
	}
	li.sprite:nth-child(7) {
		background: url("../img/browser_list.png") no-repeat -8px -84px;
		width: 29px;
		height: 26px;
	}
	li.sprite:nth-child(8) {
		background: url("../img/browser_list.png") no-repeat -60px -83px;
		width: 24px;
		height: 26px;
	}
.non {
	opacity: 0.2;
}

使用说明:

这里我用了伪类,如果需要低级别浏览器支持大家可以把伪类修改成数字排序的class,不支持的浏览器在li标签里添加.non样式即可。

9条评论
  1. #1

    airoschou说道:

    自己抢个沙发先! :smile:

  2. #2

    yxiao说道:

    看见css就头大。玩不转。

  3. #3

    阿邙说道:

    我是菜鸟,我路过。 哈

  4. #4

    macrochen说道:

    :neutral: 想法不错..支持..加油

  5. #5

    追着紫色的梦说道:

    对伪类还不是很了解的飘过。。。




TOP