公開日: 2026 年 6 月 3 日
Baseline 月刊ダイジェストへようこそ。2026 年 5 月には、いくつかの新しい CSS 機能、イベント プロパティ、API の追加が Baseline Newly available になり、CSS 単位、ユーザー インタラクション プロパティ、疑似クラスが Baseline Widely available になりました。また、デベロッパー コミュニティからの重要な更新情報も公開されました。
State of CSS 2026 アンケート
ウェブ コミュニティの年次調査である State of CSS 2026 調査が開始されました。今年は、AI 支援型コーディングの時代にデベロッパーにとって最も重要な機能に焦点を当て、アンケートを洗練させることに意識的に取り組んでいます。ブラウザ ベンダーは、これらの結果を綿密にモニタリングして、エンジニアリング ロードマップの優先順位付けやデベロッパーの課題の解決に役立てています。7 月 1 日に終了する前に、ぜひご意見をお聞かせいただき、進化する CSS の状況についてご経験を共有してください。
ベースラインで新たに利用可能になった機能
このセクションの機能は、2026 年 5 月時点でコア ブラウザ セットでサポートされており、現在 Baseline で新たに利用可能になっています。
コンテナ スタイル クエリ
コンテナクエリのサイズ制限がなくなりました。スタイルクエリを使用すると、親コンテナのカスタム プロパティに基づいて要素にスタイルを適用できるようになりました。これにより、複雑なクラス構造に依存することなく、コンテンツ プレースメントに基づいてテーマやスタイルを適応させることができる、高度にモジュール化されたコンポーネントを構築できます。
詳しくは、@container の MDN リファレンス ページをご覧ください。
:open 疑似クラス
<dialog> や <details> のように開閉状態を持つ要素のスタイル設定には、以前は属性の確認やクラスの管理が必要でした。:open 疑似クラスは、これらの要素が現在開いている状態の場合にのみ一致させることで、この処理を簡素化し、よりクリーンで宣言的な CSS を実現します。
詳しくは、:open 疑似クラスの MDN ページをご覧ください。
ToggleEvent.source
Popover API を使用する場合は、状態の変化に対応することが重要です。ToggleEvent インターフェースの source プロパティは、ポップオーバーの切り替えアクションをトリガーしたコントロール要素を返します。これにより、イベントの発生元を特定し、複雑な UI 操作を調整できます。
詳しくは、ToggleEvent.source の MDN ドキュメントをご覧ください。
image-rendering 件の宿泊施設
image-rendering CSS プロパティを使用すると、画像サイズを変更する際に使用するスケーリング アルゴリズムを制御できます。これは、ぼやけた補間を避け、スケーリングをシャープでピクセル化された状態に保つことが重要なピクセルアート、低解像度の画像、QR コードに特に便利です。
使用方法については、MDN の image-rendering ページをご覧ください。
text-decoration-skip-ink: all
下線がディセンダーを通過すると、ごちゃごちゃした印象になることがあります。text-decoration-skip-ink: auto は交差する場合にのみインクをスキップしますが、all に設定すると、交差に関係なくすべてのグリフで下線がスキップされ、タイポグラフィの美しさをより細かく制御できます。
詳しくは、MDN の text-decoration-skip-ink のガイドをご覧ください。
SharedWorker
SharedWorker API は、同じオリジンの異なるウィンドウ、タブ、iframe など、複数のブラウジング コンテキストからアクセスできる専用のバックグラウンド ワーカーを提供します。これは、タブの境界を越えて状態を共有したり、接続を管理したり、バックグラウンド タスクを調整したりするのに役立ちます。
SharedWorker に関する MDN のドキュメントをご覧ください。
広く利用可能なベースライン機能
次の機能が Baseline で広く利用できるようになりました。つまり、これらの機能はプロジェクトで幅広く互換性があり、使用できるようになりました。
lh 長さの単位
lh 相対単位は、使用されている要素の計算された line-height に対応します。これにより、アイコンバッジや背景のハイライトなどの要素のサイズを、テキスト行の高さに完全に一致するように簡単に調整できます。
詳しくは、長さ単位に関する MDN リファレンスをご覧ください。
rlh 長さの単位
lh と同様に、rlh 単位は行の高さを表しますが、特にルート要素（<html>）の行の高さを表します。これにより、ローカルのフォントサイズや行の高さのオーバーライドに関係なく、ページ全体で一貫した垂直方向のリズムを確立できます。
詳しくは、長さ単位に関する MDN リファレンスをご覧ください。
Navigator.userActivation
多くのウェブ API（動画再生、ポップアップ、クリップボード アクセスなど）は、トリガーされる前にユーザー操作を必要とします。Navigator.userActivation プロパティは、ウィンドウでのユーザーの現在と過去の有効化状態に関する情報を含むオブジェクトを返します。これにより、スクリプトはユーザー操作が発生したかどうかを確認できます。
使用方法については、Navigator.userActivation の MDN ページをご覧ください。
clip-path
clip-path CSS プロパティを使用すると、要素のどの部分を表示するかを定義するクリッピング領域を作成できます。基本形状（円、楕円、多角形など）や SVG パスを使用すると、オーバーフローを非表示にすることなく、魅力的なレイアウト デザインやトランジションを作成できます。
実装の詳細については、clip-path の MDN ページをご覧ください。
:user-invalid 疑似クラス
ページが読み込まれるとすぐにスタイルが適用される :invalid とは異なり（多くの場合、UX の低下につながります）、:user-invalid 疑似クラスは、ユーザーが操作した後にのみ無効なフォーム要素に一致します。つまり、ユーザーがフィールドを離れた後にフォーム検証のフィードバックを表示できます。
詳しくは、:user-invalid の MDN ドキュメントをご覧ください。
終わりに
Baseline 関連で取り上げていないことがありましたら、お知らせください。今後のエディションで取り上げさせていただきます。Baseline に関するご質問やフィードバックがある場合は、Issue Tracker で問題を報告してください。