FrontPage


IEでサイト・ドメイン別ユーザースタイルシートの適用を可能にする。
最初の目的は、HTMLヘルプ(.chmファイル)のフォントサイズが、IEの表示フォントに連動して変化するのを抑止すること。
副効果としてサイト別のユーザースクリプトも可能になっている。
(update 2011-11-17, 2011-11-18)
/*
* Using domain specific "user style sheet" in Internet Explorer.
* This is the way of set font-size to user's choice and enable 
* [Ctrl] + [MouseWheel] zooming in compiled html help file(.chm).
* Still more effect, this enables tiny user scripts in Internet 
* Explorer(but not compatible Grease Monkey).
*
*/
HTML {
  behavior:expression( (function(el){
    var cssfile;
    var func;
    var _doc = el.document;

    /* .htc file Has HTML element, but not has document.location property */
    if(_href.slice(-4) != '.htc'){
      el.runtimeStyle.behavior = 'none';
      return;
    }

    var _protocol = _doc.location.protocol.toLowerCase();
    var _href = _doc.location.href.toLowerCase();

    var myFolder = 'file://C:/Documents and Settings/username/My Documents/css/';

    switch (_protocol){

      /* CSS Set for Compiled HTML Help */
      case 'mk:':
      case 'ms-its:':
      case 'ms-help:':
        cssfile = 'chm.css';
        break;

      /* CSS set for Web */
      case 'http:':
        var _domain = _doc.domain.toLowerCase();
        switch(true){
          case /.*.example.com$/.test(_domain):
          case /.*.example.net$/.test(_domain):
            cssfile = 'example.css';
            break; 

          case /.*.example.org$/.test(_domain):
            func=function(){
              var _doc = document;
              /* write user scripts */
            };
            break;

          default:
            break;
        }
    }

    if(cssfile){
      var elmLink = _doc.createElement('link');
      elmLink.rel='stylesheet';
      elmLink.type='text/css';
      elmLink.href= myFolder + cssfile;
      _doc.getElementsByTagName('head')[0].appendChild(elmLink);
    }

    if(func){
      _doc.onreadystatechange = function(){
        if(_doc.readyState == 'complete')func();
      }
    }

    /* stop the CSS expression from being endlessly evaluated */
    el.runtimeStyle.behavior = 'none';

  })(this));
}

javascript の case 文にはワイルドカードor正規表現が使えないのでswitch(true)というワザで case 文に正規表現が使える。サブドメインは正規表現で吸収する。複数ドメインに同じ設定をする場合は、case文を続けて書く。ただし、正規表現の \ エスケープが使えない。\ は 先に css でのエスケープ文字として評価される。css では \\ として \ を表現することはできない。
ユーザースタイルシートを https サイトに適用したい場合は、myFolder がイントラネットゾーンまたはインターネットゾーンとして評価されるようにする。フォルダ共有とuncパスでなんとかなるはず。IEのセキュリティ設定の「混在したコンテンツを表示する」も動作に影響がある。
behavior:url(xx)で読み込まれる .htc ファイルにまで css が適用される。読み込まれた .htc には document.location プロパティが存在しないので、先に例外処理をする。try catch(e) 構文が使えないのだが、何か方法があるのだろうか。


最終更新 2012/01/14 23:36:48 - ie_user_css
(2011/05/25 23:56:43 作成)


Page Index
FrontPage
chm.css HTML Help用

アクセス数
11853