CSS
CSS3

珍しいCSSプロパティたち

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

紹介するCSSプロパティ

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;
}

上記のように、textarearesize: 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;


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