@document規則でFirefoxのみにcssを適用

Firefox用のブラウザハックです。

@-moz-document url-prefix() {
	body {
		background: #ccc;
	}
}

@documentとは

@documentは、ページのURLが指定のルールに当てはまっていると内包するCSSを適用させる@規則で
2014年10月現在、Firefoxのみ-moz-のベンダープレフィックスつきでサポートされています。

そのため、このブラウザハックが有効なのは
Firefoxがベンダープレフィックスつきの@-moz-documentのサポートを終了するまでの期間になります。

url-prefix()は、URLの先頭が指定したルールと一致しているか判定しています。
たとえば、https://で始まるURLだけにスタイルを適用させたい場合はこうなります。

@document url-prefix(https) {
	body {
		background: #ccc;
	}
}

参考:
@document – CSS | MDN

Firefoxのブラウザハックに使用したよう
url-prefix()と値を空にした場合は、全てのURLと一致する判定になります。

参考:
@‌supports と @‌document に関する覚え書き | Unformed Building

Firefoxではline-heightの配置が2px上にずれる

余談ですが、いまさらFirefoxでブラウザハックがほしくなった経緯を。

アイコンフォントでオリジナルデザインのチェックボックスをつくったとき
::beforeで正方形の枠を、::afterでチェックマークアイコン配置したのですが
チェックマークの位置がこのようになります。

Chromeは、指定どおりピッタリ
Firefoxは、指定の位置より上へ2pxのズレ
InternetExolorer11は、指定の位置より下へ1pxのズレ

1px程度なら目をつむろうかと思ったのです
、2pxは目立ちすぎて見逃せなかったので
@-moz-document url-prefix() を使って
Firefoxだけ2px下方へ補正しました。

この、アイコンフォントの位置合わせについては、またあらためて。

関連記事

Pocket