読者です 読者をやめる 読者になる 読者になる

ひだまりソケットは壊れない

ソフトウェア開発に関する話を書きます。 最近は主に Android アプリ、Windows アプリ (UWP アプリ)、Java 関係です。

まじめなことを書くつもりでやっています。 適当なことは 「一角獣は夜に啼く」 に書いています。

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

Windows Windows ストアアプリ Windows 8.1 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 8Windows 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 は別に指定しています。)

f:id:nobuoka:20150506172113p:plain

初期値の変更ということで、明示的に -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 だと必要な気がします。