Firefox でデザイン調整

APPW.jp サイトのデザインは、いまのところ Webkit 系ブラウザを対象としています。

各ブラウザの CSS3 対応状況に応じて調整していきたいと考えています。

今回は Firefox 12.0 において調整を進めてみましたが、この記事現在で Firefox 13.0.1 が最新版となっています。

調整のポイントは２点。フレキシブルボックスとグラデーションです。

 

まず、Firefox における「 display: box ; 」あるいは「 display: -moz-box ; 」の解釈は、Webkit 系のものとは異なるようです。よって、わたしはこれらについては様子を見ている状況です。

ただし、Firefox において「 display: inline-block ; 」と「 display: -moz-inline-box ; 」というインラインブロックボックスを使用した例が Google 検索でいくつかみつかりました。

www.webbibo.com/blog/htmlcss/inline-block.html の「floatを使わずにinline-blockで横並びにする方法」を参照させていただきました。

 

フレキシブルボックスではないのですが、結果として実現されるデザインが、想定の通りのものとなりました。

このことは、「インラインボックスを使用している理由」という投稿記事も関連しています。

 

つぎに、ブログタイトルの背景には、線形グラデーションを使用しています。

Firefox では、「 -moz-linear-gradient 」が有効のようです。

.titleBar {
    margin: 0 0 0 0 ;
    padding: 0 0 0 0 ;
    width: 100% ;
    overflow: hidden ;
    background-color: #ad0404 ;
    background: linear-gradient(top,#ad0404, #ffffff) ;
    background: gradient(linear,left top,left bottom,from(#ad0404),to(#ffffff)) ;
    background: -moz-linear-gradient(top,#ad0404, #ffffff) ;
    background: -webkit-gradient(linear,left top,left bottom,from(#ad0404),to(#ffffff)) ;
    color: #ffffff ; 
    font-size: 34px ;
    font-weight: bold ;
    letter-spacing: 0.2em ;
    text-shadow: 0px 0px 10px #ad0404, 10px 10px 10px #ad0404;
}

以上の２点を Firefox 対応として調整しました。

Android アプリ「Firefox Beta」がダウンロード可能となっていますが、こちらでもわたしが想定するデザインで表示可能となりました。

 

さて、最新のFirefox 13 について、「Firefox 13 の後方互換性に関わる修正」が公開されています。「接頭辞付きの -moz-border-radius* と -moz-box-shadow はサポートを終了します」とされています。

 

追記。

Firefox の場合、親要素の幅は、内包する子要素の幅が優先される場合があるようです。

www.days.jp/blog/2012/04/CSS3-displayflexbox-の-Firefox-の不可解な挙動/ の「CSS3 display:flexbox の Firefox の不可解な挙動」を参照させていただきました。

子要素で「 width: 100% ; 」のように％で指定している場合など、親要素で px 単位で指定していても、内包する子要素の実際の幅が優先されるようです。