- Baselineについて
- Newly Available 2024
- モダンなHTML / CSS / JavaScript
- HTML
- CSS
- JavaScript
主要なブラウザが共通してサポートしているWeb技術の基準
- Widely Available: 広く利用可能（2年半以上すべての主要ブラウザで利用可能）
- Newly Available: 新しく利用可能（最新バージョンのブラウザで利用可能）
- Limited Available: 制限付き利用可能（一部のブラウザでのみ利用可能）
Mozilla Developer Network (MDN)
- Popover API: JavaScriptを使わないポップオーバー
- scrollbar-gutter: スクロールのガタツキを防止
- vertical-rl: 縦書きがサポート
- @page: ページの印刷時のスタイルを設定
- Lazy loading: 画像の遅延読み込み
- Dialog: モーダルウィンドウの実装
- role属性・aria属性（WAI-ARIA）:スクリーンリーダーなどの支援技術
- role属性: 要素の「役割」や「意味」
- aria属性: 要素の「状態」や「関係」
- CSS ネスト - セレクタを入れ子構造で記述（Sassのような書き方）
- コンテナクエリ - 親要素のサイズに基づくレスポンシブデザイン
- CSS Grid（サブグリッド） - ネストされたグリッドが親グリッドのトラックを継承
- 親要素セレクタ (:has) - 子要素に基づいて親要素を選択
- カスケードレイヤー (@layer) - スタイルシートの優先順位を明示的に制御
- スコープ機能 (@scope) - スタイルの適用範囲を明示的に制限
- aspect-ratio
- TIPS的内容
- @media (min-width: 768px) & range記法
- margin-inlineで中央寄せをシンプルに
- hover判定はany-hoverが常識
- 100vmaxでボタンを常にフルラウンドに
- 中央寄せ要素を横に突き抜けさせるテクニック
- 画像や動画のトリミングはobject-fitで
- 高さ指定は100vhではなく100svh
- Reactは依然強いが、挙動が重くて勢いは横ばい
- Svelte / Solid.js / Qwik など高速・軽量フレームワークの台頭
- No-SPA / No-JS の再評価 > htmx / Alpine の台頭
- ブラウザ標準の進化（Web標準がReactの領域を侵食）
- 「バックエンド主導 × フロント最小化」への回帰
| ライブラリ | 主流度 | 話題性 | 特徴 |
|---|---|---|---|
| htmx | ★★★★★ | ★★★★★ | HTMLでAjaxやUI操作。No-SPAの牽引役 |
| Alpine.js | ★★★★★ | ★★★★☆ | 小さなVue。HTML属性で状態管理 |
| Unpoly | ★★★☆☆ | ★★★★☆ | htmx系の強化版フレームワーク |