WinJS 4.0 では HTML コントロールにスタイルを当てるためにクラスを明示的に指定する必要がある
WinJS 4.0 がリリースされましたね！！ めでたい！
2015 年 6 月 14 日時点では、Try WinJS のダウンロードページのリンク先がバージョン 4.0.0 になっていますが、最新バージョンは 4.0.1 です。 (Windows Phone 10 におけるバグの修正がされたようです。)
私も Windows ストアアプリ開発で使用している WinJS のバージョンを 4.0 にしてみましたが、便利なコントロールがいくつか追加されていたり、見た目がかっこよくなっていたりして良いです。 ロードマップを見たところ、バージョン 4.1 のリリースは Windows 10 リリースと同時とのことなので、Windows ユニバーサルアプリ開発には WinJS 4.1 を使えそうです。 UX に磨きがかけられるとのことなので、それも今から楽しみですね。
スタイルの適用方法の変更
変更点のうちの 1 つ、スタイルの適用方法についてこのエントリでは紹介します。
Changelog · winjs/winjs Wiki · GitHubStyling
Styling of intrinsic elements is no longer by default
Changelog に書かれているように、HTML の通常の要素にはデフォルトでは WinJS のスタイルが当たらないように変更されました。 WinJS 3.0 では、例えば button 要素そのものに WinJS 用のスタイルが当たるように CSS が書かれていましたが、WinJS 4.0 では button 要素を単に書くだけでは WinJS のスタイルは適用されません。 WinJS のスタイルを適用したい場合には、明示的にクラスを指定する必要があります。
ボタンの場合は、win-button クラスです。
<button class="win-button">WinJS のスタイルが適用されたボタン</button> <button>WinJS のスタイルは適用されないボタン</button>
詳細は次のページに書かれています。
ボタンのようにスタイルが当たっていないことがすぐにわかるものは動作確認時に気づきやすいのですが良いのですが、h1 要素や progress 要素など、スタイルが当たっているのかどうか動作確認時に見てもわかりづらいものもあるので注意しましょう。 body 要素に win-type-body クラスを付与することが推奨されている のも移行当初は見落としがちなので気を付けたいですね。 win-button-primary の存在も見落としやすそうです。
