🚀 Escape from Twitter Bootstrap using CSS all: revert

レガシーBootstrapから新しいコンポーネントを分離する実践的デモ

📚 関連リンク

🎯 3つのスタイル状態 比較デモ

📘 Bootstrapエリア

Bootstrap 3.4.1のスタイルが適用：

これはBootstrapの.text-mutedクラスです

Bootstrap見出し

🔄 完全リセット（all: unset）

すべてのスタイルをリセット：

完全リセットエリア

ブラウザ標準スタイルも含めてすべてリセット

これはBootstrapの.text-mutedクラスです

Bootstrap見出し

🌐 ブラウザ標準（all: revert）

ブラウザデフォルトスタイルに戻す：

ブラウザ標準エリア

Bootstrapを無効化し、ブラウザ標準スタイルのみ

これはBootstrapの.text-mutedクラスです

Bootstrap見出し

🔧 技術的な仕組み

3つの手法のCSS:

1. 完全リセット（all: unset）
.reset-zone * {
    all: unset;           /* すべてのスタイルをリセット */
    display: revert;      /* displayのみブラウザデフォルトに */
    font-family: inherit; /* フォントを継承 */
}
2. ブラウザ標準に戻す（all: revert）
.browser-default-zone * {
    all: revert;          /* ブラウザのUser Agent Stylesheetに戻す */
}

各手法の効果:

📘 Bootstrap
  • Bootstrap + ブラウザ標準
  • 青いボタン、スタイル付きフォーム
  • カラフルなアラート
🔄 all: unset
  • すべてリセット
  • ボタン: 境界線なし
  • h2, h4: 普通のテキスト
  • 完全にゼロから構築
🌐 all: revert
  • ブラウザ標準のみ
  • ボタン: 3Dボタン風
  • h2, h4: 大きく太字
  • input: 薄い境界線
  • all: unset → 完全にゼロから独自スタイルを構築したい場合
  • all: revert → ブラウザ標準スタイルをベースにしたい場合