從蘋果的appstore談談web前端那絲毫的追求

標籤：c   style   class   blog   code   a   

獻上連結：點擊進入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開發人員，我們也該本著一種追求極致的心態去完善自己的作品。

本文為原創，轉載請註明。