#Declarative Web Push on macOS

Declarative Web Push が macOS で利用可能になった。Service Worker 不要で Web Push 通知を実装できる。バッテリー効率とプライバシーが向上し、標準化された JSON 形式で通知を送信可能。従来の Web Push と異なり、通知表示の失敗による制限やペナルティが不要。未対応ブラウザにも後方互換性あり。

次のように Service Worker を使わずに Web Push Subscription を管理できる。

const subscription = await window.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: arrayForPublicKey,
});

通知は次のように標準化された JSON 形式が用いられる。これにより未対応ブラウザでは従来通り Service Worker で処理される

{
  // RFC 8030に由来する識別子
  "web_push": 8030,
  "notification": {
    "title": "Webkit.org — Meet Declarative Web Push",
    "lang": "en-US",
    "dir": "ltr",
    "body": "Send push notifications without JavaScript or service worker!",
    // 通知クリック時の遷移先URL
    "navigate": "https://webkit.org/blog/16535/meet-declarative-web-push/",
    "silent": false,
    "app_badge": "1"
  }
}

参考：

• RFC 8030 - Generic Event Delivery Using HTTP Push
• Meet Declarative Web Push

#Declarative Web Push のサポート

Service Worker に依存せずにプッシュ通知を管理できる機能である Declarative Web Push がサポートされた。

参考：https://webkit.org/blog/16535/meet-declarative-web-push/

#スクリプト間にスペースを追加する text-autospace

スクリプト間、例えば日本語の文章内に半角英数字などの単語が入った場合、その前後にスペースを自動的に追加する text-autospace がサポートされた。現在は Safari 18.4 以降でのみサポート。

ただし、現在の Safari の実装は仕様通りではなく明示的に指定しない限り、従来の表示であるtext-autospace: no-autospaceが適用される。有効化するには、text-autospace: normalなどの指定が必要。

仕様では初期値が normal になっており、将来的にはスクリプト間にスペースがデフォルトで挿入されるようになると思われる。

参考：https://www.w3.org/TR/css-text-4/#text-autospace-property

#details 要素のカスタマイズ

::details-content疑似要素が追加され、details要素の高度なカスタマイズが可能になった。

関連：details 要素のカスタマイズ - Chrome 131 | Frontend Weekly 2024-11-15

#clip-path での shape 関数のサポート

clip-pathでshape関数を利用することが可能になった。Chrome 135 でのサポートと同様。

関連：clip-path での shape 関数のサポート - Chrome 135 | Frontend Weekly 2025-04-04

#number input のホイールイベントを削除

<input type="number">のホイールイベント（マウスなどによるホイール操作によるイベント）が削除された。

ホイールイベントによりスクロール操作によって誤って入力が変更されるということがあり、意図的に無効化されることが多くあった。

現在、Chrome や Firefox でも削除の検討が行われている。

参考：https://github.com/whatwg/html/issues/10911

#color input の不透明度のサポート

<input type="color">の alpha 属性がサポートされた。これにより不透明度をカラーピッカーで選択できるようになった。

参考：https://html.spec.whatwg.org/multipage/input.html#color-state-(type=color)

#Iterator Helpers のサポート

イテレータにsomeやevery、filterなど配列相当の操作を可能にする多くのメソッドが追加された。 Safari 18.4 のサポートにより、ほとんどのブラウザで利用できるようになった。

参考：https://github.com/tc39/proposal-iterator-helpers

#Cross-document View Transition

ドキュメント間のビュー遷移の動作を指定するアットルール@view-transitionや、 pageswapとpagerevealなどのイベントが追加され、ドキュメント間のビュー遷移をコントロール出来るようになった。

また、遷移させる際に識別名を与える view-transition-name にautoが指定できるようになった。

#text-box

text-box-edge、text-box-trim 及び、これらのショートハンドである text-box のサポートが追加された。 要素の上部を文字列のキャップラインでトリミングするといったことが出来る。

現在は、Safari でのみ利用できる。

#Scrollbar

scrollbar-gutter と scrollbar-width のサポートが追加された。これらを利用すると、スクロールバーの余白の確保の仕方（auto、stable、both-edges など）や、スクロールバーの幅の傾向（auto、thin、none）を指定できる。

scrollbar-gutter については、次の記事が詳しい。

https://blog.ohirunewani.com/posts/scroll-bar-type/

また、文字列をターゲットにしたスクロールを可能にする text fragments の機能、及びスクロールを行う text fragments を装飾できる::target-text疑似要素のサポートも追加された。

Text Fragments の動作確認

#Promise.try

任意の関数を Promise のセマンティックスで簡単に扱えるPromise.tryがサポートされた。

Promise.try(func());

#@page

印刷時のページの大きさや余白を指定できるアットルール@pageが追加された。

次の記事が詳しい。

https://blog.ohirunewani.com/posts/css-print-style/

#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

#text-wrap: balance

text-wrap: balance がサポートされました。このプロパティを指定すると、各行が均等な長さになるように改行されるようになります。

Safari のサポートによって、ほとんどの環境で利用できるようになりました。

#light-dark()

ライトモードとダークモードの色を指定できる light-dark()関数が追加されました。これも Safari のサポートにより、ほとんどの環境で利用できるようになりました。

color-scheme: light dark;
color: light-dark(black, white);

#@starting-style

@starting-style は、トランジションさせる要素の初期状態を指定できるアットルールです。これもほとんとの環境で利用できるようになりました。

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);

  @starting-style {
    opacity: 0;
    transform: scaleX(0);
  }
}

#Exclusive accordions

Chrome 120 に続いて、details 要素の name 属性がサポートされました。同じ name 属性で複数の details 要素を紐づけることで、どれか 1 つだけを開ける UI を実装できます。

<details name="cookies">
  <summary>Chocolate chip</summary>
  Yum yum chocolate chip.
</details>
<details name="cookies">
  <summary>Snickerdoodle</summary>
   Yum yum snickerdoodle.
</details>
<details name="cookies">
  <summary>Maicenitas</summary>
   Yum yum maicenitas.
</details>
<details name="cookies">
  <summary>Sugar cookies</summary>
   Yum yum sugar cookies.
</details>

https://stackblitz.com/edit/js-bjwzi1?file=index.html

#One time code

SMS などで受信したワンタイムコードをサジェストしてくれる autocomplete 属性の one-time-code がサポートされました。

<label for="onetimecode">Enter code:</label>
<input
  name="onetimecode"
  id="onetimecode"
  type="text"
  autocomplete="one-time-code"
/>

#緩和された CSS ネスト

Chrome 120 に続いて、& や is() を使用しなくても CSS をネストした状態で記述できるようになりました。

article {
  h1 {
    font-size: 1.8rem;
  }
  p {
    font-size: 1.2rem;
  }
}

#Custom Highlight API

Custom Highlight API がサポートされました。Custom Highlight API を利用すると、ドキュメント上にある任意の文字列にスタイルを適用することが出来ます。ほとんどの環境で利用できるようになりました。

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API

#Import attributes

Chrome に続いて、Import 属性がサポートされました。これは、モジュールの import 文に型情報を追加する方法を提供します。

import json from "./foobar.json" with { type: "json" };
import("foobar.json", { with: { type: "json" } });

#Login cookies

ウェブサイトを PWA などでウェブアプリとして追加した場合に、クッキーがコピーされるようになりました。これにより追加後に再度ログインをする必要がなくなりました。