こんにちは、mimiです。今日はTwenty Seventeenのちょこっと解説として、CSSについてのお話。

ヘッダーメディアのインパクトが強いWordpressのテーマ、Twenty Seventeen。CSS覗くまでbackground-size使ってるんでしょ、とタカをくくっていたのですが。
なんとobject-fitが使われてる！と知って居ても立ってもいられず記事にしています。解説ていうか報告ていうか。

ソースはこのへん。

@supports ( object-fit: cover ) {
 .has-header-image .custom-header-media img,
 .has-header-video .custom-header-media video,
 .has-header-video .custom-header-media iframe,
 .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
 height: 100%;
 left: 0;
 -o-object-fit: cover;
 object-fit: cover;
 top: 0;
 -ms-transform: none;
 -moz-transform: none;
 -webkit-transform: none;
 transform: none;
 width: 100%;
 }
}

object-fitは画像だけじゃなくて映像とかの内容物を良い感じにサイズ調整してくれる素敵プロパティですって言っても上手く伝わらないと思うので凄さは「【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する」とかでご確認ください。

凄く素敵なんですが、CSSにありがちなIEとEdgeが未対応という悲しいオシラセがありまして中々現場投下は難しめなひとなんです。それを使ってるのでアツイ！んだけど、なんでなんだろ？と思って探すと、これが採用されてる経緯もログが残っているのがまたWordPressの素晴らしさです。

#39035 (Twenty Seventeen: Header media (images and video) appear zoomed in) – WordPress Trac
https://core.trac.wordpress.org/ticket/39035

今のままだとzoomし過ぎて意図したサイズにならないよねー、ということでobject-fitを使っているらしい。ほほー。

@supportsを使ってobject-fitに対応しているブラウザだけに使ってて、それ以外は

.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
 position: fixed;
 height: auto;
 left: 50%;
 max-width: 1000%;
 min-height: 100%;
 min-width: 100%;
 min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
 width: auto;
 top: 50%;
 padding-bottom: 1px; /* Prevent header from extending beyond the footer */
 -ms-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -webkit-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);
}

としているんですねー。transform使ってるんだなあ。それになんだmax-width:1000%て。初めて知ったぞそんなハック。

しかし、てことはIEやEdgeだとちょっとズームして見えてるということか。むむむ。相変わらず足を引っ張るIEちゃんめ・・・。