概要
CSS/JSの古い手法 と 最新ブラウザ標準 の比較一覧。 色指定、レイアウト、UI制御 など多様な分野を網羅。 モダンCSS/JS での簡潔化・効率化のポイントまとめ。 冗長なJSやSass依存 の削減が主なトレンド。 可読性・保守性向上 のための記法や新機能を紹介。
古いCSS/JS手法とモダンブラウザ標準の比較
-
ブランドカラー指定
- 古い方法: #4f46e5 などのHex値を直接指定、各色ごとに手動で調整
- モダン: oklch() で明度(L)のみ変更し、色の一貫性を維持
-
背景画像のぼかし
- 古い方法: ::before 疑似要素＋ filter: blur()、z-indexで重ね順調整
- モダン: backdrop-filter: blur() ＋半透明背景で簡単なガラス効果
-
スクロールバーのスペース制御
- 古い方法: overflow-y: scroll ＋ padding-right で手動調整
- モダン: scrollbar-gutter: stable で自動確保
-
モーダル内スクロール制御
- 古い方法: wheelイベント でスクロール無効化(JS)
- モダン: overscroll-behavior: contain でページ本体のスクロール防止
-
画像レイアウト
- 古い方法: background-image ＋ background-size/position
- モダン: imgタグ＋object-fit: cover; width,height指定
-
フォームバリデーション表示
- 古い方法: JSで blur時class付与、:invalidで色変更
- モダン: input:user-invalid や :user-valid で直接スタイル変更
-
テキストエリア自動リサイズ
- 古い方法: JSで inputイベント ごとに高さ調整
- モダン: field-sizing: content と min-height で自動拡張
-
アコーディオンの高さアニメーション
- 古い方法: height: 0 → auto でJS制御
- モダン: interpolate-size: allow-keywords で自動補間
-
スクロール位置の検知
- 古い方法: JSの scrollイベント で位置判定
- モダン: @container scroll-state() でCSSから状態検知
-
データ属性による幅制御
- 古い方法: JSで el.dataset.pct をwidthに反映
- モダン: width: attr(data-pct type(<percentage>)) でCSSのみ
-
クラス切り替え
- 古い方法: JSで classList.toggle
- モダン: if()関数 でスタイル分岐
-
Sass関数の置き換え
- 古い方法: @function で独自関数
- モダン: @function --fluid() でCSSカスタム関数
-
clip-pathの複雑な形状
- 古い方法: polygon()/path() で多点指定
- モダン: corner-shape: squircle などで簡単指定
-
IntersectionObserverのJS実装
- 古い方法: IntersectionObserver で可視判定
- モダン: content-visibility: auto で自動最適化
-
BEMやCSS Modulesのスコープ管理
- 古い方法: .card__title などの命名規則
- モダン: @scope でスコープ指定
-
カスタムプロパティのアニメーション
- 古い方法: hsl(var(--hue), …) で補間不可
- モダン: @property で型・補間・アニメ可
-
transformプロパティの個別制御
- 古い方法: translateX, rotate, scale を一括指定
- モダン: translate/rotate/scale を個別に指定・アニメ化
-
トランジション後の非表示制御
- 古い方法: JSで transitionend を監視
- モダン: transition-behavior: allow-discrete でCSSのみ
-
初期状態のアニメーション
- 古い方法: JSで requestAnimationFrame 利用
- モダン: @starting-style で初期値指定
-
ビュー遷移アニメーション
- 古い方法: Barba.jsやReact Transition GroupなどのJSライブラリ
- モダン: document.startViewTransition() と view-transition-name
-
カルーセルの実装
- 古い方法: Swiper.jsやSlickなどのライブラリ
- モダン: scroll-snap-type と scroll-snap-align でCSSのみ
-
テキストのバランス調整
- 古い方法: <br>やBalance-Text.js
- モダン: text-wrap: balance で自動整形
-
フォントの読み込み制御
- 古い方法: font-display未指定 でFOUT発生
- モダン: font-display: swap で素早い表示
-
可変フォントの指定
- 古い方法: font-weight ごとに複数ファイル
- モダン: font-weight: 100 900 で1ファイルに集約
-
ダークモード対応
- 古い方法: @media (prefers-color-scheme: dark)
- モダン: color-scheme: light dark と light-dark()
-
リセットCSSの簡略化
- 古い方法: .reset ul, .reset ol
- モダン: :where(ul, ol) で特異性低減
-
RTL対応のマージン/パディング
- 古い方法: margin-left, padding-right などを手動切替
- モダン: margin-inline-start, padding-inline-end で自動対応
-
グリッドレイアウト
- 古い方法: float/grid-column/grid-row を個別指定
- モダン: grid-template-areas で全体設計
-
サブグリッドの継承
- 古い方法: grid-template-columns を親子で複製
- モダン: subgrid で自動継承
-
ダイアログのオーバーレイ管理
- 古い方法: position: fixed; z-index で制御＋JS
- モダン: dialog::backdrop で簡単指定
-
チェックボックス・ラジオのカスタム
- 古い方法: appearance: none ＋多くのカスタムCSS
- モダン: accent-color で色指定のみ
-
見出しの一括マージン指定
- 古い方法: .card h1, .card h2, ...
- モダン: :is(h1, h2, ...) で簡潔化
-
フォーカス表示の最適化
- 古い方法: :focus で常時表示
- モダン: :focus-visible でキーボード操作時のみ
-
CSSレイヤー管理
- 古い方法: セレクタの詳細度で制御
- モダン: @layer で役割ごとに整理
-
カスタムプロパティの利用
- 古い方法: Sass変数で静的値
- モダン: var() で動的に切替
-
レスポンシブフォントサイズ
- 古い方法: @media ごとにサイズ指定
- モダン: clamp() で一括制御
-
グリッド・フレックスの間隔調整
- 古い方法: margin-right で個別指定
- モダン: gap で一括指定
-
アスペクト比の維持
- 古い方法: padding-top ハック＋position
- モダン: aspect-ratio で指定
-
ヘッダーの固定表示
- 古い方法: JSで位置判定＋class付与
- モダン: position: sticky でCSSのみ
-
スクロールアニメーション
- 古い方法: JS＋IntersectionObserver
- モダン: animation-timeline: view() でCSSのみ
-
Sassの入れ子記法
- 古い方法: Sass必須
- モダン: plain CSSでも入れ子記法可能
-
コンテナクエリ
- 古い方法: @media でビューポート判定
- モダン: @container で親要素幅に応じて切替
-
色のミックス
- 古い方法: Sassの mix関数
- モダン: color-mix() でCSSのみ
-
親要素判定
- 古い方法: JSの closest()
- モダン: :has() でCSSから親子判定
-
中央配置
- 古い方法: position: absolute; transform
- モダン: place-items: center でグリッド配置
このように、 モダンブラウザ標準 では JSやSass依存の多くの処理 が CSSのみで実現可能 となり、 保守性・可読性・パフォーマンス が大幅に向上。 最新のCSS/JS機能 を積極的に活用することで、より効率的なフロントエンド開発が可能。