- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2022-08-27T00:23:54+09:00","","")
#author("2023-01-19T18:11:29+09:00","","")
#topicpath();
//////////////////////////////////////////////////////////////////////////////
* 目次 [#xa78718d]
#contents();
//////////////////////////////////////////////////////////////////////////////
* ブラウザの CSS キャッシュを無効にする [#s05aad00]
//============================================================================
** 問題点 [#u66780c4]
- CSS を変更し、ブラウザからリロードしても、変更が反映されない。
//============================================================================
** 解決策 [#j4c63e6f]
- 案1:Javascript を使い、CSS ファイルに付加する文字列にタイムスタンプを付ける
-- 例:
<!-- 変更前 -->
<link rel="stylesheet" href="css-file.css" type="text/css">
<!-- 変更後 -->
<script>
var ts = (new Date()).getTime();
document.write('<link rel="stylesheet" href="./css-file.css?t=' + ts + '" type="text/css">');
</script>
-- 短所:Javascript が必要。CSS に重い処理をさせている場合は、表示に時間がかかる可能性がある。
-- 長所:読み込んだときのタイムスタンプが CSS ファイル名の引数に付くため、読み込む側のブラウザは「前回読み込んだときとは違う」と認識することになり、常にキャッシュが無効になる。
- 案2:ブラウザの設定でキャッシュの削除を行う。
-- 短所:自分以外の閲覧者には個別に依頼せねばならず、現実的でない。
- 案3:HTML ソース側の CSS を指定する箇所で、CSS ファイル名/URI に付加的な文字列を埋め込む。
-- 例:
<!-- 変更前 -->
<link rel="stylesheet" href="css-file.css" type="text/css">
<!-- 変更後 -->
<link rel="stylesheet" href="css-file.css?version1.0.1" type="text/css">
-- 短所:CSS 変更の度に全ての HTML を修正(上記例でいうと "?version1.0.1" の部分)する必要がある為、HTML ファイルが多数ある場合、修正が大変になる。
//////////////////////////////////////////////////////////////////////////////
* system.css - Macintosh System6 を模したデザインを実現する [#system_css]
- [[System.css>https://sakofchit.github.io/system.css/]]
-- system.css を適用する際の HTML の記述のチュートリアルも用意されている。
- [[system.css (GitHub)>https://github.com/sakofchit/system.css#readme]]
//////////////////////////////////////////////////////////////////////////////
* 98.css - Windows98 を模したデザインを実現する [#w98_css]
- [[98.css>https://jdan.github.io/98.css/#intro]]
- [[98.css (GitHub)>https://github.com/jdan/98.css/blob/main/README.md]]