如何防止瀏覽器和伺服器快取 CSS 檔案？

防止瀏覽器和伺服器快取CSS 檔案

開發網站時，進行CSS 更改但不能立即反映出來通常會令人沮喪在瀏覽器中。這可能是由於瀏覽器和伺服器都進行了快取所致。

Apache 快取 CSS 檔案嗎？

是的，Apache 預設會快取資源。若要檢查您的Apache 伺服器是否正在快取CSS 文件，您可以透過將以下行新增至.htaccess 檔案來啟用偵錯：

LogFormat "%r %s %b %H" debuglog
CustomLog "| tail -f /dev/stderr -" debuglog

重新載入頁面並檢查偵錯日誌中是否存在以下行：

GET /css/main.css 200 7122 0

最後一個數字「0」表示該檔案是從快取提供的。

防止快取

有多種方法可以防止快取CSS 檔案：

1.將查詢字串附加到檔案名稱

您可以將隨機查詢字串附加到CSS 檔案名稱的末尾，強制瀏覽器下載檔案而不是使用快取版本。例如：

<link rel="stylesheet" type="text/css" href="style.css?v=2" />

2。使用 Cache-Control 標頭

您可以向 HTTP 回應新增「Cache-Control」標頭，指定瀏覽器應快取檔案的時間。例如：

header("Cache-Control: no-cache, no-store, must-revalidate");
header("Pragma: no-cache");

3。在 Apache 中使用 mod_headers

對於 Apache 伺服器，您可以使用 mod_headers 模組來防止快取。將以下行加入您的 .htaccess 檔案：

Header set Cache-Control "max-age=0, s-maxage=0, must-revalidate"

4。使用版本號碼呼叫 CSS

許多網站使用的常見方法是使用版本號碼來呼叫 CSS。當您更新 CSS 時，會增加版本號，強制瀏覽器載入新檔案。例如：

<link rel="stylesheet" type="text/css" href="style.css?v=1" />

更新 CSS 時，將「v=1」改為「v=2」。

透過實作這些方法中的一個或多個，您可以確保您的 CSS 變更會立即反映在瀏覽器中，甚至在生產伺服器上。

以上是如何防止瀏覽器和伺服器快取 CSS 檔案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！