CSSデザインノートでタグ「Firefox」が付けられているもの

FirefoxのデフォルトスタイルシートはFirefixをインストールした先のresフォルダにあります。

その中を見ると、いくつかスタイルシートがあるのがわかります。その内の「html.css」がスタンダード(標準)モード(Strict モードともいう)でのブラウザのデフォルトスタイルシート、「quirk.css」がクイック(互換)モードでのブラウザのデフォルトスタイルシートになります。

C:\Program Files\Mozilla Firefox\res\html.css

C:\Program Files\Mozilla Firefox\res\quirk.css

尚、これらは、Firefoxのアドレスバーに

resource://gre/res/html.css

resource://gre/res/quirk.css

と入力してアクセスしても見ることができます。

余談ではありますが、Firefoxの標準モードと互換モードのどちらかが採用されるかは、DOCTYPE宣言の書き方にあります。以下のサイトを参考にしてみてください。

Mozilla's DOCTYPE sniffing - MDC

「overflow-y:scroll;」をCSSでhtmlセレクタに指定すれば、Firefoxで縦スクロールバーが常に表示されることは、前回の記事で述べましたが、この方法ではOperaには無効です。

「overflow-y」プロパティはもともとIEの独自拡張で、CSS3で草案としてあがっているもので、Firefoxは先行して実装しているだけに過ぎません。

FirefoxでもOperaでもスクロールバーを出すには、コンテンツの領域が常にブラウザのウィンドウサイズより少しでも大きくなければなりません。そのことを応用して、html領域を100%、marginで下方に1pxの幅を設けるようにします。

CSSコード

html {
   height:100%;
   margin-bottom:1px;
}

Firefoxでは、テンプレートの領域がブラウザのウィンドウよりも小さいとき、縦のスクロールバーが出ない仕様になっています。IEでは常に縦のスクロールバーの領域が取られています。

そのため、「margin:0 auto;」など指定してセンター配置にしたWebサイトの場合、ページによってテンプレートの位置が微妙にずれたりして、ちょっと気持ち悪かったりします。

この問題は、常にスクロールバーを出すことによって解消できます。

CSSコード

html {
   overflow-y:scroll;
}

最近のブログ記事