2019-12-29Organization【css】IEと戦うためのTips集sellCSSおはこんばんちは、ゆるすぎて投稿を忘れていたちーずです。(反省)本日は、IEと戦うためのTipsを、IE滅びろという気持ちを抑えて書きます。この記事を書く?新卒として働き初めてから、新規立ち上げサイトのCSS設計を担当させていただいた経験がありましたが、その中で一番失敗したこと、反省したことがIE対応だったからです。自戒の念を込めて、この記事を書こうと思いました。基本的なIE対応まずはじめに、基本的なIE対応をする際に考えるべきことをざっくりと説明します。useとは、HTMLやCSSなどのブラウザ対応状況が調べられるサービスです。自分が使用したいプロパティがIEに対応しているかを簡単に調べることができるため、ブラウザ対応しているか不安なプロパティを使う際は必ず調べましょう。(hoverすると詳細が見れます。Autoprefixerでベンダープレフィックスを自動で付与するベンダープレフィックスとは、-moz-や-webkit-などのプレフィックス(接頭語)をプロパティや値につけることで、わりと新しめなCSSの機能を特定のブラウザで使用できるようなものであり、Autoprefixerは、指定したブラウザ対応に必要なベンダープレフィックスを自動で付与するツールです。ツール自体の導入は今回は割愛させていただきます。下記記事がわかりやすいと思います。用いて設定すると良いでしょう。設定の書き方は下記記事が分かりやすかったです。.browserslistrcで対象ブラウザを指定するまた、browserl.istで、browserlistの設定から対応ブラウザの一覧を確認できます。useもautoprefixerも教えてくれなくて、自分がまんまとハマってしまったIE対応をご紹介します。flexショートハンドでdefault値を省略するとIEで崩れるflexプロパティのショートハンドでは、以下のような順で指定ができます。1と書くこともできますが、default値を省略するとIEでバグります。auto;}私はこれで、footerを固定するような書き方をしていましたが、MVが大幅に崩れる不具合を出してしまいました。あの背筋が凍った経験を2度と忘れません。参考に、svgタグにwidth,height,viewboxを指定したらなおりました。0で見出しのアイコンとして用いていたのですが、IEで確認したところ、中央によっていました...解消法svgタグにwidth,height,preserveAspectRatio="xMinYMid"を指定したらなおりました。最後にIE対応で不具合を起こさないようにするには、実機確認がマストだと感じました。MacでIE確認できる機能もありますが、スタイル崩れが再現できるとは限りません。ユーザーと同じようにWindowsで、IEを開いて確認するよう徹底しましょう。