Edited at

珍しいCSSプロパティたち

More than 1 year has passed since last update.

あまり見かけない、かつ実用的な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;




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