トップページ > Safari 27.0は機能が83に増え、customizable selectとスクロール位置の保持が入った ── 自社サイトの表示をiPhoneとMacのSafariで確認する14項目(2026年10月時点)

Safari 27.0は機能が83に増え、customizable selectとスクロール位置の保持が入った ── 自社サイトの表示をiPhoneとMacのSafariで確認する14項目(2026年10月時点)

目次
  1. 01 何が起きたか — Safari 27.0は、機能が83、修正が844になった
    1. 2026年9月17日に出た公式の記事
    2. この記事が選んだ5つ
    3. 選ばなかったもの
    4. どの端末に、いつ届くか
  2. 02 なぜ・背景 — 新しい機能より、見え方が変わる修正が多い
    1. 公式の記事は、品質を最大の機能と呼んでいる
    2. customizable selectの標準の見た目は、6月から変わった
    3. スクロール位置の保持は、Baselineに入った
    4. 5つの機能の、書き方と確かめる画面
    5. 自動で効くものと、書いて初めて効くもの
  3. 03 用語 — 5つの機能の言葉を分けて読む
    1. appearance: base-select
    2. スクロール位置の保持(scroll anchoring)
    3. sizes="auto"
    4. stretch
  4. 04 型別 — 自分のサイトがどれに当たり、何を、どの順で確かめるか
    1. 型A — フォームやselectがあるサイト
    2. 型B — 長い記事と一覧があるサイト
    3. 型C — 画像を何種類も配るサイト
    4. 型D — 自分でCSSを書いているサイト
    5. 手順1 — Safari 27で開く環境を作る
    6. 手順2 — 5種類のページを、同じ順で開く
    7. 手順3 — selectを数え、base-selectの有無を見る
    8. 手順4 — 画像が後から入る場所で、スクロールを止める
    9. 手順5 — 画像の書き方を数える
    10. 手順6 — CSSの古い指定を探す
    11. 手順7 — 利用者のSafariの割合を見る
    12. この記事が確かめていないこと
  5. 05 自分のサイトで確認するチェックリスト
    1. チェックリストの使い方
  6. 06 代替・他の選択肢 — Safari 27を、どう確かめるか
    1. 確かめ方の、比べ方
    2. Safari MCPで、エージェントにSafariを見せる
    3. 確認の道具と、これまでの記事
  7. 07 当サイトで確かめたこと
    1. 確かめた範囲と方法
    2. selectは、1ページだけだった
    3. 画像は3,518本あり、srcsetもsizesも0本だった
    4. CSSは、古い指定も新しい指定も、使っていなかった
    5. 当サイトの「ブラウザ・OS 最新バージョン」の表は、Safariなど4行を「未取得」と表示していた
    6. この結果から言えることと、言えないこと
  8. 08 このテーマの、これまで
    1. Safari 27をめぐる、日付つきの記録
    2. 当サイトの、関連する過去の記事
  9. 09 この記事のまとめ

01 何が起きたか — Safari 27.0は、機能が83、修正が844になった

2026年9月17日に出た公式の記事

WebKitの公式ブログに、「WebKit Features for Safari 27.0」(訳: Safari 27.0のWebKitの機能)という記事が、2026年9月17日の日付で載っている。2026年10月6日に、この記事と、そこからリンクされている資料を開いて読んだ。冒頭の2文は、次のとおりである。

"Our Safari release notes have never been as long as they are for this version. The number of features alone rose from 58 to 83 since the first beta in June."

(訳: Safariのリリースノートが、この版ほど長かったことはない。機能の数だけで、6月の最初のベータから、58から83に増えた。)

6月8日の最初のベータの記事は、機能58、修正525、非推奨4つと書いていた。9月の記事では、修正は844になっている。公式の記事は、6月の525に60%を足した数だと説明している。

この記事が選んだ5つ

