今週（9/14〜9/20）は、前号までに予告した3つがすべて予定どおり出ました。9月14日にSafari 27、15日にFirefox 156、17日にWordPress 7.1.1です。このうちWordPress 7.1.1は、告知段階の「バグ修正のみ」から変わり、セキュリティ修正11件を含む緊急性の高い更新になりました。
読む章の目安です。WordPressサイトを1つでも持っているなら1章を最優先で。CSSを書くなら2章と3章、AIツールを使って開発しているなら4章、Firefoxの細かい変更は5章です。
WordPress 7.1.1 公開（9/17）— 未認証XSSを含む11件、旧バージョンにも修正
9月17日にWordPress 7.1.1が公開されました。セキュリティ修正11件、Coreのバグ修正17件、ブロックエディタの修正21件を含みます。公式も「セキュリティリリースなので直ちに更新を」と書いています。
出典: WordPress News — WordPress 7.1.1 Maintenance and Security Release
いちばん重いのが、段落整形を経由した未認証のストアドXSSです。 公式の表記は「paragraph formatting 経由、コメントの承認を条件とする」で、改行を段落に変換する処理（wpautop()）が絡みます。報告者はAwesome Motive, Inc.のRafie Muhammad氏。
ログインしていない相手が仕込める一方、成立にはコメントの承認が要る、という条件付きです。 とはいえ、寄せられたコメントを流し読みで承認している運用なら、条件は十分に満たされます。コメント欄を開いているサイトは優先して更新してください。
このほかに、細工したURLでテーマをインストールさせられる問題、一部テーマのヘッダー画像でのストアドXSS、REST APIのパストラバーサル、マルチサイトでネットワーク専用プラグインを有効化できる問題などが直っています。
古いバージョンにも修正が配られています。 7.0系は7.0.5、6.9系は6.9.8、6.8系は6.8.9、6.7系は6.7.8で、いずれも11件すべてが該当します。6.6系から4.7系にも順に修正版が出ていて、6.6〜5.9系は10件、5.8〜5.6系は9件が該当という形です。4.6以前はセキュリティ更新の対象外です。
前号では「7.1で入り込んだ不具合を直すメンテナンスリリース」と紹介しました。 告知段階ではバグ修正のみとされていたものが、公開時にはセキュリティ修正を含む内容になっています。告知どおりとは限らない、という例として補足しておきます。なお前号で触れたマルチサイトのユーザー削除の不具合も、この版で直っています。
💡 今すぐ試せる: 管理しているWordPressサイトを一覧にして、7.1.1（旧系列なら7.0.5・6.9.8などの該当版）になっているか順に確認する。自動更新を切っているサイトと、コメント欄を開いているサイトから先に着手する
Safari 27 公開（9/14）— ベータから25機能増えて83件
予告どおり9月14日にSafari 27が公開されました。6月のベータ時点では新機能58・修正525件でしたが、最終的に新機能83件・修正844件まで増えています。
出典: WebKit — WebKit Features for Safari 27.0 / Apple — Safari 27 Release Notes
制作で効きそうなもの:
- customizable select: 前号で紹介した
appearance: base-selectが正式に使えるように。ベータから見た目の既定値が調整され、角丸4px、タッチしやすい行の高さ、ホバー時の見え方が改善されました - スクロールアンカリング: 上に要素が挿入されても読んでいる位置がずれない
alpha()関数: 既存の色から透明度だけを差し替える（3章で詳しく）<model>要素: 3DコンテンツをHTMLの要素として置ける。iOS・iPadOS・macOSに対応- 内部の作り直し: ESモジュールローダーが新しくなり、CSS Zoomも作り直し。インラインレイアウトがサブピクセル精度になりました
前号で保留にした attr() の拡張（型付きattr）については、Safari 27.0の機能一覧に記載が見当たりませんでした。 alpha() は入りましたが、こちらは引き続き機能判定を挟む前提で使ってください。
customizable selectの既定スタイルが調整されたのは、実務では地味に効きます。 何も指定しなくてもそれなりに見える状態が出発点になるので、作り込む量が減ります。
💡 今すぐ試せる: iOS 27のSafariで自サイトのフォームを開き、select の見え方が変わっていないか確認する。独自スタイルを当てている場合は、新しい既定値との組み合わせで崩れていないかを見る
CSS alpha() が3エンジン出揃った — ブランド色1つで運用できる
Safari 27で alpha() に対応したことで、Chrome 152・Firefox 155・Safari 27と、3つのエンジンすべての安定版で使えるようになりました。 8月第2週号でChromeの新機能「Relative Alpha Colors」として紹介し、9月第1週号ではSafari待ちと書いていた機能です。なお当時は rgb(from var(--brand) r g b / 20%) という相対カラー構文で書いていましたが、alpha() は透明度だけを変える用途に絞った短い書き方で、結果は同じです。
出典: MDN — alpha() CSS function
See the Pen CSS alpha() — ブランド色1つから透明度を派生させる by BaseKENT (@basekent) on CodePen.
/* ベース色は1つだけ持つ */
:root { --brand: #6366f1; }
.notice {
background: alpha(from var(--brand) / 12%);
border: 1px solid alpha(from var(--brand) / 35%);
}従来はこう書いていました。色を1つ変えるたびに、該当する行をすべて直す必要がありました。
.notice {
background: rgba(99, 102, 241, .12);
border: 1px solid rgba(99, 102, 241, .35);
}効いてくるのは、ブランドカラーを後から変える場面です。 rgba() で数値を直書きしていると、色を1つ変えるだけで該当箇所をすべて探して直すことになります。alpha() なら --brand の1行だけです。デモでは色を選ぶと5段階の濃さと通知ボックスの背景・境界線が一斉に追従するので、挙動が分かりやすいと思います。
制作会社に渡すテーマやデザインシステムほど、この差が積み上がります。 クライアントの「やっぱり色を変えたい」に、変数1つで応えられる状態にしておけます。
💡 今すぐ試せる: 手元のCSSを rgba( で検索し、同じ色の透明度違いが3箇所以上あるファイルを見つける。そこを alpha(from var(--brand) / …) に置き換えると効果が分かりやすい
Safari に MCP サーバーが入った — AIエージェントがブラウザを操作する
Safari 27で開発者向けに入ったもう1つの目玉が Safari MCP server です。AIコーディングアシスタント向けのプロトコルサーバーで、エージェントにブラウザを操作させて、描画結果を確認させられます。 DOM、ネットワークリクエスト、スクリーンショット、コンソール出力にアクセスできると説明されています。
出典: WebKit — WebKit Features for Safari 27.0 / 9to5Mac — What’s new with Safari 27 for developers, including MCP support
9月第1週号で、WebflowがエージェントにコードをさわらせるSourceを出し、FigmaがMCPを更新したと書きました。そこにブラウザベンダーが加わった形です。 作るツール、デザインツール、そして確認するブラウザまで、エージェントから操作される口が揃ってきています。
実務で効くのは「直したつもり」の確認です。 AIに修正させたあと、実際のSafariでどう見えているかを人間がいちいち開いて確かめていた部分を、エージェント側に渡せます。とくにSafari固有の表示崩れは、手元にiPhoneやMacがないと確認しづらい領域でした。
ただし、エージェントにブラウザを操作させるということは、ログイン状態や個人の閲覧環境にも触れる可能性があるということです。 検証用のプロファイルを分ける、本番の管理画面につないだまま触らせない、といった線引きは最初に決めておいた方がいいと思います。
💡 今すぐ試せる: 普段使っているAIコーディングツールがMCPに対応しているなら、Safari MCPサーバーをつないで、簡単なページの表示確認を1回やらせてみる。検証用のプロファイルで試すこと
Firefox 156 公開（9/15）— 2週間サイクルの2回目
Firefox 156が9月15日に公開されました。前号で触れた2週間リリースサイクルの2回目にあたります。大きな新機能というより、細かい修正が中心の回です。
出典: MDN — Firefox 156 release notes for developers
- スコープ付きカスタム要素レジストリ（実験的機能）: シャドウルートごとに独自のカスタム要素を定義でき、グローバルの定義と名前がぶつからない。既定で有効なのはNightlyのみで、安定版ではまだ試せません
- 開発ツール: インスペクタのビューポート表示が、拡大率や高精細ディスプレイでも実寸を丸めずに出るように。3世代前までの古いFirefoxにリモート接続できるようになりました
- SVGの修正:
tspanを対象にしたイベントのoffsetX/offsetYが、いちばん外側のSVG要素を基準に測られるよう修正
2週間サイクルになって最初に感じるのは、1回あたりの内容が軽くなったことです。 追いかける側としてはむしろ楽で、「今回は自分に関係なし」と判断して飛ばせる回が増えます。バージョン番号で管理せず機能判定で書く、という前号の話とあわせて、更新のたびに身構えなくていい体制にしておくのが良さそうです。
💡 今すぐ試せる: Web Componentsを使っている案件があるなら、スコープ付きレジストリで名前の衝突を避けられないか、Firefox Nightlyで試してみる
今週のひとこと
予告した3つが予定どおり出て、そのうち1つが緊急更新に化けた週でした。告知の時点では「バグ修正だけ」と言われていたものが、公開時にはセキュリティ修正入りになる。更新の予定は立てておくとしても、中身は出たときに読み直す必要がある、ということだと思います。まずはWordPressの更新から、今日中にどうぞ。来週は9月22日（火）にChrome 154、29日（火）にFirefox 157が控えています。
