珍しいCSSプロパティたち

あまり見かけない、かつ実用的なCSSのプロパティをまとめました。
他プロパティに依存するプロパティは割愛します。
ブラウザ対応状況は[Can I Use](https://caniuse.com/)等でご確認ください。

## 紹介するCSSプロパティ
* [will-change](#resize)
* [scroll-behavior](#scroll-behavior)
* [resize](#resize)
* [object-fit と object-position](#object-fit-と-object-position)
* [appearance](#appearance)
* [user-select](#user-select)
* [font-feature-settings](#font-feature-settings)
* [text-rendering](#text-rendering)
* [font-smoothing](#font-smoothing)
* [hyphens](#hyphens)
* [pointer-events](#pointer-events)

## will-change
予め演算処理をさせておくプロパティです。
これから変化する スクロール位置 / 要素 / プロパティ を値に設定すると、事前に変化をブラウザに知らせる事ができます。
アニメーションのカクつきを、いくらか抑えることができるでしょう。
ただ、何にでも指定してしまうと、無駄なリソースを消費することになります。
`:hover` など、うまく事前にだけ指定できる工夫をしてください。

```css
a {
  transition: transform 0.1s;
}
a:hover {
  will-change: transform;
}
a:active {
  transform: rotate(5deg);
}
```

## scroll-behavior
ユーザが行う以外のスクロール（アンカーリンクなど）が発生したときの振る舞いを制御するプロパティです。
スクロールボックスに対して`smooth`を指定するだけでスムーススクロールが実現できます。

この記事ページで開発者ツールを開いて、以下のスタイルを追記してみてください。

```css
html {
  scroll-behavior: smooth;
}
```

ページ内リンクが滑らかに動作するはずです。モダンなブラウザなら、きっと。
もうJavaScriptで泥臭い記述をしなくて済みますね:)

## resize
ユーザが要素の大きさを変更できるようになります。
`textarea`要素の挙動を想像していただくと、分かりやすいかと思います。
<dl><dt>none</dt><dd>リサイズを許可しません。</dd>
<dt>both</dt><dd>水平・垂直方向のリサイズを許可します。</dd>
<dt>horizontal</dt><dd>水平方向のリサイズを許可します。</dd>
<dt>vertical</dt><dd>垂直方向のリサイズを許可します。</dd></dl>
__注意:__ `overflow`プロパティに`visible`以外を指定しないとリサイズできません。

```css
textarea {
  width: 400px;
  height: 300px;
  resize: none;
}
```
上記のように、`textarea`に`resize: none;`を指定すると、リサイズできないテキストエリアになります。

## object-fit と object-position
<dl>
  <dt>object-fit</dt><dd>インライン置換要素に、親要素へのフィットの方法を指定します。</dd>
  <dt>object-position</dt><dd>位置を指定します。</dd>
</dl>

例えば、次のように`background-size`, `background-position`と似た効果を得ることができます。

```css
img {
  object-fit: cover; /* 縦横比を保ちながら、親要素を埋めるようにフィットする */
  object-position: right bottom; /* オブジェクトを要素の右下に揃える */
}
```
`object-fit`には、`fill`, `cover`, `contain`, `scale-down`, `none`の値が用意されています。

## appearance
ブラウザがそれぞれ用意しているスタイル付けをします。
`appearance: button;`でボタンっぽく。
非常に多くの値があります。わさビーフでも食べながらリファレンスを見てください。
`none`を指定すると、プラットフォームの影響を受けない、プレーンな状態にすることができます。
buttonなどのform部品にスタイルを付ける場合、`appearance: none;`を最初に指定しておくと良いでしょう。

## user-select
ユーザのドラッグによる選択範囲を指定します。
値に`none`を指定すると、選択を禁止します。
選択の背景色を透明にしたいだけならば、`::selection`で背景色を指定します。

## font-feature-settings
OpenType機能の使用を制御します。
OpenType機能については、Adobeの解説記事を。
[CSS での OpenType 機能の構文](https://helpx.adobe.com/jp/typekit/using/open-type-syntax.html)

```css
font-feature-settings: "palt";
```

タグ名が4文字じゃなかったり、許可されていない文字コードを使ったりすると、このプロパティ全体が無効になります。

カーニングを行うために`palt`（プロポーショナルメトリクス）が多く使われる印象があります。
ICS MEDIAさんが高濃度な記事を公開されています。非常に読みやすいので、ぜひ。
[文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング](https://ics.media/entry/14087)

## text-rendering
テキストのレンダリングを指定します。
アンチエイリアスやカーニングを施してくれます。
値の中には、挙動が環境によって異なるものがあるため、よく調べて設定してください。
読みやすさを重視した`text-rendering: optimizeLegibility;`を指定することが多いようです。
これとは別に、カーニングのための`font-kerning`プロパティもあります。

## font-smoothing
SafariやFirefox向けのアンチエイリアス処理を指定します。
animationでフォントがピクピクする不具合は、下記で解消する可能性があります。
`font-smoothing: antialiased;`

## hyphens
どのようにハイフネーション改行を行うかをブラウザに伝えるプロパティです。
**`none`**ではハイフネーションを行いません。
**`auto`**はブラウザがよしなにします。
**`manual`**は改行候補文字のみに従ってハイフネーションを行います。

<dl>
  <dt>U+2010 (HYPHEN)</dt>
  <dd>ハードハイフン（見える改行候補文字）</dd>
  <dt>U+00AD (SHY)</dt>
  <dd>ソフトハイフン（見えない改行候補文字）</dd>
  <dd>HTML特殊文字は <code>&amp;shy;</code></dd>
</dl>

## pointer-events
マウスイベントを制御します。
値にnoneを指定すると、イベントを拾わなくなります。
マウスイベントは通過であるため、要素が奥にあれば、そちらにイベントが発生します。
`::before` / `::after` 擬似要素のマウスイベントを剥がすのに便利です。

## おまけ
便利な値、関数たち
<dl><dt>vw / vh / vmax / vmin</dt><dd>viewportに対しての割合
vwは幅、vhは高さです。vmaxは幅と高さの大きい方、vminは小さい方になります。</dd><dd>

```css
width: 80vmin;
height: 80vmin; /* 正方形になります */
```
</dd><dt>rem</dt><dd>root（html要素）に対してのem</dd><dd>

```css
font-size: 1.2rem;
```
</dd><dt>calc</dt><dd>括弧内で単位を跨ぐ計算をしてくれます。
calc内で更に括弧計算する場合には、<code>calc</code>の文字は要りません。</dd><dd>

```css
width: calc(100% - 200px);
height: calc((100% - 40px) / 2);
```
</dd><dt>currentColor</dt><dd><code>color</code>プロパティの値を引き継ぎます。
<code>color</code>に使用すると、通常の継承（<code>inherit</code>と同等）になります。</dd><dd>

```css
color: #123456;
background-color: currentColor;
```
</dd><dt>!important</dt><dd>優先度を引き上げます。
極力使わずに済むコーディングを心掛けたいところです。</dd><dd>

```css
margin-left: 20px !important;
```
</dd></dl>



---

*修正* ：『ユニバーサルセレクタ』を『ワイルドセレクタ』と誤って記載していました。ご指摘ありがとうございます。