ie11がお亡くなりになった後に利用可能なcss周辺

先日、コリスで紹介された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.

https://coliss.com/articles/build-websites/operation/css/less-absolute-positioning-modern-css.html

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/