Safari 18 驚喜連連：看看又有哪些整開發者新招

蘋果終於在 2024/9/17 正式發布新系統更新，這次來看看新系統的 Safari 18 跟新的 iPhone，又有那些地方準備讓網頁工程師或是設計師踩雷。

停止支援 JPEG2000 圖片格式

在看 WebKit Features in Safari 18.0 更新項目清單時，發現 Safari 18 移除了對於 JPEG2000 的支援性。

WebKit for Safari 18.0 removes support for the JPEG2000 image format. Safari was the only browser to ever provide support.

弄了個測試網頁，果然顯示不出 JPEG2000 的圖片了(圖片副檔名是 jp2)。

如果前幾年有用過影像處理軟體/文書軟體，大概都在存檔格式的下拉選單看過 JPG2000，不過後來越來越少看到，其他瀏覽器老早就不支援顯示 jp2 這種圖片格式了。

JPEG2000的悲劇

JPEG2000 可以壓縮成比 JPG 更小的檔案、更好的畫質，但卻沒有成為數位圖片交換格式的首選，還變成一個各大瀏覽器都不支援的東西?

我本來猜想因為網頁圖片的後起之秀之一 WebP 是 Google 出的，即使 WebP 一開始也沒好用到哪去，IE11 不支援，Safari 14 以上才支援，Photoshop 無法打開 WebP，Windows 內建看圖軟體也打不開，後來也是慢慢等各大軟體逐步更新，這是網頁瀏覽器市佔率與網路霸權的問題?

後來查了一下，Adobe 的官方介紹 JPEG 與 JPEG 2000 的比較 有提到一些原因:

JPEG 2000 所使用的 RAM 數量也高於其前身 JPEG。當 JPEG 2000 發佈時，普通電腦只有 64MB 的 RAM。雖然這對於現今大多數電腦而言都不是問題，但卻是當初阻礙 JPEG 2000 廣泛普及的另一個因素。

另外維基百科中說到，JPEG2000 核心技術中各種算法都有註冊專利，如果要開發商業用途的圖片工具，可能會面臨專利潛水艇(Submarine Patents)的問題，指長時間沉潛不為人知，又突然浮出水面主張權利的專利。

使用 CDN 服務或額外的圖片顯示機制，可能引發網站圖片地雷

另外 WebKit 官方文件非常貼心，提醒了一個有趣的點：

We have noticed that some Content Deliver Networks (CDN) use User Agent sniffing to provide one file to each UA, offering only JPEG2000 images to Safari — especially on iPhone and iPad. If you expect this might be happening with your site, we recommend testing in Safari 18.0 on both macOS Sequoia and iOS or iPadOS 18. If you see problems, contact your SaaS provider or change your image delivery settings to ensure your website provides fallback images using industry best practices.

大意就是說，有些 CDN 可能會特別向 Safari 使用者提供 JPEG2000 格式的圖片，所以如果使用者更新到 iOS18/iPadOS18/macOS Sequoia ，瀏覽到這些 CDN 服務的網頁，可能就會看不到網頁圖片囉!

有些大型網站也可能會為了圖片最佳化，設計這類機制，之前就已經有人在 booking.com 碰到這問題 www.booking.com – Server sends JPEG2000 images in the Raw HTML to Safari on iOS，booking.com 的工程師也很快做出處理。

依照網頁程式本身的請求參數，或是使用者的瀏覽環境，來吐出適當的圖片給瀏覽器，這是 CDN 或圖床服務中對於 Adaptive Images/Image Optimization 的一個小功能，但一般人可能不會直接想到網頁圖片無法顯示的問題，竟然跟升級作業系統有關。

查了一下常見的幾大間 CDN 的文件，除了 ImageEngine 之外，都沒人說自己支援 JP2 格式，如果真的有碰到，倒要看看是哪一間 CDN 或圖床服務這麼念舊。

把 input checkbox 瞬間變成開關元件

Toggle Switch 開關元件對於網頁前端和 UI 設計師可以說是知名練手項目之一，如果要做一套 UI framework，可以沒用到，但不能沒有。

Safari 18 幫原有的 checkbox 新增了一個 switch 屬性，只要這樣 <input type="checkbox" switch> 就能顯示成開關元件的樣子，用 JavaScript 取值和設值的方式也跟普通的 checkbox 一樣。

開關預設打開時是綠色，沒開時是灰色。還可以用 Safari 18 終於也開始支援的 CSS accent-color 來把綠色改掉。

我在這邊放一個實際的 html:

