今日はユーザースタイルシートの話。
それならどのブラウザでも通じますよね、と言いたいのですが、
今日の話はMozillaのWebブラウザにしか通用しませんね。
けど他の環境でも応用が利くかも知れません。
フォームの送り先がHTTPSかHTTPかによって表示を変えると便利だなと。
セキュアじゃないページ上にセキュアで送るフォームがあったりするのよね。
それはまだいいけど、逆にセキュアなページ上にセキュアじゃないフォームもあるかもしれない。
その辺見極めることができないかと。
そうすれば大切なデータを入れるとき、セキュアな方法を選んで使えるかもしれない。
確かにFirefoxはセキュアじゃない方法でデータを送信しようとすると、
警告する機能はあるけど、これは検索などでも警告してくるので、
使えない警告というわけで、それに変わる方法として表示を変えるという方法を考えたと。
@-moz-document url-prefix("http://"){
form input[type="password"] , form input[type="text"] , form input:not([type]){
-moz-appearance:none !important;
background-color:#f9f !important;
}
form[action^="https:"] input[type="password"] , form[action^="https:"] input[type="text"] , form[action^="https:"] input:not([type]){
-moz-appearance:none !important;
background-color:#ff9 !important;
}
}
@-moz-document url-prefix("https://"){
form input[type="password"] , form input[type="text"] , form input:not([type]){
-moz-appearance:none !important;
background-color:#f9f !important;
}
form:not([action*=":"]) input[type="password"], form:not([action*=":"]) input[type="text"], form:not([action*=":"]) input:not([type]),
form[action^="https:"] input[type="password"], form[action^="https:"] input[type="text"], form[action^="https:"] input:not([type]){
-moz-appearance:none !important;
background-color:#ff9 !important;
}
}
-mozから始まるやつがあるあたりからして、Mozilla専用ですよね。
あとCSS3で追加された内容も使っているので、そんなに古いのではだめなはず。
@-moz-document url-prefix(“http://”)というセレクタは、
http://から始まるURLのページに適用するという意味。
これはMozilla専用です。まぁユーザースタイルシート以外使いようもないですよね。
しかしこれで特定のWebサイトに適用するスタイルとか作れるんですね。
いずれも、inputのうち、typeがpasswordかtextかtype属性がない、すなわちtextならば背景を赤くする。
属性セレクタはもう一般的になってきたのかな。
a[href]はhref属性のあるa要素、input[type=”password”]はtype属性がpasswordであるinput要素。
ここでtype属性がないというのは、input:not([type])と書きます。
この:notというのはCSS3から追加されたもので、()内の否定をすると。
ここではtype属性があるわけではないinput要素というのを選んでると。
input要素はtype属性を省略するとテキストボックスになるようなので、その対策です。
あとは、input要素の属するform要素のaction属性がどうなってるか。ここに送信先が書いてある。
まずaction属性がhttps:から始まれば間違えなくセキュアですね。
これもCSS3から追加された方法で書くと、form[action^=”https:”]となります。
なかなかCSS3はおもしろそうですね。
さらにURLがhttps://から始まるなら相対パスで書いてあってもセキュアなはず。
相対パスであることはform:not([action*=”:”])のように書いています。
この[action*=”:”]というのもCSS3からの表記で、どこかに:を含むという意味。
これでセキュアであるとわかったものは背景を黄色にすると。
あと、-moz-appearance:none !important;というのはおまじまいみたいなものです。
これを書くことで少しフォームが不細工になるけど、背景色などが設定できると考えればOK。
これを「スタイルシートでパスワードをすっきりさせよう」で書いたようにuserContent.cssに書けばOKです。
ただこれは反映が再起動後なんですね。
作成時、いろいろ試してるときに再起動してはあまりにめんどくさい。
そこで便利なアドオン、Stylishを使う。
インストールすると、右下にアイコンがあるから、ここでスタイルの管理で追加すればOK。
ON/OFFの制御が簡単にできますよ。
これでユーザースタイルシートの自作してみると楽しいかもね。
非常に便利ですね。
もっともこれを導入しなくても標準でユーザースタイルシートは簡単に使えますけどね。
一応付け加えておくと、どうもこのスタイルシート完璧じゃないらしく、
多少色が変わらないことがあるけど、まぁそういうのもあると思ってください。
例えばイーバンク銀行のログイン画面とか。あれはJavaScript使ってるからかな。
あと、これは送信したときの宛先を検査してるだけなので、
Javascriptを使ってるページなどでは意味を成さないこともある。
あと、送信するときの宛先を検査してるのであって、セキュアじゃないところにリダイレクトされたらどうなるか知らない。
まぁ簡易検査だと思ってください。
よっぽど怪しいところでなければ問題ないと思いますよ。