コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > safari > Safari17.5で使える新機能をチェックしよう：text-wrap: balance、light-dark()、@starting-styleなど

Safari17.5で使える新機能をチェックしよう：text-wrap: balance、light-dark()、@starting-styleなど

safari css ブラウザ

iOS17.5の配信と同時にSafariも17.5にアップデートされました。 Safari17.5で使用できる新しい機能やバグフィックスをチェックしておきましょう。

引用元： WebKit Features in Safari 17.5

CSS

Safari 17.5には、text-wrap: balance、light-dark()カラー関数、@starting-styleなど、いくつかの興味深い新しいCSSの機能が含まれています。また、@importルールで機能クエリを使用できるようになりました。それぞれの機能について見ていきましょう。

text-wrap: balance

Webでは、フレキシブルなコンテナ幅、コンテンツの長さのばらつき、ブラウザ間の違いなどから、最終行に単語が1つだけ残ってしまうようなテキストの折り返しを避けるのは困難です。

かつては活版印刷でタイポグラファーがこのような望ましくない結果を手作業で避けていました。数十年にわたり、Webデベロッパーは、CSSやHTML、JavaScript、コンテンツ管理システムで様々な対処方法を試してきましたが、いずれも万全とは言えません。これらの試みはいつも中途半端で手間がかかり、脆弱でした。

このような課題を解決するため、CSS Working Groupは、テキストの折り返し方法を変更するための3つの新しいオプションを定義しました。text-wrapを使って、デフォルトのラッピングからほかのスタイルに切り替えることができます。WebKitでは、Safari 17.5からこれらの新しいオプションの1つであるbalanceをサポートしています。

text-wrap: balanceルールは、ブラウザにテキストの行を「バランス良く」並べ、すべての行の長さをほぼ同じにするように指示します。

text-wrap: balanceを使った場合、テキストがどこで折り返されるかはブラウザごとに多少異なる可能性があります。CSS Text level 4 Web標準では、テキストのバランス調整アルゴリズムはブラウザエンジンチームが自由に決めることができるようになっています。

テキストの複数行をカウントし、バランスを取るのは計算コストが高くなるため、標準ではブラウザがバランスを取る行数に制限を設けられます。Chromiumブラウザは6行以下、Firefoxは10行以下をバランス調整し、Safari/WebKitでは行数に制限がありません。

現時点でSafariは、フロートや初期の文字の周りにあるテキストをバランス調整しません。また、タブや柔軟な分割記号がある場合はバランサーを無効にします。

text-wrapのショートハンドとロングハンド

text-wrapプロパティはショートハンドで、text-wrap-styleとtext-wrap-modeの2つのロングハンドプロパティを含んでいます。

text-wrap-modeプロパティは、テキストを折り返すかどうかを指定するメカニズムを提供します。

text-wrap-mode: wrap; /* 初期値 */
text-wrap-mode: nowrap;

wrap値で折り返しを有効化し、nowrap値で無効化します。これはwhite-spaceの値と同じです(text-wrap-modeは、white-spaceの新しいロングハンドプロパティです)。WebKitではSafari 17.4からtext-wrap-mode: wrapとnowrapをサポートしています。

text-wrap-styleプロパティは、折り返しの「スタイル」を選択します。初期値のautoは、これまで通りのテキストの折り返し方法を要求します。または、別の折り返しスタイルに切り替えるための値を選ぶこともできます。

WebKitのSafari 17.5では、text-wrap-style: balance、stable、autoがサポートされます。

text-wrap-style: auto; /* 初期値 */
text-wrap-style: balance;

もちろん、text-wrapショートハンドはtext-wrap-modeとtext-wrap-styleを組み合わせて宣言する方法です。text-wrap: balanceと書くのはtext-wrap: wrap balanceと同じ意味で、「テキストを折り返してほしいが、折り返す際はバランスを取ってほしい」ということです。

最終的にはプロパティは3つ、値は6つサポートされる予定です。まだどのブラウザもすべてをサポートしていないので、text-wrap、text-wrap-mode、text-wrap-styleプロパティと、balance、pretty、stable、auto、wrap、nowrap値のサポート状況を確認することをお勧めします。

ブラウザがサポートしていない場合、balance、pretty、stableの値はautoにフォールバックするため、プログレッシブエンハンスメントは簡単です。今日からこれらの値を使うことができます。サポートのないユーザーには単にautoでラップされたテキストが表示されるだけです。一方、サポートするユーザーには余分な磨きがかかります。

ダークモードと light-dark() カラー関数

ユーザーはウェブサイトやWebアプリでダークモードを期待するようになってきました。Safari 12.1以降、prefers-color-schemeメディアクエリを使って、次のようにコードを書くことができます。

