O hirunewani blog

Frontend Weekly 2024-09-20

Created at

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()のサポート

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

実験的な機能ですが、CursorGemini Code Assistのように、自動的にWorkspaceから必要な関連ファイルなどを抽出してコンテキストに含める機能が入りました。

https://code.visualstudio.com/updates/v1_93#_automatic-chat-participant-detection-in-chat-view-experimental

次のオプションを有効にすると利用できます。

// .vscode/settings.json
{
  "chat.experimental.detectParticipant.enabled": true,
}