公開日: 2026 年 7 月 17 日
Baseline の月刊ダイジェストにようこそ。2026 年 6 月に、field-sizing が Baseline で新たに利用可能になり、フォーム コントロールがコンテンツに合わせて自動的に調整できるようになりました。一方、幅広い CSS、HTML、Web API の機能が「Baseline Widely available」ステータスに到達し、デベロッパー コミュニティからの重要な更新も行われました。
Web Platform Status のベースライン アラート
ウェブ プラットフォーム ステータス ダッシュボードのベースライン アラートを使用すると、ウェブ機能が相互運用可能になるタイミングを簡単に把握できるようになりました。GitHub でログインすると、機能が Baseline Newly available、Widely available になったり、新しいブラウザ実装を受け取ったりしたときに通知を購読できます。サブスクリプションは、毎月、毎週、または即時のスケジュールでメール更新やカスタム RSS フィードを送信するように構成できます。アラートの範囲を保存した検索（すべての HTML 機能など）に設定したり、カスタム ニュースレターを作成したり、共有可能な機能リストを生成したり、エンジニアリング チームに通知するように Slack Webhook を構成したりできます。
詳しくは、ベースライン アラートの概要をご覧ください。
ベースラインで新たに利用可能になった機能
このセクションの機能は、2026 年 6 月時点でコアブラウザ セットでサポートされており、現在 Baseline Newly available です。
field-sizing
field-sizing CSS プロパティは、従来はデフォルトで固定されたディメンションを持つ <textarea>、<input>、<select> などのフォーム要素のサイズ設定の動作を制御します。field-sizing: content フォーム コントロールはコンテンツに合わせて自動的に拡大または縮小するため、カスタム JavaScript の自動サイズ変更スクリプトの必要性が軽減されます。
詳しくは、フィールド サイズ設定に関する MDN リファレンス ページをご覧ください。
ベースラインの広く利用可能な機能
次の機能が Baseline Widely で利用可能になりました。つまり、これらの機能はプロジェクトで幅広く互換性があり、使用できるようになりました。
:has() 疑似クラス
:has() CSS 親セレクタを使用すると、子孫要素または後続の兄弟要素に基づいて要素のスタイルを設定できます。この関数型疑似クラスを使用すると、DOM 構造を検査する JavaScript を必要とせずに、CSS で直接条件付きレイアウト パターンを有効にできます。
詳しくは、:has 疑似クラスの MDN ページをご覧ください。
HTMLIFrameElement.loading
<iframe> 要素の loading プロパティを使用すると、埋め込みフレームの遅延読み込みを有効にできます。loading="lazy" を指定すると、ブラウザはビューポートの近くまでスクロールされるまでオフスクリーン iframe の読み込みを遅延させ、ネットワーク帯域幅と初期ページ読み込みのオーバーヘッドを節約します。
詳しくは、HTMLIFrameElement.loading の MDN リファレンスをご覧ください。
CanvasRenderingContext2D.reset()
2D キャンバス コンテキストの reset() メソッドは、描画コンテキストの状態をクリアします。変換、クリッピング パス、線スタイル、塗りつぶしスタイルなどのプロパティをデフォルト値にリセットします。これにより、手動でプロパティをクリーンアップしなくても、キャンバス コンテキストをクリーンに再利用できます。
詳しくは、CanvasRenderingContext2D.reset の MDN ドキュメントをご覧ください。
cap 長さの単位
cap フォント相対単位は、要素のフォントの公称大文字の高さに対応します。大文字の高さに相対的に要素を配置してサイズを設定できるため、正確なタイポグラフィ レイアウトが可能になります。
詳しくは、長さ単位に関する MDN リファレンスをご覧ください。
counter-set 件の宿泊施設
counter-set CSS プロパティは、CSS カウンタを指定された値に設定し、counter-reset と counter-increment を補完します。番号付きリスト、ドキュメントのアウトライン、カスタム カウンタ シーケンスを操作する際に制御を提供します。
詳しくは、counter-set の MDN ページをご覧ください。
createImageBitmap()
createImageBitmap() 静的メソッドは、<img>、<canvas>、Blob、ImageData などのさまざまな画像ソースから非同期ビットマップ画像を作成します。メインスレッド以外で画像をデコードするため、複雑なキャンバス グラフィックを処理する際に UI パフォーマンスがブロックされるのを回避できます。
実装の詳細については、MDN の createImageBitmap に関するドキュメントをご覧ください。
<easing-function> データ型
<easing-function> CSS データ型は、トランジションとアニメーションの数学的な変化率曲線を表します。ease-in や cubic-bezier() などの標準キーワードだけでなく、linear() などの関数もサポートしており、カスタムのバネ効果やバウンド効果を構築できます。
使用方法については、MDN の easing-function のリファレンスをご覧ください。
& ネスティング セレクタ
& ネストセレクタは、組み込みの CSS ネストを使用するときに、子ルールのセレクタを親セレクタに明示的に固定します。ネストされたホバー、フォーカス、疑似クラスの状態を定義する際に、明確さと正しい特異性ルールを確保します。
詳しくは、ネストセレクタに関する MDN ガイドをご覧ください。
rel="preload" を使用したレスポンシブ プリロード
<link rel="preload"> 要素の media 属性を使用すると、キーアセットのレスポンシブ プリロードが可能になります。rel="preload" とメディアクエリを組み合わせることで、ブラウザは読み込みライフサイクルの早い段階で、ユーザーのビューポートの幅やディスプレイの特性に一致するアセットのみをダウンロードします。
使用方法については、rel="preload" の MDN ドキュメントをご覧ください。
HTMLMediaElement.preservesPitch
<audio> 要素と <video> 要素の preservesPitch プロパティは、playbackRate の変更時にブラウザが音声のピッチを調整するかどうかを制御します。false に設定すると、メディアの再生速度を上げたり下げたりするときにピッチをシフトできます。
詳しくは、HTMLMediaElement.preservesPitch の MDN ページをご覧ください。
:dir() 疑似クラス
:dir() CSS 疑似クラスは、テキストの方向性（ltr や rtl など）に基づいて要素を照合し、dir などの HTML 属性から継承された方向や、計算されたテキスト コンテキストを照合します。
詳しくは、:dir 疑似クラスの MDN ページをご覧ください。
pow() 数学関数
pow() CSS 関数は、CSS 宣言内で直接べき乗値を計算し、基数を指数（pow(2, 3) など）で累乗します。これにより、レスポンシブ スケーリングと数学的なグリッド関係が簡素化されます。
詳しくは、pow 関数の MDN リファレンスをご覧ください。
CSS mask プロパティ
mask CSS ショートハンド プロパティは、画像またはグラデーションをクリッピング レイヤとして使用して、要素の一部を非表示にします。mask-image、mask-position、mask-repeat などのサブプロパティを組み合わせて、複雑なビジュアル マスク効果を作成します。
詳しくは、mask プロパティに関する MDN ページをご覧ください。
@media (scripting)
scripting メディア機能は、ブラウザ コンテキストでクライアントサイド スクリプト（JavaScript など）が有効になっていて使用可能かどうかをテストします。これにより、プログレッシブ エンハンスメント スタイルで、アクティブな JavaScript がある環境とない環境をターゲットにできます。
詳しくは、スクリプト メディア機能に関する MDN リファレンスをご覧ください。
URL.canParse()
URL.canParse() 静的メソッドは、例外をスローせずに、指定された文字列が有効で解析可能な URL（オプションのベース URL を含む）であるかどうかを確認します。これにより、URL オブジェクトをインスタンス化する前に、実行時の URL 検証を簡素化できます。
実装の詳細については、URL.canParse に関する MDN ドキュメントをご覧ください。
Storage Access API
Storage Access API は、サードパーティの <iframe> に埋め込まれたクロスサイト コンテンツがパーティション分割されていない Cookie とストレージへのアクセスをリクエストするためのメカニズムを提供し、ドメイン境界を越えた認証とステートフルなインタラクションを可能にします。
詳しくは、Storage Access API の MDN ページをご覧ください。
終わりに
Baseline 関連で取り上げていないことがありましたら、お知らせください。今後のエディションで取り上げさせていただきます。Baseline についてご質問がある場合やフィードバックをお寄せいただく場合は、Issue Tracker で問題を報告してください。