83の機能と844の修正を、全部読む必要はない。この記事は、ウェブサイトを運営する人が、自社のページで見た目や使い勝手が変わるかもしれないものを5つ選んだ。

  • customizable select(<select>の見た目を、自分のCSSで作り直せる仕組み)。
  • スクロール位置の保持(scroll anchoring)。画像や広告が上から入っても、読んでいる場所が動かない仕組み。
  • sizes="auto"。画像の大きさの指定を、ブラウザが決める書き方。
  • stretch。幅や高さを、余白を引いたうえで、親いっぱいに広げる指定。
  • -webkit-line-clampとtext-wrap: balanceを、同じ要素に書いたときの修正。

選ばなかったもの

公式の記事には、ほかにも多くの項目がある。HTMLの<model>要素、visionOSの没入型の環境、WebXR、WebAssemblyのJSPI、Service Workerの静的なルーティング、WKWebViewの追加などである。これらは、特定の用途のサイトか、アプリを作る人に向いた内容なので、この記事では扱わない。ESモジュールの読み込みの作り直しは、モジュールのスクリプトを使うサイトに関わる。詳しくは、公式のFixing Top-Level Await in Safari(訳: SafariのTop-Level Awaitを直す)を読む。

どの端末に、いつ届くか

公式の記事は、更新の入り方を、次のように書いている。

"Plus, you can update to Safari 27.0 on macOS 26 Tahoe and macOS 15 Sequoia, separate from macOS."

(訳: さらに、macOS 26 TahoeとmacOS 15 Sequoiaでは、macOSとは別に、Safari 27.0へ更新できる。)

この前の文で、記事は、Safari 27.0がmacOS 27、iOS 27、iPadOS 27、visionOS 27に、自動で付いてくると書いている。つまり、iPhoneの利用者は、iOS 27に更新した人からSafari 27を使い始める。iOS 27に更新していない人の扱いは、確かめた範囲の記事には書かれていない。自社の利用者のうち、どれだけがSafari 27に切り替わったかは、自社のアクセスの記録で見るしかない。

Safari 27.0の83の機能のうち、サイトの運営者が確かめる5つを示す図。customizable selectは、appearance: base-selectを書いたときに効く。スクロール位置の保持は、何も書かなくても効く。sizes=autoは、srcsetと、loading=lazyを書いた画像に効く。stretchは、width: stretchなどと書いたときに効く。line-clampとtext-wrap: balanceの組み合わせは、書き足さずに、両方を書いた要素の表示が直る。下段に、機能は58から83、修正は525から844へ増えたこと、書き足さずに効くのはスクロール位置の保持と、両方を書いた要素の修正であることが書かれている。
83の機能から選んだ5つ — 「何も書かなくても効くもの」と「書いて初めて効くもの」に分かれる

02 なぜ・背景 — 新しい機能より、見え方が変わる修正が多い

公式の記事は、品質を最大の機能と呼んでいる

"The biggest feature of Safari 27.0 isn’t a feature at all. It’s the tremendous effort that went into improving the quality of existing features."

(訳: Safari 27.0のいちばん大きな機能は、機能ではない。既存の機能の品質を上げるために注がれた、大きな努力である。)

記事は、品質の改善を、互換性、土台、深さ、標準への一致、機能どうしの組み合わせの5つに分けている。この記事の5つに関わるのは、土台と組み合わせである。土台の例は、インラインのレイアウトがサブピクセルの精度で要素を置くようになったこと、CSSのzoomを作り直したことである。組み合わせの例が、この記事の5つ目に出てくる、行数の制限とtext-wrap: balanceである。

customizable selectの標準の見た目は、6月から変わった

customizable selectは、6月のベータの記事にも載っていた。9月の記事は、標準の見た目が、6月のベータから変わったと書いている。夏のあいだに、開発者がCSSを重ねたときの使い心地を考え直したためだと、説明している。新しい標準の見た目に含まれるものとして、記事は次を挙げている。

  • 影、4pxの角丸、指で押しやすい行の高さ、すっきりしたホバーの見た目。
  • 矢印とチェックマーク、グループ名の控えめな見た目。
  • ライトとダークのモード、強制カラーのモード、無効の状態への対応。

