@liha-css/reset

@liha-css/reset は Void Reset（全破壊型リセットCSS） を配布します。 ブラウザ標準の見た目（margin / padding / font-size / font-weight / list marker / form UI …）を ほぼすべて消し飛ばし、アプリ側でゼロから再構築する前提です。

「デザインをこだわるなら、創造し直す」思想。 ただし アクセシビリティの生命線（focus） と、Safariの事故 だけは最低限守ります。

What it does

• all: unset で ほぼすべてのUAスタイルをリセット
• :where() で詳細度を 0 にし、利用側のCSSで上書きしやすくする
• display: revert で レイアウト崩壊を防止
• html/body は “世界の床” として最低限のブロック化だけ復帰
• a11y: :focus / :focus-visible のフォーカス可視化を確保
• Safari/iOS: 勝手な文字拡大 と タップ時ハイライト を抑制
• motion: prefers-reduced-motion を尊重

Important notes (Read this)

• 見た目は全部プレーンになります
  • h1 / strong / em / ul / button などの 意味はHTMLに残る 一方で、見た目は “ただのテキスト” に寄ります。
• フォームは “見た目ゼロ”
  • appearance を戻さない方針のため、checkbox / radio / select を含め、見た目は基本的に自作前提です。
• サードパーティUIは崩れる可能性があります
  • Stripe / Maps / 埋め込み系は、reset が内部DOMまで影響する場合があります（escape hatch を用意すると運用が楽です）。

Install

pnpm add @liha-css/reset
# or npm i @liha-css/reset
# or yarn add @liha-css/reset

Usage

@layer liha.reset で定義されます。 tokens と併用する場合は、基本的に tokens → reset → app の順で読み込むのを推奨します。

import '@liha-css/reset'

CSS

@layer liha.reset {
  /* 1) 全破壊: html/body も含める */
  *:where(
      :not(
          iframe,
          canvas,
          img,
          svg,
          video,
          audio,
          dialog,
          details,
          summary,
          progress,
          meter
        )
        :not(svg *, symbol *)
    ),
  *::before,
  *::after {
    all: unset;
    display: revert;
    box-sizing: border-box;
  }

  /* 2) html/body は “世界の床” なので、床だけ戻す */
  :where(html, body) {
    display: block;
    margin: 0;
    padding: 0;
  }

  :where(html) {
    /* レイアウトの基準を安定させる */
    block-size: 100%;

    /* Safari/iOS: 勝手な文字拡大を防ぐ（事故防止） */
    -webkit-text-size-adjust: 100%;

    /* Safari/iOS: タップ時の灰色ハイライトを消す */
    -webkit-tap-highlight-color: transparent;
  }

  :where(body) {
    min-block-size: 100%;
  }

  /* 3) フォーム: 見た目はゼロ、文字だけは継承 */
  :where(input, select, textarea, button) {
    font: inherit;
    color: inherit;
  }

  /* 4) メディア */
  :where(img, video, iframe, canvas, svg) {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* 5) リストマーカーも全破壊 */
  :where(ol, ul) {
    list-style: none;
  }

  /* 5.5) table の挙動を最低限安定化 */
  :where(table) {
    border-collapse: collapse;
  }

  /* 6) a11y: Forced Colors */
  @media (forced-colors: active) {
    :where(*) {
      forced-color-adjust: auto;
    }
    :where(:focus) {
      outline: 2px solid CanvasText;
      outline-offset: 2px;
    }
  }

  /* 7) a11y: フォーカス可視化（Safariフォールバック込み） */
  :where(:focus) {
    outline: 2px solid var(--liha-color-focus-ring, currentColor);
    outline-offset: 2px;
  }
  :where(:focus:not(:focus-visible)) {
    outline: none;
  }

  /* 8) motion */
  @media (prefers-reduced-motion: reduce) {
    :where(*, *::before, *::after) {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* 9) hidden */
  [hidden] {
    display: none !important;
  }
}

Recommended pairings

• @liha-css/tokens

  • reset 後に “意味のある値” を当てるための材料（色 / radius / shadow / z-index）を提供します。

Escape hatch (optional)

サードパーティUI（Stripeなど）で「reset を当てたくない領域」がある場合は、回避用クラスを用意すると運用が楽です。

/* app側で定義する例 */
.liha-revert-scope {
  all: revert-layer;
}

Browser support

• Modern browsers only
• CSS Cascade Layers（@layer）に依存します
• Safari/iOS の最小パッチ（-webkit-text-size-adjust, -webkit-tap-highlight-color）を含みます