現在、仕事でスマホ（メインはAndroidとiPhone）専用サイトを作っているのだが、スマホってPCと同じように個人がブラウザを自由にインストールできるので、主要なスマートフォン用ブラウザアプリのクロスブラウジングはやっておかないといかんなぁ…と、ふと思った。で、STYLESHEETを調整していたら、Opera mini対応でつまづいたので、備忘録として残しておこうかと。
最近のスマートフォンのブラウザはCSS3にもかなり対応できて来ていて、今までブロック要素の中にブロック要素を横に並べる時は、横に並ばせるブロック要素それぞれにCSSでfloatプロパティを設定（float:left等）することがセオリーだったが、CSS3では単純に横並びブロックの親要素でdisplayプロパティにboxを指定（display:box;）してあげるだけで良くなった。でも、Operaはまだこのプロパティが使えないようだ。ベンダプリフィックスを付けてdisplay:-o-box;と書いても動かない。まぁ、webkit系のSafariとChromeや、Mozilla系のFirefoxではベンダプリフィックス付けたら動いたので、Operaは対象外にするかなぁ…とも一瞬思ったが、すんでのところで思いとどまった。
…と言うのも、ちょっと前に自社サービスのWEBサイトのHTMLコーディングをしていた際、Operaブラウザだけレイアウトが崩れるという不具合が見つかって対応したことがあったのを思い出したからだ。その時は、まぁ普通にOperaだけにスタイルシートを適応すればいい案件だったので、CSSハックを使ってちょちょいと対応しようと思っていたのだが、すんなり行かなかった。その時はちょうどOperaの最新バージョンである11が出た直後で、それまでOpera9.xまで使えていたCSSハックがOpera10以降だと効かないことが判明したのだ。ネットで探してもなかなか見当たらず、最終的に海外（ドイツかロシアだった記憶がある）サイトでOpera11用のCSSハックを見つけて、事なきを得た記憶がよみがえった…。
そこで、その時に書いたCSSを引っ張り出して、対応してみたのが下のソース。
メディアクエリを使ってOpera10以降はCSSハックが出来るワケですな。
<ul id="navi-menu">
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
#navi-menu {
display: -webkit-box;
display: -moz-box;
display: -o-box;
display: box;
}
#navi-menu li {
display: block;
margin: 3px 3px;
width: 54px;
height: 54px;
-webkit-border-radius: 4px/5px;
-moz-border-radius: 5px/5px;
-o-border-radius: 4px/5px;
border-radius: 4px/5px;
box-shadow: 0 0 2px 1px #b0b0b0;
}
@media not screen and (1) { /* Opera 10 以上 */
#navi-menu li {
float: left;
}
}
#navi-menu li:not(*|*) { /* Opera 9 以下 */
float: left;
}
この記事がある限り、今度は忘れても大丈夫！…のハズ。
