2019年06月04日

え、IEなのに！？IE11でも使えるCSS3プロパティ

実務ではまだまだ対応が必要なIE11。せっかく最新のCSSを覚えたのに、IEでサポートされていないから使えない（泣）なんてことがよくあります。

しかし、IE6時代からコーディングをしているような人にとっては、「え、IEなのに！？」と意外に思うようなCSSがIE11では使えたりします。また、正式にサポートされていなくても、Autoprefixerやポリフィルを利用することで使えるようになるプロパティもあります。
今回はそのようなCSS3のプロパティをいくつかご紹介します。

※本記事でのIEはバージョン11のみを対象とします。
※主にIE対応の方法について説明するので、プロパティの説明は割愛します。

display: flex

基本IEでも問題ありませんが、 flex-basis が border-box に対応してないなど、一部挙動が他のブラウザと異なる場合があるので注意が必要です。

参考： flexboxのバグに立ち向かう（flexboxバグまとめ）

display: grid

IE対応するには、Autoprefixerが便利です。
IEではグリッドレイアウトの構文が正式なものと異なるため、手動で対応させるのは大変ですが、Autoprefixerを使うとその変換を自動でしてくれるので、IEの構文を意識しなくても対応できるようになります。
※グリッドレイアウトのすべての機能が使えるようになるわけではありません。

参考： CSS Gridのgap（grid-gap）が遂にIE 11でも再現できるように。Autoprefixerが待望のアップデート

Autoprefixer v9.4からは、ショートハンド版でなくてもIE対応できるようになっています。 gap (grid-gap) にも対応しています。

Autoprefixer

Autoprefixerのオプションに grid: "autoplace" を指定します。

Gulpの場合

const gulp = require('gulp')
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')

const plugins = [
  autoprefixer({
    grid: 'autoplace'
  })
]

gulp.src('*.css')
  .pipe(postcss(plugins))

CSS

ショートハンド版

grid-template と、その子要素に grid-area の指定が必要です。
gap (grid-gap) は任意です。
【注意】iOS Safariなどの現行ブラウザでは gap プロパティは無効となり、 grid-gap プロパティしか認識されません。最新の仕様では gap になるようですが、2019年9月時点では grid-gap のほうを使うようにしてください。（どちらでもAutoprefixerで変換されます。）

ul {
  display: grid;
  grid-template:
    "g2 g1" 1fr
    "g3 g1" 1fr
    / 1fr 2fr;
  grid-gap: 5px;
}

li:nth-child(1) {
  grid-area: g1;
}

li:nth-child(2) {
  grid-area: g2;
}

li:nth-child(3) {
  grid-area: g3;
}

↓Autoprefixer変換後

ul {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 5px 1fr;
  -ms-grid-columns: 1fr 5px 2fr;
      grid-template:
    "g2 g1" 1fr
    "g3 g1" 1fr
    / 1fr 2fr;
  grid-gap: 5px;
}

li:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 3;
  grid-area: g1;
}

li:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: g2;
}

li:nth-child(3) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: g3;
}

通常版

Autoprefixerのオプションに grid: "autoplace" を指定することで、ショートハンド版でない（grid-areaを使わない）形式でもIE対応できるようになります。
:nth-child 部分が自動で出力され、子要素が適切に配置されます。
【注意】オプションが grid: true だと、 :nth-child 部分が出力されません。

IEに限り、 grid-template-columnsの値の数 * grid-template-rowsの値の数 > 子要素の数 となる必要があります。出力される :nth-child の数が値の数によって決まるためです。
以下の例では、 2 * 2 = 4 となるので、子要素は4つまでとなります。5個目以降も適用するには、 grid-template-rows: auto auto auto; のように値の数を増やす必要があります。

ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-gap: 20px;
}

↓Autoprefixer変換後

ul {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto 20px auto;
  grid-template-rows: auto auto;
  grid-gap: 20px;
}

ul > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

ul > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

ul > *:nth-child(3) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

ul > *:nth-child(4) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

実装例

ショートハンド版


See the Pen
[Example] Grid Layout by Ko.Yelie (@ko-yelie)
on CodePen.

通常版


See the Pen
[Example] Grid Layout (normal) by Ko.Yelie (@ko-yelie)
on CodePen.

column-count

IE11でサポートされているので、そのまま使えます。

実装例


See the Pen
[Example] column-count by Ko.Yelie (@ko-yelie)
on CodePen.

今まではリンクリストはタグを分割しない限りはZ順にしか並べることができませんでしたが、 column-count を使えば簡単に逆N順に並べることができます。
列の幅は column-width 、間隔は column-gap で調整できます。

object-fit

IE対応するには、ポリフィルが必要です。
PostCSSのプラグインを併用すると、よりシンプルにCSSを書くことができます。

CSS

object-fit-imagesを有効化するために、通常の指定とは別に font-family の値に通常のCSSと同じ形式のものを文字列として指定する必要があります。

.image {
  object-fit: cover;
  object-position: center 60%;
  font-family: 'object-fit: cover; object-position: center 60%;';
}

さらに、object-fit-images用のPostCSSプラグインPostCSS Object Fit Imagesを使ってCSSを変換すれば、上記の font-family の指定を自動で挿入してくれるので、 font-family を書く必要がなくなります。通常の指定だけIE対応ができるので、PostCSSプラグインの併用をオススメします。

GulpでAutoprefixerと併用する場合

const gulp = require('gulp')
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')
const objectFitImages = require('postcss-object-fit-images')

const plugins = [
  autoprefixer({
    grid: 'autoplace'
  }),
  objectFitImages
]

gulp.src('*.css')
  .pipe(postcss(plugins))

JS

npmなどでポリフィルを読み込み、DOMContentLoaded後に objectFitImages() を実行します。

objectFitImages()

実装例


See the Pen
[Example] object-fit by Ko.Yelie (@ko-yelie)
on CodePen.

※ポリフィル用コードは省略

position: sticky

IE対応するには、ポリフィルが必要です。

CSS

.sticky {
  position: sticky;
  top: 0;
}

.sticky の親要素の高さが移動範囲となります。
top の指定は必須です。

JS

npmなどでポリフィルを読み込み、DOMContentLoaded後に Stickyfill.add() で対象要素を指定して有効にします。

Stickyfill.add(document.querySelectorAll('.sticky'))

実装例


See the Pen
[Example] position: sticky by Ko.Yelie (@ko-yelie)
on CodePen.

※ポリフィル用コードは省略

linear-gradient, radial-gradient

IE11でサポートされているので、そのまま使えます。

格子状やブロックチェックを画像なしで表示できます。

実装例

グラフチェック（格子状）


See the Pen
[Example] Graph Check by Ko.Yelie (@ko-yelie)
on CodePen.

linear-gradient で1色を細く指定すると線のように見せることができます。


See the Pen
[Example] Graph Check and Gradation by Ko.Yelie (@ko-yelie)
on CodePen.

linear-gradient と radial-gradient を組み合わせて重ねることも可能です。

ブロックチェック（市松模様）


See the Pen
[Example] Block Check by Ko.Yelie (@ko-yelie)
on CodePen.

こちらのよく見る透過イメージは、Chrome（過去バージョン）の画像プレビューの背景がCSSで実装されていたので、それを参考にしています。

text-shadow, box-shadow

IE11でサポートされているので、そのまま使えます。

transition や animation も使えるので、以下のようなアニメーションもCSSのみで実現可能です。
IEでは @keyframes の 0% もしくは 100% を省略すると正常に動かなくなるので注意しましょう。

実装例

text-shadow


See the Pen
[Example] text-shadow animation by Ko.Yelie (@ko-yelie)
on CodePen.

color のalpha値を0にするとシャドウだけ残るので、工夫次第でいろんな表現ができます。

box-shadow


See the Pen
[Example] Hole Opening effect by Ko.Yelie (@ko-yelie)
on CodePen.

box-shadow の inset と border-radius を組み合わせればこんな表現も。
これらももちろんIE11でも動作します。

IEでも使えるCSS3はたくさんある

このように、ポリフィルなどを駆使すれば多くのCSS3プロパティがIEでも使えるようになります。
IE11の開発はすでに終了しており、サポート終了もそう遠い未来ではありません。さらにはEdgeがChromiumベースとなる予定もあり、今後はクロスブラウザ対策をほとんど意識せずに制作できる日が来るかもしれません。
そういった未来にスムーズに移行できるよう、できるだけIEに依存しないモダンなコードで効率良く制作していきましょう。

RELATED POSTS

CONTACT

お仕事のご依頼・記事に関するお問い合わせはこちら

 RECRUIT

一緒に働くメンバーを募集中！