IEさえ、、IEさえいなければ・・・こんなに便利な機能が・・・

5941 ワード
終了 HTML IE CSS ブラウザ HTML テキストリンク

どうも、7noteです。IE好きの方はみないでください。

（この記事は、IEの影響で安易に使えないCSS3選の記事です。）

ちょうど本日、
「Microsoft 365サービスが「IE 11」サポートを2021年8月終了--旧「Edge」予定も明らかに」
というニュース記事が上がっており、一瞬

「えっ、ついにIE終了か？！」

と思いましたが違いました、残念。

Microsoft 365サービスにおけるIE11のサポートを終了するだけなので、まだまだIEは続くようですね。

はぁ。。。

IEさえいなければ、こんなに使えるCSSがたくさんあるのに。

filter:～～;（画像の色変えれるのに・・・）

画像にぼかしや色変化などのグラフィック効果が可能になる。

filter: blur(5px);      /* ぼかし */
filter: contrast(200%); /* コントラストを強く */
filter: grayscale(80%); /* グレースケールに変更 */
filter: hue-rotate(90deg); /*色相を変更(回転)*/
filter: drop-shadow(16px 16px 20px red) invert(75%); /*影*/

これがあれば、１種類の画像で複数色に対応できたり、
コントラストを調整させたりが可能になるのに・・・

positon: sticky;（スクロール固定できるのに・・・）

スクロールの途中からついてくる要素を作れる

position: sticky;


引用：https://developer.mozilla.org/ja/docs/Web/CSS/position

あと、stickyはSafariだと、display: inline;かdisplay: inline-block;だと効かないとか。
display: block;かdisplay: flex;を指定している要素にstickyを当てるようにしましょう。

（※PolyfillがあればIEでも可能）

object-fit:～～;（画像のトリミング変えれるのに・・・）

object-fit: cover;を使うと、img要素でもbackground-size: cover;のような自動トリミングを使うことができます。

object-fit: cover;

wordpressとかで呼び出した画像のトリミングなどをcssで一発解決できたら楽ちんなのに。。。

（※PolyfillがあればIEでも可能）

text-align: justify;（文字を均等配置できるのに）

均等配置（左右の端がピシっと揃う）ができるのに

ーーーーーーーーーー
住　　所
名　　前
生年月日
ーーーーーーーーーー

でも、text-justify: inter-ideograph;を追記するだけで対応可能！
という記事を見たのだが私の環境(ie11とEdge)では効かなかった。原因は不明・・・。
効いたり効かなかったリ。

あと、Safariではどうしようもないのが難点。

index.html
<ul>
  <li>もも</li>
  <li>りんご</li>
  <li>さくらんぼ</li>
  <li>パイナップル</li>
</ul>
style.css
li {
  text-align: justify;            /* Chrome・Firefox用 */
  text-justify: inter-ideograph;  /* IE・Edge用 */
                                  /* Safariには効かない */
}

まとめ

まだまだフロントエンジニアによるIEとの戦いは続きますが、めげずに技術や情報を駆使していいサイト作りを続けていきましょう！
他にもIEの影響で使えないCSSなどがあれば共有ください！記事に追加させてもらいます！

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）