IE非対応だけどIE対応してほしいと言われた時に伝えること

IE非対応の案件で、「IEでも崩れないようにしてほしい」などと言われた時に、思わず非対応だから対応しないよと言葉通りの正論を言いたくなります。
それはエンジニア同士では通用するかもしれないですが、業種が違えば前提が違うので、納得して進行するためにもきちんと理由を伝えるようにするといいと思います。

結論からいうとIE非対応なのにIE対応をすることは、「対応する必要がないことを、開発側の裁量で対応した結果、品質を下げる」ことになります。
逆に言えばIE非対応の時に完全にIEを切って対応することで、パフォーマンス改善やセマンティックなコーディングなど品質が高いコードに繋がります。
別にIE非対応にしたら開発が楽だからという理由だけで、やりたくないわけではありません。

クライアントが言ってくるのは分かりますが、上記の理由からエンジニアから気を使って対応しないで欲しい思っています。

そもそも認識が違いそうなこと

IEに完全に非対応で書くと、まず目に入るのはスタイル崩れです。そのためCSSを変えたらいいのではと思われるかもしれないです。
しかし、IEに対応するコードというのはCSSだけでなくHTMLやJavaScriptもあります。
また、「CSS（見た目）だけでもいいから」と言われたとしても、CSSとHTML or JavaScriptが関連して書かれているコードもあるため、CSSだけというわけにはいきません。
以下、その例です。

簡単なHTMLとCSSの例

子階層があるリストのこのようなレイアウト（実際にあったレイアウトです）。
ulの中に親リストが7つありますが、親リスト1と親リスト2には子階層のメニューがあります。

これをIEを考慮する場合、Flexboxで並べると思うので、HTMLは以下のようになるはずです。もしくはulのなかにliを3つならべて、3つめのliに親リスト3以降のリストを入れる（どちらにしても意図した構造ではない）
本来一つのリストのはずなのに、二つのリストに分ける必要があります。

<div class="wrap">
  <ul class="list">
    <li>
      親リスト1
      <ul>
        <li>子リスト1</li>
        <li>子リスト2</li>
        <li>子リスト3</li>
        <li>子リスト4</li>
      </ul>
    </li>
    <li>
      親リスト2
      <ul>
        <li>子リスト1</li>
        <li>子リスト2</li>
        <li>子リスト3</li>
        <li>子リスト4</li>
      </ul>
    </li>
  </ul>

  <ul>
    <li>親リスト3</li>
    <li>親リスト4</li>
    <li>親リスト5</li>
    <li>親リスト6</li>
    <li>親リスト7</li>
  </ul>
</div>

しかし、IE非対応のGrid Layoutを使うと以下のマークアップでサンプルのレイアウトが可能です。
サンプルのコードはGrid Layoutを使ってます。

<ul>
  <li>
    親リスト1
    <ul>
      <li>子リスト1</li>
      <li>子リスト2</li>
      <li>子リスト3</li>
      <li>子リスト4</li>
    </ul>
  </li>
  <li>
    親リスト2
    <ul>
      <li>子リスト1</li>
      <li>子リスト2</li>
      <li>子リスト3</li>
      <li>子リスト4</li>
    </ul>
  </li>
  <li>親リスト3</li>
  <li>親リスト4</li>
  <li>親リスト5</li>
  <li>親リスト6</li>
  <li>親リスト7</li>
</ul>

flexboxの方はCSSのためにHTMLの構造が決まってしまってますが、本来はHTMLの構造を決めた上でスタイリングしていくべきで、Gridを使うとそれが実現できる場面があります。
このようにIEに対応していない新しいコードを使うことで、本来あるべきセマンティックなコーディングも可能になります。
これはほんの一例ですが、このように見た目だからCSSじゃなく、HTMLやJavaScriptと関連がある実装はたくさんあります。

IEを切ったらつかえるコード

挙げたらきりがないので、web制作で実用性のあるものをピックアップしてます。

HTML

• pictureタグ
  • CSSを使わずに、ブラウザサイズによって画像を切り替えることができる
• Details & Summary
  • HTMLだけで簡易的な開閉メニューが作れる

CSS

• grid
  • グリッド状のレイアウト
• object-fit
  • imgをbackground coverなどのように配置できる
• aspect-ratio
  • 要素の比率を指定できる。
• position: sticky

JavaScript関連

• window.scrollTo
  • いわゆるトップへ戻るなどの実装のコードを従来よりも簡略化できる
  • https://developer.mozilla.org/ja/docs/Web/API/Window/scrollTo
• Resize Observer
  • リサイズ時の要素のサイズを取得したりできる
  • MDNには実験的な機能といいつつIE以外では動く
  • https://developer.mozilla.org/ja/docs/Web/API/ResizeObserver
• Swiper JS
  • 高機能スライダープラグイン。ver5移行はIE非対応
  • https://swiperjs.com/

さいごに

「Gridとか使いたいけど、使っていいか分からない」と聞くことありますが、それは案件の対応ブラウザを確認して、使えるなら使いましょう。対応ブラウザで動けば使っていいんです。
対応しなくていいブラウザに気を使ってコーディングするといつまでも新しいコードを使う機会が来ないので、積極的に使うことをおすすめします。