IEのいなくなった今こそ…モダンブラウザで使える便利CSSまとめ

便利なプロパティが使えるようになっているので、備忘録も兼ねてまとめておきます。


## aspect-ratio
今までは`padding-top: 56.25%;`や`position: absolute;`などでアスペクト比に応じた切り抜きを表現してきましたが、`aspect-ratio`プロパティで簡単にできるようになりました。


```css
.image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
}
```

|16:9|1:1|
|:--|:--|
|![スクリーンショット 2023-09-06 19.50.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/d93ba87b-9b11-6e09-be50-ecef0b4f4448.png)|![スクリーンショット 2023-09-06 19.51.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/e7050cc8-f400-2e3d-cd7e-80963bf50761.png)|


### ブラウザサポート状況
https://caniuse.com/?search=aspect-ratio


## margin-inline
水平方向の中央揃えをしたい時に、今までは`margin-left: auto; margin-right: auto;`などと書いていたところを`margin-inline`プロパティ一つで書くことができます。

```css
.box {
    margin-inline: auto;
}
```

![Group 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/ae87e749-1e57-29ef-ea4d-9fdfc0bc38c7.png)


### :thinking: margin-inlineとはなんぞや？
>  CSS の一括指定プロパティで、論理的なインライン方向の先頭と末尾のマージンを設定します。
https://developer.mozilla.org/ja/docs/Web/CSS/margin-inline

「論理的なインライン方向」とは、上下左右など物理的な値ではなく「字を書く方向」といった言語によって変わる向きのことです。
横書きのサイトであれば「論理的なインライン方向」とは水平方向のことです。
垂直方向は`margin-block`で指定することができます。
こちらの記事が非常にわかりやすいです！

https://zenn.dev/moneyforward/articles/margin-inline_auto

### ブラウザ対応状況
https://caniuse.com/?search=margin-inline

## place-content
`place-content`は`align-content`と`justify-content`のショートハンドです。
上下左右中央揃えにしたい時、今までは`flex`や`absolute`などを駆使していましたが、CSS Gridを使えば2行で書くことができます。

```css
.box {
    display: grid;
    place-content: center;
}
```

![Group 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/d9ef811c-7768-6dab-f2ce-c149942989f4.png)

### :thinking: `place-content: center;`と`place-items: center;`の違いはなんぞや？
place-contentは**コンテナ自体の揃え**を、place-itemsは**コンテナ内の要素の揃え**を指定します。
Gridセル内の要素も中央揃えにしたい場合はplace-itemsを利用します。
見出しを中央揃えにしたい時などに、個別で`text-align`を指定したりする必要がなくなります。

| place-content:center; | place-items:center; |
|:-:|:-:|
|![localhost_3000_ (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/ed7872d0-3537-ed05-f0e3-3751869c75b4.png)|![localhost_3000_ (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/682eb292-a042-8e7f-e683-30af3ca4c064.png)|

### ブラウザ対応状況
https://caniuse.com/?search=place-content

## コンテナクエリ @container
今までレスポンシブに見た目を変えたい時は`@media`クエリを利用していました。
`@container`クエリを使うことで、画面幅ではなくコンテンツの表示幅に応じて見た目を変えることができ、利便性がかなり高まりました！
コンポーネントベースでの開発をしている場合レスポンシブ対応が楽になりそうです。

| width > 500pxの時 | width < 500pxの時 |
|:-:|:-:|
|![スクリーンショット 2023-09-20 19.44.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/f2221bd4-1149-6963-31c9-12196aaab636.png)|![スクリーンショット 2023-09-20 19.44.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/8b36acb5-2458-8498-bfcc-1c948c620737.png)|

```html
<a className="link">
  <article class="card">
    <img src="パス" class="image" />
    <h2 class="title">タイトル</h2>
    <p class="date">日付</p>
  </article>
</a>    
```

```css
.link {
    container-type: inline-size;
}
.card {
    grid-template-columns: '1fr'
}

@container (500px < width) {
    .card {
        grid-template-columns: '120px 1fr'
    }
}
```

### ブラウザ対応状況
https://caniuse.com/?search=container

## svh
スマートフォンなど画面の高さが可変のブラウザでも「画面高さいっぱいに表示する」がCSSのみでできるようになりました！

```css
.hero {
    height: 100svh;
}
```

| vh | svh |
|:-:|:-:|
|![Group 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/e6831f5d-b65d-afc2-7f82-cdb2d9ff6c10.png)|![Group 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/15a92e08-984f-e16b-1b60-1407996eef9b.png)|

### ブラウザ対応状況
https://caniuse.com/?search=svh

## :where()
引数に受け取ったセレクタに当てはまる要素を選択できます。
whereの素晴らしい点は**詳細度を0**に保ってくれることです。例えば特定のクラス配下にスタイルを当てている時に上書きが難しい問題を解消できます。

```html
<article>
  <h2>タイトル</h2>
  <section class="content">
    メインコンテンツの<a href="#">リンク</a>
  </section>
  <aside class="content">
    サイドコンテンツの<a href="#">リンク</a>
  </aside>
  <footer class="content">
    フッターの<a href="#">リンク</a>
  </footer>
</article>
```

```css:今まで
.content a {
  color: orange;
}

/* 詳細度の問題で上書きできない… */
footer a {
  color: blue;
}
```

```css:whereを使う
:where(.content) a {
  color: orange;
}

/* whereなら上書きができる！ */
footer a {
  color: blue;
}
```

|今まで|whereを使う|
|:--|:--|
|![スクリーンショット 2023-11-15 20.24.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/4d950114-f8f5-6975-63ec-43c351311f90.png)|![スクリーンショット 2023-11-15 20.24.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/4f40d2ba-9b5c-1370-b4e9-4ded10aae29a.png)|

参考：[:where() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/:where)

### ブラウザ対応状況
https://caniuse.com/?search=where

## 終わりに
何かの参考になれば幸いです！間違いがあればぜひご指摘ください！