カスタムプロパティ (--*): 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);
}

例

See the Pen カスタムプロパティー by Lam Minh (@ramukun) on CodePen.

参考：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で想定のサイズが指定できます。

See the Pen content-visibility by Lam Minh (@ramukun) on CodePen.

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

Scroll Snap

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

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

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

See the Pen Scroll-snap-type "Mandatory" vs "Proximity" by Max Kohler (@maxakohler) on CodePen.

参考： 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の方が優先度が高いそうです。

See the Pen :isと:whereの違い by Lam Minh (@ramukun) on CodePen.

終わりに

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

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