CSS Baseline Tour 2026
2025年以降にBaselineになったCSSの機能と、もうすぐ使えそうな機能を、触りながら紹介します。
- STEP 1View Transitions画面の状態変化を、前後のスナップショットをつなぐアニメーションで表現するBaseline 2025
- STEP 2PopoverHTMLの属性だけで、最前面に表示されるポップオーバーを開閉するBaseline 2025
- STEP 3Custom Highlight APIDOMを変えずに、テキストの任意の範囲に色や下線を付けるBaseline 2026
- STEP 4Container style queries親要素のカスタムプロパティの値に応じて、子要素のスタイルを切り替えるBaseline 2026
- STEP 5field-sizing入力欄の大きさを、入力内容に合わせて自動で伸び縮みさせるBaseline 2026
- STEP 6text-autospace和文と英字・数字の間に、自動で少し空きを入れる一部 Baseline 2025（normal / no-autospace）
- STEP 7text-box文字の上下にある余分な空きを削り、見た目の位置をそろえるBaseline 未達（対応: Chrome・Safari）
- STEP 8Customizable <select>select の閉じた表示と開いたときの一覧を、CSS で自由に作るBaseline 未達（対応: Chrome・Safari）
- STEP 9word-break: auto-phrase日本語の文章を、文節の区切りで改行するBaseline 未達（対応: Chrome）
- STEP 10Gap decorationsGrid や Flexbox の要素の間の隙間に、区切り線を引くBaseline 未達（対応: Chrome）
- STEP 11Grid lanes高さの違う要素を、行の区切りなしで隙間なく詰めて並べるBaseline 未達（対応: Safari）
- STEP 12Anchor positioningある要素の位置を基準に、ツールチップやメニューを CSS だけで配置するBaseline 未達（対応: Safari）
- STEP 13oklch と新しい色の関数oklch を土台に、元の色から明るさや透明度を変えた色や、読みやすい文字色を作るBaseline 2023〜2026