記事は、この見た目をCSSワーキンググループで議論しているとも書いている。

"Once other browsers update their implementations, we will together reach our shared commitment for all browsers to support an identically interoperable starting place."

(訳: 他のブラウザが実装を更新すれば、私たちは、すべてのブラウザが、同じように使える出発点に対応するという、共通の約束にいっしょに届く。)

この文は、他のブラウザの実装が更新されたあとの話として書かれている。つまり、細かい見た目が、ブラウザごとに少し違う期間がありうると読める。

スクロール位置の保持は、Baselineに入った

MDNのoverflow-anchorのページは、この機能を「Baseline 2026(Newly available)」と表示し、2026年9月から、最新の端末とブラウザで使えると説明している。Safari 27.0の公式の記事は、スクロール位置の保持を、開発者が何も書かなくても効くものとして紹介している。

5つの機能の、書き方と確かめる画面

機能自分で書く必要公式の記事が書いていること確かめる画面
customizable selectあり。appearance: base-selectを書く書くと、新しい標準の見た目と、新しい機能が使えるselectのある画面を、iPhoneとMacで開く
スクロール位置の保持なし。止めるときだけoverflow-anchor: none上から入った内容で、読んでいる場所が動かなくなる画像や広告が後から入る、長い画面
sizes="auto"あり。srcsetとloading="lazy"の画像に書く配置後の幅で、画像の大きさをブラウザが決める画像が並ぶ一覧と、記事の本文
stretchあり。width: stretchなどと書く余白を含めて、親いっぱいに広がる余白のある、幅いっぱいの箱
行数の制限と均等な折り返し書き足しは不要。すでに両方を書いてある要素に効くこれまでは、折り返しの均等化が効かなかった抜粋を3行で切る、カードの一覧

自動で効くものと、書いて初めて効くもの

表のとおり、5つのうち、自社のHTMLやCSSに何も書き足さなくても効くのは、スクロール位置の保持である。行数の制限と均等な折り返しの修正も、書き足しは要らないが、効くのは、-webkit-line-clampとtext-wrap: balanceを、すでに同じ要素に書いてある場合に限る。customizable select・sizes="auto"・stretchの3つは、自社のHTMLやCSSに書いて初めて使える。ただし、appearance: base-selectを書いていないselectが、画面で変わらないとまでは、公式の記事に書かれていない。実際の画面を開いて、確かめる。

03 用語 — 5つの機能の言葉を分けて読む

appearance: base-select

用語

appearance: base-select:<select>と、開いたときの一覧(::picker(select))を、自分のCSSで作り直せる状態にする指定である。公式の記事は、select, select::picker(select) { appearance: base-select }の形で書いている。<option>の中にHTMLを入れること、<selectedcontent>で、選んだ項目の見せ方を変えることも、できる。

MDNのappearanceのページは、この値の動きを、次のように説明している。一覧は、ポップアップと同じ、最前面の層に出る。そして、<select>が、ブラウザの枠の外に出ない。携帯のOSの部品も、呼び出さない。つまり、携帯のOSが用意している標準の選択画面に、切り替わらなくなると読める。MDNは、幅についても、次のように書いている。

"It is also no longer sized based on the width of the widest <option>."

(訳: また、いちばん長い<option>の幅を基準に大きさが決まることも、なくなる。)

スクロール位置の保持(scroll anchoring)

用語

スクロール位置の保持:読んでいる場所より上に内容が入っても、画面が下に押されないよう、ブラウザがスクロールの位置を調整する仕組みである。止めたいときは、overflow-anchor: noneを書く。値はautoとnoneの2つで、初期値はautoである。

sizes="auto"

用語

