Safari 17.5リリース、CSSの新機能でテキストバランスとダークモード対応、WebCodecsとWebGLも強化

text: XEXEQ編集部

Safari 17.5に関する記事の要約
Safari 17.5リリースでバランス取れたテキストレイアウトとダークモードの色指定が簡単に
WebCodecs、WebGL、バグ修正などパフォーマンス改善にも注力
Webデザイナー必見のブラウザソフトウェアアップデートに
考察
参考サイト

Safari 17.5に関する記事の要約

Safari 17.5でCSS、WebCodecs、WebGLの新機能追加
テキストのバランス調整、ダークモード色指定、スタイル初期値設定などが可能に
AV1のハードウェアデコード、WebGL拡張のサポートなどのバグ修正・改善多数
macOS、iOS、iPadOS、visionOSの各バージョンで利用可能

Safari 17.5リリースでバランス取れたテキストレイアウトとダークモードの色指定が簡単に

WebKit for Safari 17.5は、CSSのtext-wrap: balanceによるテキストのバランス調整機能とlight-dark()関数によるダークモードの色指定機能をサポートした。text-wrap: balanceを使うと、段落内の行の長さをほぼ均等にすることができ、最終行が極端に短くなるのを防げる。^[1]

一方、light-dark()関数を使えば、ライトモードとダークモード用の色を一度に指定できるようになった。color-schemeプロパティでlight darkを宣言した上で、light-dark(white, black)のように記述するだけで済む。変数と組み合わせれば、コードをさらにシンプルにできるだろう。

また、@starting-styleによる、要素生成時のスタイル初期値設定にも対応した。transitionと併用することで、要素の出現時のアニメーション表現の幅が広がるはずだ。ただし、display: noneからのアニメーションにはまだ制限がある点には注意が必要だ。

WebCodecs、WebGL、バグ修正などパフォーマンス改善にも注力

Safari 17.5ではAV1コーデックのWebCodecsへの追加もあった。AV1ハードウェアデコーダが利用可能な環境では、動画再生の効率が大きく向上するだろう。同様にWebGLでは、いくつかの拡張機能のサポートが追加され、グラフィックスのパフォーマンスが改善されている。

加えて、アクセシビリティやアニメーション、認証、フォーム、メディア、レンダリング、Web API、Web Apps、WebRTCなど、多岐にわたる分野で22件ものバグ修正が行われており、安定性と使い勝手の向上が期待できる内容だ。

これらのアップデートはmacOS Sonoma 14.5、macOS Ventura、macOS Monterey、iOS 17.5、iPadOS 17.5、visionOS 1.2で利用可能となる。macOSではSafariのスタンドアロンアップデートも提供されるので、OSのバージョンアップを待たずに新機能を試せるのは嬉しい。

Webデザイナー必見のブラウザソフトウェアアップデートに

WebKitは長年にわたり、Webプラットフォームの発展を牽引してきた。HTML5、CSS3、ECMAScriptの先駆的実装で常にイノベーションの最前線に立ち、Webデザインとフロントエンド開発の新時代を切り開いてきており、それでいてWeb標準への高い適合性を維持しているのはさすがだ。

今回のtext-wrap: balanceやlight-dark()などのCSSの進化は、Webデザイナーに新しい表現の可能性を提供してくれる。レスポンシブデザインの時代にあって、デバイスに合わせたテキストレイアウトの最適化はますます重要になっている。ダークモード対応もユーザー体験向上に欠かせない要素だ。

パフォーマンス面でのアップデートも見逃せない。多様なメディアコンテンツを高速かつ滑らかに表示することは、Webサイトの質を大きく左右する。WebCodecsやWebGLの強化は、リッチなWebコンテンツ制作の追い風になるはずだ。Webに新しい価値を生み出すには、UI設計とエンジニアリングの両輪が必要不可欠だろう。

考察

今後Safariのアップデートによってもたらされる新機能が、Webデザインやフロントエンド開発にどのような影響を与えるかは注目すべきポイントだろう。テキストのバランス調整やダークモード対応など、UI/UXの向上につながる機能が充実してくれば、より洗練されたWebサイト制作が可能になる。一方で新しい機能の習得と実装には学習コストがつきまとう。Web制作者にはアップデートの動向を常にウォッチし、適切なタイミングで新技術を取り入れていく姿勢が求められそうだ。

また、WebCodecsやWebGLの強化は、動画コンテンツやインタラクティブ性の高いWebアプリの表現力を押し上げてくれるはずだ。今やWebサイトはただの情報発信の場ではなく、ユーザーとのエンゲージメントを生み出すプラットフォームへと進化しつつある。没入感のある演出によってユーザーの興味と関心を惹きつけ、アクションを促すようなリッチコンテンツがさらに作りやすくなるだろう。ただし、表現の幅が広がれば広がるほど、情報設計やアクセシビリティへの配慮がより重要になる点は肝に銘じておく必要がある。

Webブラウザはインターネットの窓口であり、私たちのオンライン体験を形作る重要な存在だ。役に立つ機能を取り込みながらWeb標準への準拠を維持し、セキュアで信頼できる環境を提供し続けてくれるブラウザの進化に期待したい。と同時に最新のWebテクノロジーを活用し、ユーザーにとって価値あるWebサイトを生み出していくのは、我々Web制作者の役目でもあるのだ。Safariの挑戦に触発されながら、Webの可能性を追求し続けていきたいと思う。

エンジニアとしてはサーバーサイドとクライアントサイドの両面から、Webアプリケーションの品質向上に貢献したいところだ。CSSやWebGL、WebCodecsなどのフロントエンド技術の進歩は、バックエンドの設計にも影響を与えずにはいられない。例えば、動的なコンテンツ生成やデータ通信の最適化などサーバー側の処理も巧みに組み合わせることで、シームレスなユーザー体験を実現できるだろう。Webサイトの表と裏を自在に行き来しながら、パフォーマンスとセキュリティ、メンテナンス性のバランスを取っていくのが理想だ。Safariの新機能を活用しつつ、エンジニアならではの視点でWebの未来を切り拓いていきたい。