IEが動作対象外なら使っておきたいCSS最新テクニック

develop

2021.05.10

Windows 2000 / XP / Vista / 7 のIE10のサポートも終了し、Windows 8.1のIE11のサポートも2023年1月10日で終了するので、コーディング時の対象ブラウザがIE除外の案件が多くなりつつあるので、IEの呪縛から開放されて、安堵しているフロントエンドエンジニアさんも多いのではないのでしょうか。

Contents

はじめに
テキスト縁取り
固定ヘッダー
画像のアスペクト比を維持して拡大縮小
まとめ

はじめに

自分はCSSという概念が存在していなくてレイアウトをtableタグを使って無理やりコーディングしていた時期からコーディングの仕事をしているので、その時に比べてたらCSS、SASS、javascript、テンプレートエンジン、gulpなどコーディングに関する知識や作業工数は大幅に増加していて、それに加えてIE対応が入ってくるとかなり精神的にやられます。
やっとコーディングが終わってモダンブラウザでチェックした後に、IEで確認したときに崩れてた時の絶望感は。。。。今も忘れません。

マイクロソフト自体もIEの使用中止を呼びかけているみたいなので、IEを使用しているクライアントさんがいたら、IEは使わないほうがいいですよって教えてあげましょう。

https://japanese.engadget.com/jp-2019-02-08-internet-explorer-ie.html

なので、せっかくIEのサポートも終了しつつあるので、IEを気にせず、最新のCSSを使ってコーディングをして少しでも工数を減らして、作業効率を高めてみましょう。

ちなみに、こちらの記事に「IE11対応ってどのくらい大変？」という項目でエンジニアにむけてアンケートがとられていましたので、参考までに読んでみても良いかもしれません。その他、エンジニアに関するアンケートで使用エディタや、使用テンプレートなどあるので個人で作業されていて他のエンジニアさんがどんな環境で作業されているかもわかるので興味があるかたはぜひ一読してみてください。

https://ics.media/entry/200710/

テキスト縁取り

コーディング時のテキストの縁取りは、基本的に画像で処理するか、もしくは1pxならtext-shadowを使って無理やり実装するしかありませんでした。text-strokeを使用すれば画像書き出しの工数が減りますし、文字の修正が入ったときにデバイスフォントなので、HTMLだけの修正で済むので運用が楽になるので大変便利です。もしデザインでテキストの縁取りデザインがあったらこれを使ってみてもいいかもしれません。

/* テキストの縁取り */
-webkit-text-stroke:2px #333;//太さ、、カラー

See the Pen
MWJxzXb by hisanaga (@hisanaga-h2o)
on CodePen.

固定ヘッダー

スマホ対応になってからほぼ必ず実装してるといってもいいと思われるヘッダー追従です。JavaScriptで実装すると地味に工数取られて大変なのですがCSS一行でかけるようになりました。

ただし、z-indexなどの挙動がおかしいところがあるみたいなので、追従ヘッダー内にハンバーガーメニューなどの展開時のメニュー実装時は注意したほうがいいかもしれないです。自分はハマりました。。。慣れているJavaScriptで実装したほうが早かったかもしれないです。

/* 固定ヘッダー */
position: sticky;
top:0px;//固定する位置

See the Pen
VwpYwvR by hisanaga (@hisanaga-h2o)
on CodePen.

画像のアスペクト比を維持して拡大縮小

imgタグを使ってファーストビューをフルスクリーンで表示させて画像を全面に配置したいときに重宝しそうです。background-size:cover;でも代用はできますが、動的に画像を変化させたりしたい場合は、style属性を使ってinlineでスタイルを書かなければいけないので、object-fit:coverを使用すればimgタグを使って実装できるので便利です。

/* 画像のアスペクト比を維持して拡大縮小 */
object-fit:cover;

See the Pen
JjWojJw by hisanaga (@hisanaga-h2o)
on CodePen.

まとめ

IEが、まったくサポート外になったわけではないですが、Windows 2000 / XP / Vista / 7でのIEのサポートが終了したことにより、Web製作時の対象ブラウザをIE対象外にしてもほぼ問題なさそうですが、日本の企業は、古いPCを長く使っていたりするので、クライアントさんの決定権（決済権）のある人の使用PCの環境は把握しておいたほうがいいかもしれません。リリース直前の最終確認の段階までいって、IEで正常に表示されてないんですけど。。。。って鶴の一声で、デスマーチが始まる可能性もあるので（笑）

ちなみに、Windows 8 の IE11は 2023年1月までで、Windows 10 の IE11 は 2029年1月までサポート期間があります。Windows8 やWindos 10でIEを使ってる人はあまりいないと思いますが。。

という訳でIEに関する内容が多くなってしまいましたが、脱IEを手に入れて最新のCSS技術を取り入れてスキルアップしていきましょう。