sizes="auto":画像のsizesに、autoと書く指定である。sizesは、画像が画面のどれだけの幅を使うかを、ブラウザに先に伝える。autoを書くと、配置が決まったあとの実際の幅で、ブラウザが画像を選ぶ。MDNは、autoはloading="lazy"と組み合わせたときだけ有効だと説明している。

stretch

用語

stretch:width、height、min-width、max-width、min-height、max-height、flex-basisに書ける値である。要素の外側の余白まで含めて、親の箱を埋める。-webkit-fill-availableで同じ目的を満たしていた場合の、置き換え先になる。

04 型別 — 自分のサイトがどれに当たり、何を、どの順で確かめるか

型A — フォームやselectがあるサイト

問い合わせ、会員登録、検索の絞り込みなど、<select>を使うサイトである。確かめることは、2つある。自分のCSSに、appearance: base-selectが書いてあるかと、書いてあるなら、新しい標準の見た目の上で、自分のデザインが崩れていないかである。公式の記事は、新しい標準の見た目を使いたくない場合は、上書きが簡単だと書いている。

型B — 長い記事と一覧があるサイト

記事、ブログ、商品の一覧のように、スクロールして読むサイトである。画像が後から読み込まれて、上の内容が押し下げられる場面が、見た目に出やすい。スクロール位置の保持が効けば、押し下げは小さくなる。ただし、公式の修正の一覧には、これに関わる修正が複数並んでいる。その1つを、次に引く。

"Fixed an issue where pages could become blank and jump to the top after dynamically loading new content when scroll anchoring was enabled."

(訳: スクロール位置の保持が有効なとき、新しい内容を動的に読み込んだあとで、ページが空白になり、先頭へ飛ぶことがある問題を直した。)

型C — 画像を何種類も配るサイト

画像にsrcsetを付けて、端末ごとに大きさの違う画像を配っているサイトである。sizes="auto"は、公式の記事によると、配置後の幅で画像を選ぶので、画面の幅を事前に予測しなくてよくなる。

"Using sizes="auto" on an image with loading="lazy" tells the browser to automatically calculate the size based on the actual layout width once it’s known."

(訳: loading="lazy"の画像でsizes="auto"を使うと、実際の配置の幅が分かった時点で、ブラウザが大きさを自動で計算する。)

MDNは、対応していないブラウザのために、autoのあとに、従来の指定を足しておく書き方を勧めている。

型D — 自分でCSSを書いているサイト

幅いっぱいの箱に、width: 100%や-webkit-fill-availableを書いているサイトである。公式の記事は、stretchを、次のように説明している。

"It’s just like using width: 100% — but this time accounting for margins, which prevents overflow."

(訳: width: 100%を使うのとそっくりだが、今回は余白を数に入れるので、はみ出しを防げる。)

確かめることは、余白のある箱が、横にはみ出していないかである。また、公式の記事は、行数を切る-webkit-line-clampと、折り返しを均等にするtext-wrap: balanceを、同じ要素に書くと、これまでは均等化が効かなかったと書いている。

"Before Safari 27.0, if you applied both to the same element, the balancing simply didn’t happen."

(訳: Safari 27.0より前は、両方を同じ要素に指定すると、均等な折り返しが、単に起きなかった。)

手順1 — Safari 27で開く環境を作る

まず、確かめる環境を用意する。Macは、Safariのメニューから「Safariについて」を開いて、バージョンを見る。27でなければ、更新する。公式の記事は、macOS 26とmacOS 15なら、macOSとは別に、Safari 27.0へ更新できると書いている。iPhoneは、設定の「一般」から「情報」を開き、iOSのバージョンが27かを見る。手元の端末が27でなければ、27の表示は確かめられないので、その旨を記録に書く。

手順2 — 5種類のページを、同じ順で開く