body {
  background: white;
  color: black;
}
@media (prefers-color-scheme: dark) {
  body {
    background: darkslategray;
    color: white;
  }
}

または、変数を使って、ライトモードとダークモードの両方の色を一度に定義し、どこでも使えるようにすることもできます。

:root {
  --background: white;
  --text: black;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: darkslategray;
    --text: white;
  }
}
body {
  background: var(--background);
  color: var(--text);
}

さらに新しいオプションとして、light-dark()関数が登場しました。ダークモードのための色の定義が簡単になります。

まず、color-schemeプロパティを使って、ライトモードとダークモードの両方のデザインを提供していることをブラウザに知らせます。これにより、ブラウザはダークモードでフォームコントロールなどのユーザーエージェントスタイルをデフォルトでスイッチできるようになります。また、light-dark()を正しく機能させるためにも必要です。

:root {
  color-scheme: light dark;
}

次に、色を定義するときは常にlight-dark()関数を使えば、ライトモードの色とダークモードの色を定義できます。

color: light-dark(black, white);
background-color: light-dark(white, darkslategray);

必要に応じて変数も使用できます。例えば、次のようにコードを構造化することもできます。

:root {
  color-scheme: light dark;
  --background: light-dark(black, white);
  --text: light-dark(white, darkslategray);
}
body {
  background: var(--background);
  color: var(--text);
}

light-dark()について質問があるとすれば、「この関数は色以外にも使えるのか?」ということでしょう。はい、この関数は色でしか使えません。色スキーム依存のその他のスタイルは、prefers-color-schemeメディアクエリで定義してください。

@starting-style

WebKitのSafari 17.5は@starting-styleをサポートするようになりました。これは、特定の要素の開始値を定義できるようにするものです。要素のボックスが作成または再作成されるときに、トランジションを有効にするために必要です。

.alert {
  transition: background-color 2s;
  background-color: green;
  @starting-style {
    background-color: transparent;
  }
}

上の例では、要素がドキュメントに追加されたときに、background-colorがtransparentからgreenにトランジションします。

多くの開発者は、@starting-styleとdisplay: noneの補間を組み合わせて使うことを期待しています。そのためにはWebKitもdisplayプロパティのアニメーションをサポートする必要がありますが、これはまだSafariでは実装されていません。この使用例はSafari Technology Previewで今日からテストできます。

CSSインポートのための機能クエリ

WebKitのSafari 17.5は、@importルールにsupports()構文を追加しました。これで、特定の機能がサポートされているかどうかに基づいて、条件付きでCSSファイルをインポートできるようになりました。

@import <url> supports(<feature>);

例えば、CSSネスティングがサポートされているかどうかに基づいて、異なるスタイルシートをロードすることができます。

@import "nested-styles.css" supports(selector(&));
@import "unnested-styles.css" supports(not selector(&));

またはCascade Layersがサポートされていないブラウザ向けにCSSファイルをロードすることもできます(layer()を含む@importルールは、レイヤーがサポートされていないブラウザでは自動的に無視されることに注意してください)。

@import url("reset.css") layer(reset); 
@import url("framework.css") layer(framework);
@import url("custom.css") layer(custom);

@import url("unlayered-fallback-styles.css") supports(not at-rule(@layer));

または、単に機能をテストすることもできます。ここでは、Subgridがサポートされている場合にのみ、レイアウトスタイルがロードされます。

@import url("layout.css") supports(grid-template-columns: subgrid);

WebCodecs

WebKitのSafari 17.5は、AV1ハードウェアデコーダが利用可能な場合、WebCodecsでAV1をサポートするようになりました。

WebGL

WebKitのSafari 17.5は、WebGLでEXT_conservative_depthとNV_shader_noperspective_interpolationをサポートするようになりました。

WKWebView

WKWebViewは、JavaScriptコンソールにMarketplaceKitエラーをログ出力するサポートが追加されました。これによりエラーのデバッグが容易になります。

Safari 17.5は、iOS 17.5、iPadOS 17.5、macOS Sonoma 14.5、macOS Ventura、macOS Monterey、そしてvisionOS 1.2で利用可能です。 macOS VenturaまたはmacOS Montereyをご利用の場合、macOSをアップデートせずにSafariのみをアップデートできます。macOS Venturaでは、メニューバーの > システム設定 > 一般 > ソフトウェアアップデートに進み、「更新情報...」をクリックしてください。 iPhoneやiPad、Apple Vision Proで最新版のSafariを入手するには、設定 > 一般 > ソフトウェアアップデートに進み、アップデートをタップしてください。

©コハム