モックアップ作成:ID指定、要素非活性時の背景色
少しずつではあるが、社内システム用のモックアップ(HTML/CSS/Javascript)を作り始めている。
対象を検討しているブラウザは
- Internet Explorer7
- Internet Explorer6
- Firefox2
- Safari
あたりを。OSに関してはWindowsXP, Windows Vistaをメインに。Macもカバーしたいとこだけど、手元にOSが存在しないのでWindows版Safariで確認を取る事で一応対応しとく。Mac版とWindows版で同じ挙動をするのであれば、Windows版だけカバーしとけば大体は問題ないんじゃなかろうかと思うのですが…その辺どうなんでしょう?
作ってて気になった箇所(主にブラウザ間で異なる挙動)をメモ。
- IDの指定
- 要素非活性時(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等と組み合わせた場合にこの形で上手く行くかどうかは微妙なとこだが…背景色も指定出来た方が良さげか?