トップ、記事、一覧、フォーム、問い合わせや購入の画面の5種類から、1ページずつ選ぶ。Safari 27と、別のブラウザ(または、1つ前の版のSafari)で、同じ順に開く。見た目が違う場所の数を、ページごとに書く。差が出た場所だけ、手順3以降で原因を探す。

手順3 — selectを数え、base-selectの有無を見る

各ページのソースで、selectを探して、本数を数える。次に、サイトのCSSで、base-selectを探す。「selectがある・base-selectがない」の組み合わせなら、手順2の画面で、selectを開いて動きを見るだけでよい。

手順4 — 画像が後から入る場所で、スクロールを止める

長い記事を、iPhoneのSafariで開く。画像や広告が後から入りそうな場所の少し下で止まり、10秒待つ。読んでいた文章の位置が動いたかを見る。動いた場合は、その場所を書き出す。widthとheightを書いていない画像は、原因の候補になる。

手順5 — 画像の書き方を数える

画像の<img>を10本選び、widthとheightが両方あるものを数える。次に、srcsetとsizesの有無を数える。srcsetがあり、loading="lazy"のものだけが、sizes="auto"を足す候補になる。足す前に、手元の画像を、画面の幅ごとに選んでいる現在のsizesの値を、書き出しておく。

手順6 — CSSの古い指定を探す

CSSで、-webkit-fill-availableを検索する。見つかった行は、stretchに置き換えられるかを、1行ずつ決める。置き換えは、対応していない版でも、同じ見た目になるかを確かめてから行う。width: 100%と余白を、一緒に指定している箱も、はみ出しを確かめる対象である。行数を切るカードは、text-wrap: balanceを一緒に書いているかを、調べる。

手順7 — 利用者のSafariの割合を見る

最後に、アクセス解析で、直近28日のSafariのセッションを、OSのバージョン別に分ける。iOS 27のセッションの割合が、自社の利用者のうち、今回の変更が見える人の割合になる。この割合が低いあいだは、直す優先度を下げてよい。

Safari 27を自社サイトで確かめる7つの手順を、順に並べた図。手順1は、MacとiPhoneのバージョンを見る。手順2は、5種類のページを同じ順で開く。手順3は、selectを数え、base-selectの有無を見る。手順4は、画像が後から入る場所でスクロールを止める。手順5は、画像のwidth、height、srcset、sizesを数える。手順6は、CSSのfill-available、100パーセントの箱、line-clampを探す。手順7は、アクセス解析でiOS 27のSafariの割合を見る。下段に、手元の端末が27でなければ、27の表示は確かめられないと書かれている。
確かめる7つの手順 — 手順1と7が、自分の環境と利用者の環境を結ぶ

この記事が確かめていないこと

この記事の筆者は、Safari 27の実機で、画面を開いて確かめていない。この記事のために、Safari 27の端末は用意していない。書いたのは、公式の記事とMDNの記載、そして、当サイトのHTMLとCSSを取得して数えた結果である。customizable selectの標準の見た目が、実際にどう見えるかは、各自の端末で確かめてほしい。

05 自分のサイトで確認するチェックリスト

