異業種からIT企業に転職して半年の初心者です
先日の業務で、PCでは実装したcssが適用されているのに対し、iPhoneでは適用されていない事例に遭遇したので色々調べてみました。
利用環境で差が出ないようにするには
元々の実装では、利用環境差が出ないように以下が設定されていました。
- -webkit-appearance: none;
- appearance: none;
どちらもネイティブUIをクリアするためのプロパティであり、二つの違いは
-webkit-appearance ➡古いブラウザ
-appearance ➡モダンブラウザ（古いブラウザに一部対応しない）
で適応されるそうです。
webkitとは
個人的に初遭遇のwebkitですが、こちらはsafariなどで使用されているHTMLレンダリングエンジンのこと。
HTMLやCSS、JavaScriptを解析してブラウザ上に描画してくれるプログラムの1種です。
であれば、なぜ上記が設定されているのにiPhoneでは適用されなかったのでしょうか。
iOSのブラウザ表示
webkitの役割
iOS（iPhone）ではwebkitを使用してブラウザ上にHTMLなどを表示しています。
webkitはOSのネイティブUI部品を呼び出すことができますが、-webkit-appearance: none;により無効化することが可能です。
ところが今回は-webkit-appearance: none;を設定していても、それをすり抜けてネイティブUIが反映されてしまったことが問題でした。
iOSはwebkitとUIKitがめっちゃ密接らしい
調べ進めていくとiOSにはUIKitというフレームワークが採用されており、ここで定められたネイティブUIが反映されたことでiPhoneだけUIが変わってしまったみたいです。
おさらいですが、-webkit-appearance: none;またはappearance: none;はHTMLレンダリングエンジンレベルでネイティブUIをリセットしてくれます。
現在、多くのブラウザ（Google ChromeやFirebox、MacSafariなど）はレンダリングエンジンがほぼ独立しているため、各OSが採用するフレームワークとの依存度が低く、上記プロパティで対応することが可能です。
一方iOSは、レンダリングエンジンとフレームワークの依存度がいまだ高いため、フレームワークレベルのネイティブUIが反映されてしまい上記のプロパティだけではリセットできなかった、というのが今回の原因でした。
フレームワークレベルの影響は、上記のプロパティではリセットしきれないので、策としては上書きするように指定してあげるしかないみたいですね
ちなみにUIKitはAppleがiPhoneやiPad専用に独自開発したフレームワークのため、スマホ・タブレット用にフレームワークが特化しています。
まとめ
iOSではHTMLレンダリングエンジンとフレームワークの依存度が高く、思い通りのcssが反映されない場合がある！
最後までご覧いただきありがとうございます。
何かあればご指摘いただけますと幸いです。