珍しいCSSプロパティたち

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

紹介するCSSプロパティ

• will-change
• scroll-behavior
• resize
• object-fit と object-position
• appearance
• user-select
• font-feature-settings
• text-rendering
• font-smoothing
• hyphens
• pointer-events

will-change

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

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

scroll-behavior

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

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

html {
  scroll-behavior: smooth;
}

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

resize

ユーザが要素の大きさを変更できるようになります。
textarea要素の挙動を想像していただくと、分かりやすいかと思います。

none

リサイズを許可しません。

both

水平・垂直方向のリサイズを許可します。

horizontal

水平方向のリサイズを許可します。

vertical

垂直方向のリサイズを許可します。

__注意:__ `overflow`プロパティに`visible`以外を指定しないとリサイズできません。

textarea {
  width: 400px;
  height: 300px;
  resize: none;
}

上記のように、textareaにresize: none;を指定すると、リサイズできないテキストエリアになります。

object-fit と object-position

object-fit

インライン置換要素に、親要素へのフィットの方法を指定します。

object-position

位置を指定します。

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

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 機能の構文

font-feature-settings: "palt";

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

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

text-rendering

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

font-smoothing

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

hyphens

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

U+2010 (HYPHEN)

ハードハイフン（見える改行候補文字）

U+00AD (SHY)

ソフトハイフン（見えない改行候補文字）

HTML特殊文字は ­

pointer-events

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

おまけ

便利な値、関数たち

vw / vh / vmax / vmin

viewportに対しての割合 vwは幅、vhは高さです。vmaxは幅と高さの大きい方、vminは小さい方になります。

width: 80vmin;
height: 80vmin; /* 正方形になります */

rem

root（html要素）に対してのem

font-size: 1.2rem;

calc

括弧内で単位を跨ぐ計算をしてくれます。 calc内で更に括弧計算する場合には、calcの文字は要りません。

width: calc(100% - 200px);
height: calc((100% - 40px) / 2);

currentColor

colorプロパティの値を引き継ぎます。 colorに使用すると、通常の継承（inheritと同等）になります。

color: #123456;
background-color: currentColor;

!important

優先度を引き上げます。 極力使わずに済むコーディングを心掛けたいところです。

margin-left: 20px !important;

---

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