Lang/html/css

目次†

ブラウザの CSS キャッシュを無効にする†

問題点†

• CSS を変更し、ブラウザからリロードしても、変更が反映されない。

解決策†

• 案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 を適用する際の HTML の記述のチュートリアルも用意されている。
• system.css (GitHub)

98.css - Windows98 を模したデザインを実現する†

• 98.css
• 98.css (GitHub)

Menu

• System
• Security
• Device
• Debian
• Ubuntu
• Plan9
• CentOS
• Net
• X
• App
• transcription
• Prog
• Lang
• TeX
• Editor
  • emacs
• Multimedia
• tools
• VersionCtl
• linux:archive

Menu2

• Mac
• Windows
• 食
• 旅
• otherlinks
• SandBox

  最新の20件

  2024-05-08

  • Editor/emacs

  2024-05-06

  • 旅/茨城

  2024-05-02

  • 食
  • 旅
  • 旅/東京
  • Lang/Python/pip

  2024-04-21

  • Lang/shell/bash

  2024-04-14

  • VersionCtl/git
  • VersionCtl/git/Subversion からの移行
  • VersionCtl/git/subversion とのコマンド対比

  2024-03-31

  • Security/ssh

  2024-03-17

  • Net/dig

  2024-03-15

  • Lang/Python/開発環境

  2024-03-02

  • Net/pukiwiki

  2024-02-25

  • 食/料理

  2024-02-23

  • transcription
  • App/Browser

  2024-02-11

  • App/screen

  2024-02-10

  • Lang/shell/bash/設定

  2024-01-22

  • VersionCtl/git/tig

edit