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

先日、コリスで紹介されたcssプロパティのaspect-ratio（ie11以外のモダンブラウザで利用可）に感動して、ie11がお亡くなりになってから利用できる他のcss周辺技術が気になり調査してみた。

#### aspect-ratio
下記のように記述するだけで、縦横比が16:9のレイアウトが作成可能

```css
width: 100%;
aspect-ratio: 16 / 9;
```

aspect-ratioを利用しない場合は、以下のように、beforeにpadding-top: 56.25%;を指定し、親や子の要素にpositionを設定するという面倒な対応をしないといけない

```css
.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引数で指定します。わかりにくいですね。


```css
width: 50%;
max-width: 500px;
↓
width: min(50%, 500px); /* 第2引数がmax-widthの値 */
```

同じ様に、**max**を利用すると、下記のように置換可能

```css
width: 100%;
min-width: 1280px;
↓
width: max(100%, 1280px); /* 第2引数がmin-widthの値 */
```

min と max を合体させたようなものが**clamp**

```css
width: clamp(500px, 100%, 1280px); /* min-width, width, max-widthを1行で指定可能 */
```

#### object-fit
画像の縦横比を要素に併せて伸縮する指定。ブラウザ幅を拡縮しても維持可能
これがあると、imgタグのwidthやheightの調整がかなり楽。
object-fit: cover;が特に良い。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="myPZwN" data-user="dudleystorey" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/dudleystorey/pen/myPZwN">
  CSS object-fit </a> by Dudley Storey (<a href="https://codepen.io/dudleystorey">@dudleystorey</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

↓参考リンク
https://webdesignday.jp/inspiration/technique/css/7976/

#### mix-blend-mode
要素の重ねた時の見え方を指定するプロパティ
https://ics.media/entry/7258/

驚くべきなのは、mix-blend-mode: multiply;
白背景の画像を透過可能
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYxyMxe" data-user="Pulp_Kobayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Pulp_Kobayashi/pen/vYxyMxe">
  jpg-LOGO mix-blend-mode multiply</a> by Kobayashi (<a href="https://codepen.io/Pulp_Kobayashi">@Pulp_Kobayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
#### backdrop-filter
画像に対して、ぼかしやグレースケール等といったフィルターをcssで実装可能
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNZYOPG" data-user="Pulp_Kobayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Pulp_Kobayashi/pen/oNZYOPG">
  Image filter backdrop-filter</a> by Kobayashi (<a href="https://codepen.io/Pulp_Kobayashi">@Pulp_Kobayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### clip-path
要素の形状を自由に変形させる事が可能
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="wBKPOm" data-user="chriscoyier" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/chriscoyier/pen/wBKPOm">
  clip-path examples</a> by Chris Coyier  (<a href="https://codepen.io/chriscoyier">@chriscoyier</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

clip-pathの各種図形の参考
https://bennettfeely.com/clippy/

#### scroll-snap-type, scroll-snap-align
cssだけでカルーセルを実装可能なcssプロパティ
overflow-x: scroll; よりもスライドした時にしっかり要素で止まる感じがいい
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WNGqXWQ" data-user="Pulp_Kobayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Pulp_Kobayashi/pen/WNGqXWQ">
  CSS Carousel</a> by Kobayashi (<a href="https://codepen.io/Pulp_Kobayashi">@Pulp_Kobayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://ishadeed.com/article/css-scroll-snap/

```css
.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行必要

```css
display: grid;
place-items: center;
```

position: absoluteが必要な要素を重ねるレイアウトもdisplay: gridがあれば、実現可能
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="QWgpPBM" data-user="shadeed" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/shadeed/pen/QWgpPBM">
  Less absolute - Card</a> by Ahmad Shadeed (<a href="https://codepen.io/shadeed">@shadeed</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
https://coliss.com/articles/build-websites/operation/css/less-absolute-positioning-modern-css.html

#### position: sticky;
jsのscroll系ライブラリを利用しないと実装できないようなスクロール後に吸着する様な実装が可能
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="xxqRoGm" data-user="Pulp_Kobayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Pulp_Kobayashi/pen/xxqRoGm">
  Heading Follow position sticky</a> by Kobayashi (<a href="https://codepen.io/Pulp_Kobayashi">@Pulp_Kobayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 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/