新しいCSSを見つけても、古いブラウザが気になって数年寝かせる。そんな機能を見直す目安になるのが、Baselineの「Widely available」です。
Baselineでは、主要ブラウザの最新版で相互運用できるようになった時点をNewly availableとします。そこから30か月が経過するとWidely availableです。2026年にNewly availableになったほうの機能は、2026年に主要ブラウザで使えるようになったCSS 5選で紹介しました。
今回は2026年にWidely availableへ移った機能から、フォーム、余白、図形、検索領域で使いやすい4つを見ていきます。
Widely availableでも「すべての古いブラウザ対応」ではない
Widely availableは、主要ブラウザで長期間使えるようになった目安です。Newly availableよりは導入しやすい一方、「どんな古い端末でも動く」という保証ではありません。
Baselineの表示は、次のように読みます。
| 状態 | どう読むか |
|---|---|
| Newly available | 主要ブラウザの最新版で対応がそろった |
| Widely available | 対応がそろってから30か月以上がたった |
| Limited availability | 主要ブラウザの一部に未対応がある |
社内端末や特殊なWebViewなど、対象ブラウザが決まっている案件では個別の互換性確認が必要です。それでも「そろそろ毎回ポリフィルを前提にしなくてよい機能」を探すときは、Newly availableより判断しやすくなります。
1. :user-invalidなら、触る前から赤くしなくてよい
フォームの入力エラー表示には:invalidがあります。ただし、ページを開いた直後の必須項目まで不正扱いになり、まだ何もしていないのに赤枠が並ぶことがあります。
:user-invalidは、ユーザーがフォームを操作したあと、不正な状態になった要素を対象にします。
input:user-invalid {
border-color: #c62828;
}:user-invalidは2023年11月から主要ブラウザで使えて、2026年5月のBaseline digestでWidely availableになった機能として挙げられています。
入力前からエラーを強調するのではなく、ユーザーの操作後にフィードバックしたいフォームで使いやすい擬似クラスです。
2. lh・rlhなら「行の高さ」をそのまま長さにできる
1lhは、その要素のline-heightに相当する長さです。1rlhはルート要素の行の高さを基準にします。
たとえば、段落の下へ「1行ぶん」の余白を空けたい場合、文字サイズではなく行高を基準にできます。
.article p {
margin-block-end: 1lh;
}
.section {
padding-block: 2rlh;
}emは文字サイズが基準なので、line-heightを大きくしても余白は追従しません。lhなら「本文1行ぶん」という意図をコードへ持たせられます。
2026年5月のBaseline digestで、lhとrlhはWidely availableになりました。
3. clip-pathは「広く使える」に入ったが、日付の読み方に注意
clip-pathは、要素を円・楕円・多角形などの形で切り抜くプロパティです。
.avatar {
clip-path: circle(50%);
}
.hero-shape {
clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}2026年5月のweb.devのBaseline digestでは、clip-pathがWidely availableへ移ったWeb機能として掲載されています。
ここは日付の読み方に注意が必要です。MDNのclip-pathプロパティページ自体は「主要ブラウザで2020年1月から利用可能」としています。つまり、clip-pathというプロパティが2026年になって初めて広く動くようになった、という意味ではありません。
もう一つ、clip-pathで変わるのは表示される領域だけです。斜めの形に合わせて周囲の文章が回り込んだり、文字が切り抜き部分を避けて再配置されたりはしません。長文が入るバナーなら、背景だけを別の要素へ分けるほうが調整しやすい場合もあります。
月報が示しているのは、clip-pathという機能グループがWidely availableになったということです。このグループには、基本形状、path()、HTML・SVG要素への適用、SVGのclipPath関連などが含まれます。
ここから「clip-pathへ指定できる新しい関数や値も、すべて同じ対応状況」とは判断できません。たとえばshape()やxywh()、外部SVGの参照まで、今回の分類だけを根拠に対応済みとするのは避けます。実務では「使いたい値や構文が対象ブラウザで動くか」を確認するほうが確実です。
4. search要素で検索・絞り込みの領域を表せる
<search>は、サイト内検索や絞り込みUIなど、検索・フィルタ操作のまとまりを表すHTML要素です。
<search>
<form action="/search/">
<label for="q">サイト内検索</label>
<input id="q" name="q" type="search">
<button type="submit">検索</button>
</form>
</search>これまで<div role="search">で表していた領域を、HTMLの要素として書けます。<search>は2023年10月から主要ブラウザで使えて、2026年4月のBaseline digestでWidely availableになりました。
検索フォームだけでなく、一覧を絞り込むコントロール群にも使えます。ただし、ページ内の検索・フィルタに関係しない一般的なフォームを何でも<search>へ入れる要素ではありません。
使うか迷っていた機能を、もう一度見直す目安にする
Widely availableになったからといって、既存コードを機械的に置き換える必要はありません。今の実装が安定しているなら、そのままで大丈夫です。
一方で、新しく作るフォームなら:user-invalid、行高に連動する余白ならlh、検索領域なら<search>というように、「以前は互換性が気になって避けていた選択肢」を見直す材料にはなります。
Baselineは採用判断そのものではなく、ブラウザ対応を調べ始める位置を分かりやすくする目安として使うとよさそうです。
