![[PukiWiki]](image/tux_100x119.jpg "[PukiWiki]")
#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]]
