如何在測試時避免CSS被瀏覽器快取擋住

前言

如上篇文章-Edge 開 IE mode後怎麼開啟F12(開發人員工具) 所述,最近為了IE搞的頭很痛

CSS 有些語法也在IE 不支援,故要一直測試

但不管是不是無痕,有時候CSS還是會被 Cache 擋住導致看不到改的效果

Cache 快取

簡單來說,就是瀏覽器會儲存一些讀過的資料在本機硬碟中,以便下次來的時候可以迅速找到

好處是可以降低再來來訪的讀取時間,像是一些JS跟CSS檔都有了就不需要再去下載

那缺點當然就是這次講的,要是同名的檔案修改,其實瀏覽器是不知道的,不知道要等到什麼時候才會重新取得資料…

解決方式

這時,講完發生原因了,來談談如何解決吧

第一個方法清除瀏覽器紀錄

可以看到清除紀錄這邊底下的選項就有【快取影像及檔案】 (以Edge為例)

可以是可以做到效果,但如果要一直異動就很麻煩…

第二個方法 – url加上號碼(版號、亂數…等)

<link href="style.css?v=1.0" rel="stylesheet" />

透過在url後面加入版本號或是一個隨機參數,會讓cache認為自己沒有這個檔案

於是就會跟瀏覽器要求並下載,就成功達成我們的目的了

當然還是有一些限制,像是要手動改動號碼(下次異動時)

為了解決這個缺點,其實也可以融入JS來達成隨機產生參數,但這個就讓我晚點補充吧,一陣子沒使用了哈哈


結論

現在改CSS,總算不用一直用無痕跟重新執行來確認了!!

這裡看更多 Cache的資訊 – 什麼是 Cache? | iThome (超級久之前的文章,但寫的相當清楚呢)

其他筆記們

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *