object-fit・currentColor・will-change・image-renderingなどマイナーだけど便利過ぎるCSSプロパティの使い方

• 作成：2016/11/14
• 更新：2016/11/15
• Web制作 >

object-fit・currentColor・will-change・image-renderingなど、結構マイナーだけど、実用的なCSSプロパティをピックアップしました。

エンジニア速報は Twitter の@commteで 1 日 5 回配信しています。

object-fit

object-fitプロパティはボックスに合わせて、アスペクト比を維持したまま画像サイズを調整できます。

例えば600×300の画像をCSSで400×400で指定したとすると正方形に引き伸ばされます。この時アスペクト比は崩れてしまいます。

しかし、imgにobject-fit: contain;を追加すると、imgに指定した400×400の大きさのボックスに全体が格納されるようにアスペクト比を維持したまま表示されます。

img {
  width: 400px;
  height: 400px;
  object-fit: contain;
  }

object-fit: cover;を指定するとボックス全体を覆うように表示されます。ボックスからはみ出した部分は表示されません。アスペクト比は維持されています。

値のfillを使うとアスペクト比は調整されません（fillは初期値である）が、none/contain/cover/scale-downを使うと維持されます。background-sizeで指定しなくても、imgタグ内にプロパティを追記するだけでいいのは便利ですね。

サイズ調整に便利なCSSのobject-fitとobject-positionプロパティの使い方 - WPJによると動画にも適用可能なそうです。

昔はOperaだけだったのですが、現在はIE/Edge以外のブラウザで使えるようになってます。

Can I use

image-rendering

image-renderingは画像の拡大縮小処理アルゴリズムの変更を行えます。ドット絵など、ページを拡大した時に違和感を軽減するために画像（エッジ）がぼやけるのをCSSでコントロールしたい場合に使うとよいそうです。

img {
  image-rendering: pixelated;
}

ドット絵の拡大表示と各ブラウザの対応 | SDN Memo

image-rendering | CSS-Tricks

Can I use

will-change / レスポンス向上、チラツキを防止する

will-changeを使えば、要素の変更などを事前にUAに知らせることができるので、レンダリング処理が早くなります。過度に使用したり、ページに問題がないのに使うと逆効果になるとのこと。値はauto/scroll-position/contents/transform/opacity/left, topがあります。

.foo {
  will-change: opacity;
}

will-changeは最適化を長く維持してしまうので、Dev.Opera — CSS will-changeプロパティについて知っておくべきことに書かれてある「JavaScriptを使って、使い終わったwill-changeを削除する方法」を参考にしてみましょう。

will-change - CSS | MDN

CSS Will Change Module Level 1 （日本語訳）

IE/Edge/Android2~4系は使えません。

Can I use... Support tables for HTML5, CSS3, etc

currentColor / 色の継承

currentColorは色（colorプロパティ）を継承できるプロパティ値です。borderやbox-shadowなどへ適用可能。これを使うことによって個別に指定する必要がなくなります。色を統一したい時に便利。

※2016/11/15：twitterでcurrentColorはvalueではないかとご指摘がありました。ご指摘のとおり color プロパティの計算値ですので修正いたします。ご指摘ありがとうございました。

細かいですがcurrentColorはvalueですね // object-fit・currentColor・will-change・image-renderingなどマイナーだけど便利過ぎるCSSプロパティの使い方 https://t.co/utaNpG1sVT

— kubosho_ (@kubosho_) 2016年11月15日

See the Pen currentColor by commte (@commte) on CodePen.

テキストにblueを指定したのをborderやbox-shadowなどでblueを継承しています。

div {
  color: green;
  background-color: currentcolor;
}

プロパティや、デフォルトでは継承を行わない子要素のプロパティに、色のプロパティを継承させることができます。 - CSS | MDN

currentColor | CSS-Tricks

Can I use

column-rule / 多段レイアウト、高さが揃う区切り線

column-ruleプロパティはマルチカラムの段落間に区切り線を表示することができます。

column-countでカラム数を指定し、column-ruleで区切り線のスタイル・太さ・色の値を指定します。

p {
  column-count: 2;
  column-rule: solid 1px #ccc;
}

Can I use

CSS Shapes / 円の中にテキストを格納する

shape-outside: circle();を使えばテキストを回り込ませることができますが、こちらはshape-outside: url();と半円画像を使って、半円の中にテキストを格納する荒業。

.foo {
  float: right;
  -webkit-shape-outside: url(半円の画像);
}

Can I use