知っておくべきCSSプロパティー

#カスタムプロパティ (--*): CSS 変数

前はCSS変数なんてなくて変数をつけたい時はSCSS, SASSなどでつけるしかなかったですが、
今は `--global--color-primary` のように、頭に `--` 接頭辞がつけられたプロパティはカスタムプロパティを表し、 var 関数を使用して他の宣言の中で使用することができる値を持ちます。

カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。

###SCSSの場合
```
$global--color-primary: #c6538c;

a {
  color: #global--color-primary;
}

```

###CSS変数を利用する場合
```
:root {
	--global--color-primary: #28303d;
}

a {
	color: var(--global--color-primary);
}
```

###例

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="ramukun" data-slug-hash="qBrxEKP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="カスタムプロパティー">
  <span>See the Pen <a href="https://codepen.io/ramukun/pen/qBrxEKP">
  カスタムプロパティー</a> by Lam Minh (<a href="https://codepen.io/ramukun">@ramukun</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

参考：https://developer.mozilla.org/ja/docs/Web/CSS/--*

------

#content-visibility

`content-visibility`はlazyloadのような動きですが、画像だけではなくて、HTML要素にも使えますのでページの読み込みが高速になります。

```
content-visibility: auto;
```

`visible`や`hidden`のバリューがありますが、lazyloadみたいな動きはautoを設定します。
コンテンツがviewportに入る時に読み込みが始まって、表示されます。

heightがない場合、`contain-intrinsic-size`で想定のサイズが指定できます。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="ramukun" data-slug-hash="YzZePBj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="content-visibility">
  <span>See the Pen <a href="https://codepen.io/ramukun/pen/YzZePBj">
  content-visibility</a> by Lam Minh (<a href="https://codepen.io/ramukun">@ramukun</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

*サポートするブラウザーはChrome, Edge, Operaしかないですが、期待できますね。

------

#Scroll Snap

`scroll-snap-type` は画面をスクロールしてコンテンツがviewportに入るときにコンテンツが画面の上側や左側にsnapします。
イメージはパララックスみたいな動きです。

snap方向はいくつあります。

* `x` : 横のスクロール
* `y` : 縦のスクロール
* `both` : x, yのスクロール
* `mandatory` : width、heightの半分ぐらい過ぎたらsnapされる
* `proximity` : コンテンツの 3分の１くらいスクロールしたらsnapされる


<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="maxakohler" data-slug-hash="ZjrOpx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Scroll-snap-type &amp;quot;Mandatory&amp;quot; vs &amp;quot;Proximity&amp;quot;">
  <span>See the Pen <a href="https://codepen.io/maxakohler/pen/ZjrOpx">
  Scroll-snap-type &quot;Mandatory&quot; vs &quot;Proximity&quot;</a> by Max Kohler (<a href="https://codepen.io/maxakohler">@maxakohler</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

参考： https://css-tricks.com/practical-css-scroll-snapping/

------

# :is & :where

最後は :is と :whereを話したいですね。

CSSは下記の書き方があります。

```
.main a:hover,
.sidebar a:hover,
.site-footer a:hover {
	/* markup goes here */
}
```
`:is`を使えばリスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。

```
:is(.main, .sidebar, .site-footer) a:hover {
	/* markup goes here */
}
```
`:where`も同様

```
:where(.main, .sidebar, .site-footer) a:hover {
	/* markup goes here */
}
```

`:is`と`:where`の違いは`:is`の方が優先度が高いそうです。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="ramukun" data-slug-hash="RwpQWgG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title=":isと:whereの違い">
  <span>See the Pen <a href="https://codepen.io/ramukun/pen/RwpQWgG">
  :isと:whereの違い</a> by Lam Minh (<a href="https://codepen.io/ramukun">@ramukun</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

------

#終わりに
複雑コードやライブラリを使わなくてもCSSだけでパララックスが実装できそうですね。
CSSの進化を楽しみにしています。
ご覧いただきありがとうございました。