ストアアプリのターゲットを Windows 8 から 8.1 に変更する際は Flexbox レイアウトの CSS の変更に注意
前置き : ストアアプリにおける可変ボックス (Flexbox) レイアウト
Windows ストアアプリを HTML + JS で構築する際のレイアウトの選択肢は以下のページにいろいろと挙げられています。
そのうちの一つに可変ボックスレイアウトがあります。 CSS Flexible Box Layout Module を使うというものです。
可変ボックスレイアウトの Windows 8 プラットフォームと 8.1 プラットフォームでの違い
Windows 8 プラットフォーム向けのストアアプリでは、2012 年 3 月 22 日版の 「Flexbox」 草案に基づいた実装になっているようです。
仕様が古く、また、-ms-
ベンダプレフィクスが必要 *1 です。
Windows 8.1 プラットフォーム向けのストアアプリでは、2012 年 9 月の勧告候補に基づいた実装になっているようです。 おそらくですが。
さて、Windows 8 プラットフォーム向けに記述したベンダプレフィクス付きの CSS プロパティや値は、Windows 8.1 プラットフォームでは対応するベンダプレフィクス無しのものとして解釈されるようです。 例えば以下のようになりました。
display: -ms-flexbox;
はdisplay: flex;
として扱われ、-ms-flex: 0 0 auto;
はflex: 0 0 auto;
として扱われる。
よって、基本的には Windows 8 プラットフォーム向けに書いた CSS はそのまま Windows 8.1 プラットフォームでも同様に解釈されるのですが、一部仕様が変わっている部分があるので注意が必要です。
flex
(-ms-flex
) プロパティの初期値の変更
例えば、Windows 8 プラットフォームにおいて -ms-flex
プロパティの初期値は none
(0 0 auto
と同等) でした。 一方、Windows 8.1 プラットフォームにおいて flex
プロパティの初期値は 0 1 auto
に変更されました。
そのため、次のような HTML を書いていた場合、ターゲットが Windows 8 か Windows 8.1 かで表示がかわってしまいます。
<div style="display: -ms-flexbox; -ms-flex-direction: column; height: 300px; width: 300px"> <div><!-- ← Windows 8 プラットフォームでは `-ms-flex: none;` 相当。 8.1 では `flex: 0 1 auto;` 相当。 --> <div style="height: 200px; background-color: rgba(200, 200, 0, 0.5);">1</div> </div> <div style="-ms-flex: 1 1 auto;"> <div style="height: 200px; background-color: rgba(0, 200, 200, 0.5);">2</div> </div> </div>
実際にそれぞれのプラットフォームでどのような表示になるかは次の図をご覧ください。 (ボーダーなど一部の CSS は別に指定しています。)
初期値の変更ということで、明示的に -ms-flex
プロパティの値を指定していた場合は影響がないですが、省略していた場合はターゲットを Windows 8 から 8.1 に変更した際に影響があるかもしれません。
他の CSS プロパティについて Windows 8 と 8.1 で変更があったものがあるかどうかは調べていませんが、他にもあるかもしれません。
ストアアプリのターゲットを Windows 8 から 8.1 に変更する際の参考文献
ストアアプリのターゲットを Windows 8 から 8.1 に変更する際に下記ページ群が参考になります。 ただし、今回の可変ボックスレイアウト周りの変更については触れられていなかったりするので気を付けましょう!
*1:Windows 8.1 上で Windows 8 プラットフォーム向けにビルドしたストアアプリを動かしたところベンダプレフィクスがなくても動きましたが、多分 Windows 8 だと必要な気がします。