2026 年 6 月のベースラインの月次ダイジェスト

Jeremy Wagner

公開日: 2026 年 7 月 17 日

Baseline の月刊ダイジェストへようこそ。2026 年 6 月に、field-sizing が Baseline で新たに利用可能になり、フォーム コントロールがコンテンツに合わせて自動的に調整できるようになりました。一方、デベロッパー コミュニティからの重要な更新とともに、幅広い CSS、HTML、Web API 機能が Baseline で広く利用可能になりました。

ウェブ プラットフォームのステータスに関する Baseline アラート

ウェブ機能が相互運用可能になったタイミングを簡単に把握できるようになりました。 ウェブ プラットフォームのステータス ダッシュボードの Baseline アラートを使用します。 GitHub でログインすると、機能が新たに利用可能になったときや、広く利用可能になったとき、または新しいブラウザ実装がリリースされたときに通知を受け取ることができます。通知は、毎月、毎週、または即時にメール更新やカスタム RSS フィードを送信するように構成できます。アラートの範囲を保存した検索（すべての HTML 機能など）に絞り込んだり、カスタム ニュースレターを作成したり、共有可能な機能リストを生成したり、Slack Webhook を構成してエンジニアリング チームに通知したりできます。

詳しくは、Baseline アラートの導入をご覧ください。

Baseline で新たに利用可能になった機能

このセクションの機能は、2026 年 6 月時点でコアブラウザ セットでサポートされており、Baseline で新たに利用可能になりました。

field-sizing

field-sizing CSS プロパティを使用すると、従来はデフォルトで固定サイズだったフォーム要素（<textarea>、<input>、<select> など）のサイズ設定動作を制御できます。field-sizing: content を使用すると、フォーム コントロールがコンテンツに合わせて自動的に拡大または縮小するため、カスタムの JavaScript 自動サイズ変更スクリプトの必要性が軽減されます。

詳しくは、field-sizing の MDN リファレンス ページをご覧ください。

Baseline で広く利用可能になった機能

次の機能が Baseline で広く利用可能になりました。つまり、プロジェクトで幅広く互換性があり、使用できるようになりました。

:has() 疑似クラス

:has() CSS 親セレクタを使用すると、子孫または後続の兄弟に基づいて要素のスタイルを設定できます。この機能的な疑似クラスを使用すると、JavaScript で DOM 構造を検査しなくても、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 パフォーマンスがブロックされるのを防ぐことができます。

実装の詳細については、 createImageBitmap の MDN ドキュメントをご覧ください。

使用方法については、easing-function の MDN リファレンスをご覧ください。

& ネスト セレクタ

& ネスト セレクタは、組み込みの 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 が有効な環境と無効な環境をターゲットにできます。

詳しくは、scripting メディア 機能の 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で問題を報告してください。