ちょっと前にLightning Design Systemの使い方を確認しようと思ってこんな感じの画面をつくってみました。
自分でCSSを用意せずにこういう画面をつくれるのはすごく便利だなと思っていたのですが、Lightning Design SystemのアイコンはSVGだからIEで表示されないといった話を聞きました。
・・・ということでIEで表示したときどうなるか確認してみました。
こちらがIE11で表示してみたときの画面です。
みごとにアイコン部分が非表示になっています。SVGを利用することってほぼなかったので意識してませんでしたが、まだ未対応のブラウザがあったりするんですね。
検索してみるとこのIEでSVG表示する方法がいくつか見つかりました。一応頑張ればなんとかできそうです。
ここで気になったのですが、Lightning Experienceの標準レイアウトでもDesign Systemが利用されています。そこはどうなっているのかと確認してみました。
Lightning Experienceの標準レイアウトはIEでも大丈夫みたいです。Lightning Design Systemはまだバージョン『0.11.0 』なのでこの先のアップデートで便利な対応方法が追加されるかもしれません。
SVG以外の部分は問題なさそうなので、アイコン表示はioniconsなどのアイコンフォントに変更してしまう方法でも対応できそうです。それからSalesforce1モバイルの方ではSVGでもきちんと表示されたので、S1モバイルアプリの開発では特に気にしなくて大丈夫です。