什麼? 你只能看到一個打勾的普通核取方塊?
這目前只有 Safari 18 尊爵不凡的使用者看得到，
如果是一般的 Windows 用戶，Android 手機用戶，沒升級的蘋果設備用戶，都看不到。

一個只有 Safari 18 能正常顯示的東西，不知道哪個開發人員敢用。

隱藏干擾項目

在 2024WWDC 前，有一些外媒在謠傳 Safari 會有「網頁橡皮擦」，Wow! Amazing! Only Apple Can do!
結果 WWDC 發表完，根本沒有 Safari 瀏覽器的戲份，都聚焦在 Apple Intelligence 跟其他重新設計的功能。

反轉很快就來了，在 2024/8 月初的更新 beta 版本作業系統後，就突然出現隱藏干擾項目(Distraction Control)的功能。

Safari 的這個功能在 iOS、iPad、MacOS 全系列的 Safari 瀏覽器都有標配，只要把作業系統版本更新上去，就可以用。不支援 Apple Intelligence 機型也能使用 Safari 的「隱藏干擾項目」，跟 iOS 18.1 照片 App 的清理/移除路人(Clean Up)不一樣。

先講好，這功能不是跟 ad-blocker 之類的各種廣告攔截產品搶飯碗，也不是要跟全世界的聯播網圖文廣告業者對著幹、也不是想把靠廣告收益支撐的創作者或媒體趕盡沙絕。
第一次使用會有提示訊息，說不會隱藏廣告:

Hiding distracting items will not permanently remove ads and other content that update frequently.

使用上非常簡單直覺，網址列的選單點開來，就看得到那個功能，

然後直接點選要隱藏的項目，網頁上的東西就會像被薩諾斯彈指一樣，變成碎片飛走了~
要把東西變回來也很簡單，再點「顯示隱藏的項目」就好了。
官方操作說明: Use Distraction Control in Safari to hide items on a webpage

如果使用者反映一些古怪的網頁問題，可以從擷圖中觀察網址列有沒有一個眼睛的圖案(如上圖)，如果有，那就是使用者用到了這個功能。

想要用 JS 輕鬆偵測元素是否被隱藏˙? 似乎有點難，所以東西在 DOM 都還是存在，長寬也沒有不見。跟一些 ad-blocker 類的瀏覽器擴充套件有點不一樣。

一些功能特色

實際使用後，還可以觀察到一些操作細節:

• 想要隱藏項目，選取方式很有限，沒辦法很精細的選到某巢狀元素最內層的元素/被蓋住的元素/要先點某東西才會顯示的元素。所以如果怕使用者把網頁上的某個東西隱藏，也許可以考慮把那個東西跟網頁主選單之類的重要內容包在一起。
• 即使沒有用任何 position:absolute, fixed 之類的會 out of flow 的樣式規則，有些元素被薩諾斯之後，下面的元素會往上補，但重新整理之後，又會留一塊空白在那邊。不知道這樣的目的為何? 也許是因為選擇隱藏元素的那個介面無法捲動網頁，所以選取後自動隱藏比較方便操作?
• 選擇隱藏項目的那個模式，無法捲動網頁，所以有些往下捲動才會跑出東西的那種網頁，要先往下捲，再進入選擇元素的模式，有點麻煩。
  以往為了方便控制樣式，有些東西會用一個大容器包起來，在這個功能之下，很有可能導致使用者一次就隱藏一大堆東西。
• 點到同網站的其他頁面，同樣類似的元素還是會被自動藏起來，使用者不用每一頁都重選。

地雷點

再重申一次，Safari 這個新功能不是用來隱藏廣告！
真的實際用過就知道，上X客邦或是一些廣告很多新聞網站，把廣告全部設隱藏，重新整理之後，廣告還是會跑出來。

至於 Apple 的系統是如何判斷:
「哪些是廣告，不可以隱藏，下次載入時還要強制顯示(官方說是頻繁變動的元素?)」
「使用者在 A 頁面把某些元素設定隱藏，所以 B 頁面也要隱藏，它們好像是同樣的元素」
目前沒有看到官方的開發者公開文件。

要是因為使用者不經意間用 Apple 的這個功能隱藏了網頁內容，導致店家增加了客服時間、銷售轉換率下降啥的，網頁工程師又要準備背黑鍋了。

另外一點，之前有介紹過一些追蹤使用者操作行為的線上服務，因為各種技術限制或產品缺陷，非常容易發生使用者實際操作，和追蹤服務後台紀錄到的完全不一樣。

