Firefox 54 で appearance の接頭辞が外れるとか置換要素関連の変更とか

投稿

Firefox 54 で CSS の appearance プロパティ関連に変更が入るようです。

appearance 自体はかなり昔から使われてきたもので（主に iPhone Safari 向けなどで）、一時は CSS3 にて radio-button や list-menu など多数の値が規定されていましたが、現在は削除されてCSS Basic User Interface Module Level 4(W3C)にて auto と none のみが定義されています。

今は実質的に、ブラウザのデフォルトスタイルをリセットするため、 appearance: none を指定する用途として使われる例が大半かと思われます。

接頭辞が外れる

§

これまで Firefox は -moz-appearance のみに対応していましたが、 Firefox 54 で接頭辞が外れ、一方で互換性確保のために -webkit- 接頭辞も認識するようになるそうです。

チェックボックス / ラジオボタンに appearance: none を指定したときに置換要素ではなくなる

§

これまで、 input[type="checkbox"], input[type="radio"] { -moz-appearance: none } と指定しても、チェックボックス、ラジオボタンは置換要素にはならず、::before, ::after 疑似要素のスタイルが適用されないといったことがありました[1]。

Firefox 54 からはこの状態が解消されます。なお、 Chrome 等は今でも ::before, ::after 疑似要素が効いていますが、テストページ(bug605985.bmoattachments.org)で確認すると input 要素に display: block を指定しても全幅にならないという差異があるため、ブラウザごとに表示が統一されるようになるわけではなさそうです。とはいえその場合は width プロパティを指定するなど、ちょっとした工夫をすることで大半のケースではチェックボックス、ラジオボタンを独自のスタイルに変更することが可能になるものと思われます。

脚注