先日、コリスで紹介されたcssプロパティのaspect-ratio（ie11以外のモダンブラウザで利用可）に感動して、ie11がお亡くなりになってから利用できる他のcss周辺技術が気になり調査してみた。
aspect-ratio
下記のように記述するだけで、縦横比が16:9のレイアウトが作成可能
width: 100%;
aspect-ratio: 16 / 9;
aspect-ratioを利用しない場合は、以下のように、beforeにpadding-top: 56.25%;を指定し、親や子の要素にpositionを設定するという面倒な対応をしないといけない
.parent {
position: relative;
width: 100%;
&:before {
content: '';
display: block;
padding-top: 56.25%; /* 16 : 9 */
}
.child {
position: absolute;
top: 0;
left: 0;
}
}
min(), max(), clamp()
便利css関数
例えば以下のようなコードをminを利用すると1行で置換可能
追記：minとmaxの認識が逆になっていました。。申し訳ありません。
↓この様な認識が正しいですね。
min('基本幅', '最大幅')
max('基本幅', '最小幅')
以下のコメントも修正しております。
minは最大幅を、maxは最小幅を第2引数で指定します。わかりにくいですね。
width: 50%;
max-width: 500px;
↓
width: min(50%, 500px); /* 第2引数がmax-widthの値 */
同じ様に、maxを利用すると、下記のように置換可能
width: 100%;
min-width: 1280px;
↓
width: max(100%, 1280px); /* 第2引数がmin-widthの値 */
min と max を合体させたようなものがclamp
width: clamp(500px, 100%, 1280px); /* min-width, width, max-widthを1行で指定可能 */
object-fit
画像の縦横比を要素に併せて伸縮する指定。ブラウザ幅を拡縮しても維持可能
これがあると、imgタグのwidthやheightの調整がかなり楽。
object-fit: cover;が特に良い。
See the Pen CSS object-fit by Dudley Storey (@dudleystorey) on CodePen.
↓参考リンク
https://webdesignday.jp/inspiration/technique/css/7976/
mix-blend-mode
要素の重ねた時の見え方を指定するプロパティ
https://ics.media/entry/7258/
驚くべきなのは、mix-blend-mode: multiply;
白背景の画像を透過可能
See the Pen
jpg-LOGO mix-blend-mode multiply by Kobayashi (@Pulp_Kobayashi)
on CodePen.
backdrop-filter
画像に対して、ぼかしやグレースケール等といったフィルターをcssで実装可能
See the Pen
Image filter backdrop-filter by Kobayashi (@Pulp_Kobayashi)
on CodePen.
clip-path
要素の形状を自由に変形させる事が可能
See the Pen
clip-path examples by Chris Coyier (@chriscoyier)
on CodePen.
clip-pathの各種図形の参考
https://bennettfeely.com/clippy/
scroll-snap-type, scroll-snap-align
cssだけでカルーセルを実装可能なcssプロパティ
overflow-x: scroll; よりもスライドした時にしっかり要素で止まる感じがいい
See the Pen
CSS Carousel by Kobayashi (@Pulp_Kobayashi)
on CodePen.
.wrap {
scroll-snap-type: x mandatory;
white-space: nowrap;
overflow-x: auto;
}
.item {
scroll-snap-align: center;
display: inline-block;
width: 40%;
white-space: normal;
}
display: grid;
基本的な使い方としては、格子状のレイアウトが組む事が可能
上下中央表示。display: flex;だと3行必要
display: grid;
place-items: center;
position: absoluteが必要な要素を重ねるレイアウトもdisplay: gridがあれば、実現可能
See the Pen
Less absolute - Card by Ahmad Shadeed (@shadeed)
on CodePen.
position: sticky;
jsのscroll系ライブラリを利用しないと実装できないようなスクロール後に吸着する様な実装が可能
See the Pen
Heading Follow position sticky by Kobayashi (@Pulp_Kobayashi)
on CodePen.
calc()内でvwが利用できる
レスポンシブで、width: calc(100vw - 30px); のような実装をした時に、
ie11のみで意味不明な挙動をしたけれどもie11がお亡くなりになったら思う存分calcを利用可能
参考
CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法
https://coliss.com/articles/build-websites/operation/css/css-ways-to-create-fixed-aspect-ratio.html
CSSの比較関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説
https://coliss.com/articles/build-websites/operation/css/css-about-min-max-clamp.html
IE終了後にWeb制作の現場で使えるHTML&CSSコード14選！おさえておきたいコードを集めてみた
https://pulpxstyle.com/ie-not-supported-css/