CSS の `all: unset` でネイティブ要素のスタイリングを除去する

こんな経験はないでしょうか。カスタムスタイルのボタンを作りたくて、ブラウザのデフォルトを一つずつプロパティ単位で上書きしていく。border: none、background: none、padding: 0、cursor: pointer。動くには動くが、何かが間違っている気がする — ユーザーエージェントスタイルシートとモグラ叩きをしているような感覚です。

もっとクリーンなアプローチがあります。CSS の all プロパティ、特に all: unset です。本記事では、これが具体的に何をするのか、いつ使うべきか、そしてキーボードユーザーが頼りにするフォーカススタイルを含めて、何を密かに壊してしまうのかを解説します。

all: unset が CSS カスケードで実際に行うこと

all プロパティは、unicode-bidi、direction、CSS カスタムプロパティを除くすべての CSS プロパティを一度に設定するショートハンドです。MDN によれば、all: unset は各プロパティに次のルールを適用します。

• プロパティが継承されるもの(color、font-size、line-height など)であれば、親から継承します。
• プロパティが継承されないもの(display、border、background、padding など)であれば、CSS 仕様の初期値に戻ります。

これは非常に重要な区別です。all: unset はブラウザのデフォルトを復元するわけではありません。継承されないプロパティを仕様上のデフォルトにリセットします — これは同じものではありません。all: unset を当てた <button> は、素のブラウザボタンのようには見えません。display、appearance、ボーダー、パディング、フォーカスリングがすべて失われます。

all プロパティの 4 つの値

カスタム UI コンポーネントの場合、通常は all: unset が求めるものです。自分のスタイルシートの上書きを取り消しつつブラウザのデフォルトを保ちたい場合は、all: revert の方が適しています。

ボタンを正しい方法でリセットする

アクセシビリティを壊さずにネイティブ要素のスタイリングを取り除く、実用的なボタンリセットのパターンです。

.button-reset {
  all: unset;

  /* Restore safe defaults */
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;

  /* Your custom styles */
  padding: 0.5rem 1rem;
  background: #0070f3;
  color: white;
  border-radius: 4px;
}

/* Always restore focus visibility for keyboard users */
.button-reset:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 3px;
}

:focus-visible ルールは必須です。all: unset はブラウザのデフォルトフォーカスリングを取り除くため、キーボードユーザーはフォーカスがどこにあるかを示す唯一の視覚的な手掛かりを失います。:focus-visible で復元すると、可視のフォーカスインジケータをいつ表示すべきかについてのブラウザのヒューリスティクスに従い、一般的にはキーボードナビゲーション時に表示され、マウスクリック時は常にアウトラインを表示することはありません。

all: unset と appearance: none — これらは同じではない

これはよくある混乱の原因です。appearance: none はフォームコントロールのネイティブ OS レベルのレンダリング — <select> を macOS のドロップダウンや Windows のコンボボックスのように見せるプラットフォーム固有のクロム — のみを取り除きます。レイアウト、間隔、色、その他の CSS プロパティには手を加えません。

all: unset は広範な CSS カスケードリセットです。上記のわずかな例外を除き、すべてに影響します。

<select>、<input>、<textarea> などのネイティブフォームコントロールには、両方が必要になることがよくあります。

select {
  all: unset;
  appearance: none; /* Removes OS-level control rendering */
  display: block;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

select:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 2px;
}

なお、古いバージョンの Safari や iOS でクロスブラウザ対応を完全にするには、-webkit-appearance: none プレフィックスも必要な場合があります。all と appearance の両方とも、モダンブラウザでのサポートは強固です。

all: unset を使うべきでない場面

数個のプロパティだけを変更したい要素には all: unset の使用を避けてください。粗い道具です。ボタンの背景とボーダーだけを取り除きたいなら、それらのプロパティを直接ターゲットにしましょう — 予期せぬ副作用が起きにくくなります。

コンテナ要素にも使用を避けてください。flex や grid の親で display をリセットすると、レイアウトが静かに崩壊します。

まとめ

all: unset は、ボタン、リンク、フォームコントロールからネイティブ要素のスタイリングを取り除くための強力なショートカットですが、保持したいプロパティも含めてすべてをリセットします。使用後は必ず display、box-sizing、cursor、そして特に :focus-visible を復元してください。OS レベルのレンダリングを持つネイティブフォームコントロールを扱う場合は、appearance: none と組み合わせましょう。慎重に使えば、カスタム UI コンポーネントをゼロから構築する際の、モダン CSS の中で最もクリーンなツールの一つです。

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..