下の14項目は、1項目5分ほどでできる作業である。項目1〜3が手順1と2、項目4と5が手順3、項目6が手順4、項目7〜9が手順5、項目10〜12が手順6、項目13が手順7に対応している。項目14は、コーディングのエージェントに、Safariを操作させる場合の準備である。Safari 27の端末がない人も、項目4・7・8・10・12は、HTMLとCSSを開くだけでできる。チェックの状態はブラウザの中にだけ保存され、サーバーには送られない。

  • MacのSafariで「Safariについて」を開き、バージョンの数字を書き、iPhoneは設定の「一般」から「情報」を開いて、iOSのバージョンの数字を書く
  • トップ・記事・一覧・フォーム・問い合わせか購入の5種類から、1ページずつ選び、URLを5つ書き出す
  • 項目2の5ページを、Safari 27と別のブラウザで同じ順に開き、見た目が違う場所の数を、ページごとに書く
  • 項目2の5ページのソースで、selectを探し、ある場合は本数を、無い場合は0を、ページごとに書く
  • サイトのCSSでbase-selectを探し、見つかった行の数を書き、selectが1本以上あるページは、iPhoneで開いて動きを確かめる
  • 長い記事を1つ選び、iPhoneのSafariで開いて、画像や広告が後から入りそうな場所で止まり、10秒待って、読んでいた文章が動いたかを「動いた」か「動かない」で書く
  • 画像を10本選び、widthとheightが両方書いてある本数を数えて書く
  • 項目7の10本のうち、srcsetを持つ本数と、sizesを持つ本数を、それぞれ数えて書く
  • srcsetがあり、loading="lazy"の画像の本数を数え、sizes="auto"を足す候補の本数として書く
  • CSSで-webkit-fill-availableを検索し、見つかった行の数を書く
  • width: 100%と余白を一緒に指定している箱を3つまで探し、画面の幅を変えて、横にはみ出した数を書く
  • -webkit-line-clampを使うカードや一覧を1つ開き、text-wrap: balanceも指定しているかを、「指定あり」か「指定なし」で書く
  • アクセス解析で、直近28日のSafariのセッション数を、OSのバージョン別に分け、iOS 27のものの割合を書く
  • Safari MCPを試す場合は、接続するエージェントの提供元と、画面やコンソールの内容の送り先を、書き出す

チェックリストの使い方

時間が限られているときは、項目3・6・13の3つだけでも、「Safari 27で見た目が変わる場所があるか」「スクロール位置が動くか」「利用者のうち、何割が27か」が分かる。

06 代替・他の選択肢 — Safari 27を、どう確かめるか

確かめ方の、比べ方

方法向く場面注意する点
自分のMacとiPhoneのSafari実際の見え方と操作を、確かめたいとき端末のバージョンが27でないと、27の表示は出ない
Safari MCPと、エージェント確認を、繰り返し自動で行いたいとき画面の内容が、エージェントに渡る
Chromeでの、画面幅の確認幅ごとの崩れを、先に探したいときSafariの描画とは、同じではない
アクセス解析で、利用者の版を見るどれだけの人に、関係するかを知りたいとき見えるのは割合で、見た目の違いは見えない

Safari MCPで、エージェントにSafariを見せる

Safari 27.0には、Safari MCPサーバーが入っている。WebKitの記事は、コーディングのエージェントに、ブラウザの窓の操作を渡し、自分のコードがどう表示されるかを見せられる、と説明している。7月1日の紹介記事によると、見られるのは、DOM、ネットワークのリクエスト、スクリーンショット、コンソールの出力である。使うには、Safariの設定の「Developer」で、リモート操作と外部のエージェントを許可する。設定のコマンドは、公式の記事にそのまま載っている。

この仕組みの通信について、7月1日のSafari MCPの紹介記事(Safari 27.0の記事ではなく、出典に挙げた別の記事)は、次のように書いている。

"The Safari MCP server runs entirely on your local machine and makes no network calls of its own."

(訳: Safari MCPサーバーは、完全に手元のマシンの上で動き、自分では、ネットワークへの通信をしない。)

ただし、取得した画面や内容は、使っているエージェントに渡る。同じ7月1日の紹介記事は、次のように注意している。

"As with any agent you give access to your browser, only use ones you trust."

(訳: ブラウザへのアクセスを渡すエージェントはどれもそうだが、信頼できるものだけを使うこと。)

つまり、渡った先で、内容がどう扱われるかは、使うエージェントとモデルによる。チェックリストの項目14は、この確認である。

注意

当サイトの画面幅の確認ツールは、Chromeのエミュレートで撮影している。Safari 27の描画とは違うので、Safari 27の表示の確認には使えない。幅ごとの大きな崩れを、先に探す用途に向く。

確認の道具と、これまでの記事

