object-fit・currentColor・will-change・image-renderingなどマイナーだけど便利過ぎるCSSプロパティの使い方
object-fit・currentColor・will-change・image-renderingなど、結構マイナーだけど、実用的なCSSプロパティをピックアップしました。
エンジニア速報は Twitter の@commteで配信しています。
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以外のブラウザで使えるようになってます。
image-rendering
image-renderingは画像の拡大縮小処理アルゴリズムの変更を行えます。ドット絵など、ページを拡大した時に違和感を軽減するために画像(エッジ)がぼやけるのをCSSでコントロールしたい場合に使うとよいそうです。
img { image-rendering: pixelated; }
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を削除する方法」を参考にしてみましょう。
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
column-rule / 多段レイアウト、高さが揃う区切り線
column-ruleプロパティはマルチカラムの段落間に区切り線を表示することができます。
column-countでカラム数を指定し、column-ruleで区切り線のスタイル・太さ・色の値を指定します。
p { column-count: 2; column-rule: solid 1px #ccc; }
CSS Shapes / 円の中にテキストを格納する
shape-outside: circle();を使えばテキストを回り込ませることができますが、こちらはshape-outside: url();と半円画像を使って、半円の中にテキストを格納する荒業。
.foo { float: right; -webkit-shape-outside: url(半円の画像); }
スポンサード リンク
関連記事
- 今どきのプログラマー向け社内共有ツール
- Mac初心者おすすめ!フロントエンドやコーダー向け初期設定
- CSSだけでOK!レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー
- デベロッパーにおすすめのATOM開発系ダークテーマ
- CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10
- モダンなフォームを作るために覚えておきたいCSSの擬似クラス
- CSSのみで実現、背景を動かす「おしゃれエフェクト」まとめ
- 聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能
- スクロールした時に面白いエフェクトを出すためのアイデアまとめ
- それとなく今風にできる、グローバルナビゲーションのコード集
Leave a Comment