這次剛好又來試一下…
結果發現明明網頁整個內容幾乎都隱藏了，使用者看的是整頁白白的頁面，但是在重播畫面中，還是通通都在。
重播畫面也無法記錄到使用者在操作「隱藏干擾項目」，把網頁上的各種元素隱藏的瞬間。

啊? 這段不能講，礙到人家賣課程了是不是? 那把剛剛那段剪掉。
這類工具絕對都是完美無缺的，
我們要多加利用這類工具
來優化銷售頁、研究使用者行為，用數據來決策，打造高轉換的購物體驗 🙂

JPG-XL 檔案格式

在蘋果發表會後，就有外媒謠傳 iPhone16 Pro 的圖檔格式將採用 JPG-XL，這消息看了又令人汗流浹背了。

這牽涉到網頁表單的開發與維護困境之一，當要做一個可以讓人上傳圖片影片的網頁表單，通常會在程式前後端做出各種檢查與限制，但是用手機操作網頁表單的使用者，非常容易被這些限制卡死：

程式限制檔案不能超過幾MB……
現在手機照片很容易超過 2MB 或 5MB，如果每個人都傳這麼大的照片? 為了保險起見還要留原檔? 那會大幅增加儲存成本耶。

程式限制圖片尺寸不能超過多少……
雖然 iPhone 的照片規格數字沒有 Android 手機廠商這麼離譜瘋狂堆規格，現在也就 4800 萬畫素(可以粗略用8000px*6000px來算)，不過也是每隔幾年都會升級。
但一些文書場合根本不需要這麼大的圖片，
無論是自己處理縮圖程式，跟勞煩使用者自己縮圖再上傳，都會增加額外的負擔。

限制檔案副檔名……
有時候會有 HEIC/HEIF/HEVC 之類的「高效率格式」，
現在又多了 JPG-XL(副檔名是 JXL)，
這下該不會又要修改副檔名規則檢查清單?
還有想辦法讓程式能處理 JPG-XL 的圖片，還要避免因為產縮圖、加浮水印、旋轉之類的把圖片弄壞。

等到 iPhone16 出來之後，一看，要先把 ProRAW 的設定打開，然後點進去格式>預設專業格式，才會看到 JPG-XL:

所以平常在網頁上選擇上傳圖片，應該不會碰到 jxl 的圖片檔吧?

這個擷圖是在 Xcode 的裝置模擬器裡面擷的，如果有好心人要贊助一台 iPhone16 Pro 實機為了研究用途，那就更好了😆

Pro 機型又有新的螢幕比例

喔對了，上一段那個擷圖有修過，其實螢幕長寬比例是不對的，因為今年 iPhone 16 Pro 的螢幕尺寸又變長了

因為螢幕邊框有變薄，如果把寬度縮成跟 15 Pro 一樣，16 Pro 高度大約多了 20px；
如果把寬度縮成跟 15 Pro Max 一樣，16 Pro Max 高度大約多了 22px。

有些 YouTuber 開箱時也有發現，大家又有得調了…

iPhone 鏡像輸出

系統升級後，興沖沖想使用的第一個功能，可以在電腦上用 iPhone!
跟以前用傳輸線連接一樣，可以在電腦上開 DevTools 幫手機網頁瀏覽器的網頁 debug。

但是系統需求限制非常多，像是裝置必須使用同一組 Apple ID、設備間不能同時使用其他特殊連線功能，使用條件可以參考官方說明 iPhone Mirroring: Use your iPhone from your Mac。

這功能是叫 iPhone Mirroring，所以 iPad 沒得用。

一些中國品牌也有在筆電上使用手機的功能，像是華為、realme、小米、聯想都有，但是多數只相容自家的手機，例如華為筆電只能控制華為手機。這點倒是跟蘋果滿像的，蘋果電腦只能控制蘋果手機…

隔壁 Windows 陣營在幾年前就有 Phone Link 電腦連接手機的功能，但主要只有聯絡人相關功能、看簡訊、傳輸檔案而已，
近期在 Windows 11 最新的測試版 24H2 開始也可以在電腦上操作手機裡的 APP 了，這個之後應該會另外寫一篇。

其他

其他還有像是 Safari 瀏覽器的網址工具列樣式又有更新，有些人的圖文教學可能又要重新擷圖了。
還有一些其他瀏覽器之前就已經支援的 CSS/JavaScript 功能之類的，就不介紹了。

有興趣的可以參考
– WebKit Features in Safari 18.0
– Safari 18.0 Release Notes

反正我的忍道就是，即使 iOS18 有更新，但是前兩版系統 iOS16~iOS17 不支援，甚至還要為了 iOS16~iOS17 額外多寫一堆的話，這種東西沒事就少用。