画面幅ごとの大きな崩れを探すには、当サイトの無料ツール🔧 WEBページのスクリーンショット、表示デバイスの比較をまとめて撮っちゃおツールが使える。複数のページを順に撮りたいときは、🔧 WEBサイトのスクリーンショット、まとめて撮っちゃおツールも使える。ただし、自動で撮った画面が、読者の見ている画面と違う場合の注意は、「吹き出しが出ていない」と写った ── 壊れていたのは、作ったものではなく写し方だった。自動のスクリーンショットが読者の画面と違う3つ(動き・幅・枚数)に書いた。また、外から取った画面が、目当ての画面とは限らないことは、外から取った画面は、目当ての画面とは限らない ── 遮断の画面を404と読み、引用符の違いでnoindexを「無い」と読みかけたで扱った。

表示の速さを確かめる指標は、Core Web VitalsのLCP・INP・CLSは「良好・改善が必要・不良」の3段階で判定される ── 自分のサイトで確認する14項目(2026年9月時点)で、画像の読み込みは、画像SEOの基本 ── alt属性・次世代フォーマット・遅延読み込みを、公式ガイドで確認する14項目(2026年9月時点)で扱っている。この記事は、それらの内容を繰り返さない。

07 当サイトで確かめたこと

確かめた範囲と方法

2026年10月6日に、当サイトのサイトマップに載っている336本のURLを、すべて取得した。応答は、336本すべてが200だった。取得したのは、HTMLのソースである。JavaScriptで後から作られる要素は、数えていない。また、336URLのHTMLが読み込む、当サイトのドメイン(website.usersupports.com)のCSSとJavaScriptも読んだ。HTMLのコメントの中を除き、URLの「?」以降を外して、重複なしで数えると、CSSが27本、JavaScriptが26本で、取得するとすべて応答は200だった。各ページの中の<style>(45か所)も読んだ。ほかのドメインから読み込むCSS(6本)とJavaScript(8本)と、ログインが必要な画面は、範囲に入っていない。

selectは、1ページだけだった

336ページのうち、<select>を持つのは、1ページだけだった。無料ツールの1つ、FAQを作るツールのページである。CSSにも、各ページの<style>にも、selectに掛かるappearanceの指定と、base-selectの指定は、0か所だった。appearanceという語は、JavaScriptのsweetalert.min.jsの中に、入力欄用の-webkit-appearance:noneが1か所あるだけで、selectには掛かっていない。つまり、当サイトのselectは、標準のままである。Safari 27で、このページの見た目が変わるかは、この結果からは分からない。

画像は3,518本あり、srcsetもsizesも0本だった

336ページに、<img>は、3,518本あった。そのうち、srcsetを持つものは0本、sizesを持つものも0本だった。<picture>は206か所(154ページ)あり、中の<source>206本は、すべてsrcsetを持つが、sizesは持たない。loading="lazy"の画像は、547本(158ページ)である。つまり、当サイトには、sizes="auto"を足す対象の画像が、確かめた範囲では無い。

もう1つ、数えたことがある。widthとheightが両方書いてある画像は2,248本(63.9%)で、どちらかが無いものは1,270本(36.1%)だった。画像の場所が先に決まっていないと、読み込みのあとで、上の内容が動く原因になりうる。この数字は、改善の候補である。

CSSは、古い指定も新しい指定も、使っていなかった

当サイトのCSSと、各ページの<style>、JavaScriptで、次の指定を探した。

  • -webkit-fill-available:0か所。
  • width: stretchなどの、stretchの指定:0か所。
  • overflow-anchor:0か所。スクロール位置の保持を止める指定は、無い。
  • text-wrap:0か所。
  • -webkit-line-clamp:13か所。1〜5行に切る共通のクラスが5つと、記事のカードの題名や抜粋などが8か所である。

