IEよ、さようなら😂 IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ

Post on:2022年6月14日

ようやくこの時がきます😂
6/15にIEのサポートが終了すると、これからはIEを気にすることなく、モダンCSSを使用できます。

IEをサポート外にした時に使用できるCSSのプロパティや機能、HTMLの要素や属性、さらに今後使用できるようになる新機能を紹介します。

IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ

IEをサポート外にした時に使用できるCSSのプロパティ

IEをサポート外にした時に使用できるCSSのプロパティです。
各プロパティのリンクは、Can I useのサポート状況です。

CSSのプロパティ、疑似クラス、疑似要素など

CSSの新しいプロパティ「accent-color」の基礎知識と使い方

CSSの新しいプロパティ「accent-color」が便利！今までできなかったフォーム要素のカラーを簡単に変更できる

サイトのキャプチャ

カスケードレイヤー「@layer」でCSSの実装がどう変わるのか、仕組みと基礎知識、さまざまな使用例を徹底解説

CSSのconic-gradient()関数を使用した美しいグラデーション

CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法

CSS fit-contentプロパティの便利な使い方

CSS fit-contentプロパティの便利な使い方

左揃えの要素を中央配置にするCSSの古い書き方とモダンCSSを使用した書き方

左揃えの要素を中央配置にするCSSの古い書き方とモダンCSSを使用した書き方

min()のデモ

CSSの数学関数min()、max()、clamp()の基本的な使い方

左揃えの要素を中央配置にするCSSの古い書き方とモダンCSSを使用した書き方

左揃えの要素を中央配置にするCSSの古い書き方とモダンCSSを使用した書き方

CSSの新しい機能を使用したCSSリセット -The New CSS Reset

CSSの新しい機能を使用したCSSリセット -The New CSS Reset

position: sticky;の使い方を解説

position: sticky;の仕組みや実際の使い方をやさしく解説

CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説

CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説

デモのキャプチャ

object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック

CSS Grid Layout (level 1)

IEでCSS Gridを使用する時の既知の問題

  • IE 11ではプレフィックス「-ms-」が必要。
  • 異なるプロパティ名（grid-template-columnsと-ms-grid-columns）が存在する。
  • レイアウトにgrid-rowsが必要。
  • Chrome, Firefoxとは、グリッドの数え方が異なる。

参考: IEでも大丈夫！CSS Gridを使用する時の注意点と実装方法

CSS Flexible Box Layout Module

IEでflexboxを使用する時の既知の問題

  • IE 10ではプレフィックス「-ms-」が必要。
  • IE 11では、3番目の引数に単位を追加する必要があります。flex-basisプロパティはMSFTのドキュメントを参照してください。
  • IE 11でmin-heightを使用する場合、アイテムを垂直方向に正しく配置しません。Microsoft Docsを参照してください。
  • IE10およびIE11では、display: flex;およびflex-direction: column;を持つコンテナは、コンテナにmin-heightがあり、明示的なheightプロパティがない場合はflexの子のサイズを適切に計算しません。Microsoft Connectを参照してください。
  • IE10では、flexのデフォルト値は最新の仕様で定義されている0 0 autoではなく、0 1 autoです。

参考: CSS Flexbox 各プロパティの使い方を詳しく解説

IEをサポート外にした時に使用できるHTMLの要素や属性

HTMLとCSSで、モーダル・ダイアログ ボックスを実装する方法と注意点

HTMLのdialog要素とCSSで、モーダル・ダイアログ ボックスを実装する方法と注意点

サイトのキャプチャ

Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート

IEをサポート外にした時に使用できる機能

要素がビューポートに表示されているかを判定

Intersection Observerが簡単で便利！要素がビューポートに表示されているかを判定できる

2022年のファビコン設定方法、さまざまなブラウザやデバイスに対応させる最小限のセットは6種類のファイルが必要

2022年のファビコン設定方法、さまざまなブラウザやデバイスに対応させる最小限のセットは6種類のファイルが必要

webp画像を実装する時のHTMLのコード

これが完全版！レスポンシブ対応のwebp画像を実装するHTMLのコード

Webフォントの表示を最適化するテクニック

Webフォントの表示を最適化するテクニック

今後使用できるようになる新機能

現在は一部のブラウザのみ、もしくはベータ版のみにサポートされている新機能です。2022年内にサポート予定のものもあり、コンテナクエリや:has(), content-visibility, lvh, svhなど、実装の考え方に大きな影響を与えるものもあります。

2022年、注目しておきたいCSSの新機能のまとめ

2022年、注目しておきたいCSSの新機能のまとめ

sponsors

top of page

©2024 coliss