从苹果的appstore谈谈web前端那丝毫的追求
献上链接:点击进入itunes
打开页面,我们先找到App 的logo图
比如这个图
很简单的一个图标,估计多数人选择的是上传一张处理好圆角,border的图片作为app logo,但问题是苹果觉得,你们每个人都自己去上传logo,那统一性何在!
打开源代码,我们看到源代码里有个mask标签,很纳闷:
然后看mask标签的css里面有图片,mask是绝对定位到一个整体的logo图上的,遮住了正方形的logo从而形成了一种圆角的东西。
苹果这样做,难道只是为了兼容ie低版本,兼容不支持圆角的浏览器?乍一看是这样的,但是这是苹果啊,苹果怎么会做那种东西;
我们接着往下看:
#main #content div.lockup.application div.artwork>span.mask, .software #main #content div.lockup div.artwork>span.mask {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 177px;
height: 177px;
background: url(web-storefront/images/mask175.png) 0 0 no-repeat;
background-size: 175px 175px;
}
大家看到红色这一句,这是css3属性的东西,这东西ie低版本是不能兼容,这就引出了一个矛盾:
如果苹果是为了兼容而不用css3写圆角,那么为何又用css3的background-size这属性?
这是一个奇怪的矛盾,那我们就不管,继续找原因。
我们用css3模拟一个出来,对比一下到底问题出现在哪?
如图:
细心的同学会发现,无论我们怎么调试,也达不到原图的效果,这是为什么呢?
我们把原图截图下来,放到photoshop里面放大了看看,效果如下
答案一目了然了,mask的背景图,除了白色的四角,里面还有一个内边框,而这个内边框是半透明的,当遮罩遮住图片后,半透明的地方会让图片有透出的效果,这点css3是不能做到的。
谜底揭晓,瞬间轻松了许多。
苹果不愧是个为了追求完美而在任何一个细节上都去注意的公司
作为web开发者,我们也该本着一种追求极致的心态去完善自己的作品。
本文为原创,转载请注明。