Foresight.js：一個靈活支持高清晰圖片的包

以前我們用很多的時間，來解決網絡問題，到頭來還是很丑。

圖像的復雜問題沒有很好的解決方案。一個站點，以正確的屏幕和高清晰度圖像展示給高分辨率和低分辨率的設備。這當然沒那么簡單，帶寬，屏幕大小，方向等因素都很復雜。

現在最好的解決方案是以低分辨率的圖像傳到每個設備。雖然圖片在高分辨率屏幕顯示器里面看起來會很丑，但起碼會節約大家的時間成本。雖然這是目前最好的解決方案，但開發商們再不斷推出新的標準，來服務這看似簡單的事情。

目前我們看到最聰明的做法是亞當布拉德利（Adam Bradley）的Foresight.js，foresight.js使得在特定設備上展示高清晰圖片變得簡單，像新iPad。但它不單單做這些，它不 但檢查高分辨率屏幕，還檢查當前設備是否有較快的網絡來形成高清晰的圖像。只有這2個條件（高分辨率屏幕和較快網絡）兼備的情況下，才會形成高清晰的圖 像。

Foresight.js讓人著迷的部分原因是使用了image-set()函數。用法：

myselector {
background: image-set(url(foo-lowres.png) 1x, url(foo-highres.png) 2x) center;
}

Foresight.js使用了非常靈活的機制來適應不同的瀏覽器：font-family屬性。也看起來很瘋狂，但仍然是合理的CSS因為
font-family允許任意字符串（來處理字體名字），這意味著瀏覽器可以這樣：

myselector {
font-family: ‘ image-set( url(/images/foo.png), url(/images/foo_2x.png) 2x high-bandwidth ) ‘;
}

這猶如一種黑客行為，但這是我們所喜歡看到的：聰明和實用。因為瀏覽器成功解析font-family規則，value值會添加到DOM，javascript可以通過它，這正是foresight.js所做的。
本文轉載自: http://www.daidata.com/archives/1046