Frontend Weekly 2024-09-20
Safari v18のDistration ControlやESLint v8.xのEOLなどについて紹介する。
Safari 18.0
Safari 18.0がリリースされました。
https://webkit.org/blog/15865/webkit-features-in-safari-18-0/
Distraction Control
広告など気をそらすバナーやポップアップをユーザーが自分で選択して非表示に出来る機能が追加されました。一度非表示にした要素は、リロードしても消えたままになります。
ただし実際に試すと次の問題があるように思いました。
- ポップアップが表示されている際に背後をスクロール出来ないように制御しているサイトでは、非表示にした後、操作が出来なくなる。
- 動的に内容が変更されるコンテンツでは、要素の判定を上手く出来ない場合があり、再読み込み時にコンテンツが表示されてしまう。
iPhone Mirroring and remote inspection
macOS SequoiaのiPhone MirroringとSafariのremote inspectrionを組み合わせることで、iPhoneで表示されているサイトを、Macの画面上のみでデバックすることが可能になります。
https://developer.apple.com/documentation/safari-developer-tools/inspecting-ios
Others
その他の変更や機能追加をいくつかピックアップして紹介します。 以下でブラウザの利用可能状況について言及する場合、Chrome/Edge/Firefox/Safariに限定した話です。
- View Transitions APIのサポート
- Firefoxでは利用不可
<input type=checkbox switch>
のサポート- Safariのみ利用可能
- カスタムプロパティに対するContainer Style Queriesのサポート
- Firefoxでは利用不可
display
プロパティのtransiton animationのサポート- Firefoxは部分的サポート
backdrop-filter
プロパティの-webkit-
プレフィックスが不要にcontent-visibility
プロパティのサポート- Firefoxは部分的サポート
- 正規表現のvフラグのサポート
- URL.parse()のサポート
- Chromeなども今年サポートを行い、全モダンブラウザで利用可能
- ref: https://blog.jxck.io/entries/2024-06-14/url.parse.html
ESLint v8.x EOL
ESLint v8.xのサポートを2024年10月5日に終了すると発表されました。
https://eslint.org/blog/2024/09/eslint-v8-eol-version-support/
ESLint v9がリリースした当初はエコシステムのFlat configや削除されたAPIへの対応があまり出来ておらず移行が困難な状況でしたが、Tracking: ESLint v9 support - eslint/eslintを見るに、現在は有名どころのライブラリは対応を完了しているようです。
Automatic chat participant detection - VSCode 1.93
実験的な機能ですが、CursorやGemini Code Assistのように、自動的にWorkspaceから必要な関連ファイルなどを抽出してコンテキストに含める機能が入りました。
次のオプションを有効にすると利用できます。
// .vscode/settings.json
{
"chat.experimental.detectParticipant.enabled": true,
}