ストアアプリのターゲットを Windows 8 から 8.1 に変更する際は Flexbox レイアウトの CSS の変更に注意

前置き : ストアアプリにおける可変ボックス (Flexbox) レイアウト

Windows ストアアプリを HTML + JS で構築する際のレイアウトの選択肢は以下のページにいろいろと挙げられています。

レイアウトの選択 (HTML) - Windows app development

そのうちの一つに可変ボックスレイアウトがあります。 CSS Flexible Box Layout Module を使うというものです。

可変ボックスレイアウトの Windows 8 プラットフォームと 8.1 プラットフォームでの違い

Windows 8 プラットフォーム向けのストアアプリでは、2012 年 3 月 22 日版の「Flexbox」草案に基づいた実装になっているようです。

Internet Explorer 10 の可変ボックス ("Flexbox") レイアウト (Windows)

仕様が古く、また、-ms- ベンダプレフィクスが必要 *1 です。

Windows 8.1 プラットフォーム向けのストアアプリでは、2012 年 9 月の勧告候補に基づいた実装になっているようです。おそらくですが。

Flexible Box ("Flexbox") Layout - Windows app development

さて、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>