モックアップ作成:ID指定、要素非活性時の背景色

少しずつではあるが、社内システム用のモックアップ(HTML/CSS/Javascript)を作り始めている。

対象を検討しているブラウザは

あたりを。OSに関してはWindowsXP, Windows Vistaをメインに。Macもカバーしたいとこだけど、手元にOSが存在しないのでWindowsSafariで確認を取る事で一応対応しとく。Mac版とWindows版で同じ挙動をするのであれば、Windows版だけカバーしとけば大体は問題ないんじゃなかろうかと思うのですが…その辺どうなんでしょう?

作ってて気になった箇所(主にブラウザ間で異なる挙動)をメモ。

  • IDの指定
    • Javascriptで要素を扱う際にdocument.getElementById('ID名')等を利用する際、IEではIDを指定しなくても、プロパティ名(name='xxx')等で操作が出来てしまう(Firefox, Safariではエラー)。getElementByIdなので当然と言えば当然なのだが、ここまで仕事ではIE以外をあまり対象としていなかったし、上記の通りIEでは指定しなくても動くのであまり意識してなかった部分もある。これからは気をつけよう。
  • 要素非活性時(disabled=true)の背景色設定
    • 要素を非活性とした場合(disabled='true')の背景色の色合いが、Firefox以外では薄い灰色なのに対し、Firefoxでは水色となってしまう。ブラウザの初期設定がどこかにあるとは思うのだが、まだ探していない(探したらメモしようと思うけど)。水色のままでも別に良いっちゃ良いんだが、1つだけ違うのも何か嫌なので、とりあえずはJavascriptで背景色の指定、要素の活性化/非活性を制御出来るようにする方向で。
function contentsDisabled(id, flag) {
    if(flag) {
        // 要素の非活性化.
        document.getElementById(id).disabled = flag;
        // 背景色の設定.
        document.getElementById(id).style.backgroundColor = '#F4F4F4';  // 薄い灰色
    } else {
        // 要素の活性化.
        document.getElementById(id).disabled = flag;
        // 背景色の設定.
        document.getElementById(id).style.backgroundColor = '#FFFFFF';  // 白
    }
}

実際にJava等と組み合わせた場合にこの形で上手く行くかどうかは微妙なとこだが…背景色も指定出来た方が良さげか?