text-wrapが0か所なので、行数の制限と均等な折り返しを、同じ要素に書いたときの修正は、当サイトには関係しない。HTMLの中の<script type="module">も、0ページだった。ESモジュールの読み込みの作り直しは、確かめた範囲では、関係が薄い。

当サイトの「ブラウザ・OS 最新バージョン」の表は、Safariなど4行を「未取得」と表示していた

2026年10月6日に、本番のトップページ(https://website.usersupports.com/)を開いた。各ページに出る「ブラウザ・OS 最新バージョン」の表に、Chromeなどの安定版の番号が載っている。一方、「Android(stable)」「Safari iOS(stable)」「Safari(stable)」「iOS(stable)」の4行は、「未取得」と表示されていた。記事のページ、ブログのページ、ツールの一覧、当サイトの紹介のページでも、「未取得」は4行だった。理由は、確かめていない。

この結果から言えることと、言えないこと

言えるのは、当サイトのHTMLとCSSに、Safari 27で直接影響を受ける書き方が、ほとんど無いことである。言えないのは、Safari 27で、当サイトの画面が、実際にどう見えるかである。Safari 27の端末で、画面を開いていないためである。スクロール位置の保持は、何も書かなくても効くので、長い記事の画面は、Safari 27で最初に確かめる候補になる。

当サイトで2026年10月6日に確かめた結果を示す図。サイトマップの336URLは、すべて応答が200。selectを持つページは1ページで、selectに掛かるappearanceと、base-selectの指定は、0か所。画像は3,518本で、srcsetは0本、sizesは0本。pictureは206か所で、中のsourceはすべてsrcsetを持ち、sizesは持たない。widthとheightが両方ある画像は2,248本で63.9パーセント。CSSの検索結果は、fill-availableが0、stretchが0、overflow-anchorが0、text-wrapが0、line-clampが13。下段に、Safari 27の実機では確かめていないと書かれている。
当サイトで確かめた結果(2026年10月6日) — Safari 27で影響を受ける書き方は、ほとんど無かった

08 このテーマの、これまで

Safari 27をめぐる、日付つきの記録

日付出来事
2026年6月8日WWDC26で、Safari 27のベータが出た。新しい機能58、修正525、非推奨4つ
2026年7月1日WebKitが、Safari MCPサーバーを紹介する記事を載せた
2026年9月MDNが、overflow-anchorを「Baseline 2026(Newly available)」と表示している
2026年9月17日WebKitが、Safari 27.0の機能の記事を載せた。機能83、修正844
2026年10月6日この記事のために、公式の記事とMDNを開き、当サイトの336URLを取得して数えた

当サイトの、関連する過去の記事

Safari 27.0の公式の記事が2026年9月17日に出て、機能は83、修正は844になった。select、スクロール位置の保持、画像のsizesなど5つを選び、iPhoneとMacで確かめる14項目を手順と整理し、当サイトの336URLの結果も載せた。
2025/05/31
THU
00:00:00

ブラウザ・OS 最新バージョン

毎日更新:2026-10-06 調査更新済
  • Android(stable) 未取得
  • Chrome Android(stable) 155.0.8059.30
  • Chrome iOS(stable) 155.0.8059.24
  • Chrome(beta) 156.0.8078.4
  • Chrome(dev) 157.0.8081.0
  • Chrome(stable) 155.0.8059.26
  • Edge(stable) 154.0.4258.37
  • Firefox(stable) 157.0
  • Opera(stable) 136.0.6008.80
  • Safari iOS(stable) 未取得
  • Safari(stable) 未取得
  • iOS(stable) 未取得

現在の貴方のIPアドレス

216.73.217.145

このサイトで書いている人

株式会社ツクルン

株式会社ツクルン

Webアドバイジング・クリエイター
池田南美夫
もうすぐ●●歳。ずっーと現役SE。日本にインターネットが上陸してから、ずっーと携わる。 ほんとは超アナログ人間のギター弾き、バンドマン。でも音楽活動とSE、案外似てる。