Posts match “ javascript ” tag:

新版 Safari 9 對於開發者的幾項要事

在 OS X El Capitan 的測試版中,也放入了下一版的 Safari。雖然 beta 1 裡面的其實是 Safari 8.1,不過已經具有跟官網上介紹的 Safari 9 同樣功能,預計應該再下一版 beta 就會提昇版號了。簡單玩過之後,有注意到幾件事情比較有趣,而且跟網頁開發者比較有關的:

ECMAScript 6

Safari 9 一次補齊了一堆缺很久的 ECMAScript 6 新標準實作,官方給出的清單有下列項目:

  • Classes
  • Computed Properties
  • Weak Set
  • Number Object
  • Octal and Binary Literals
  • Symbol Objects
  • Template Literals

而在 ECMAScript 6 compatibility table 上可以看到,新的 Safari 進度直接飆到 52%(Safari 8.0.6 只有 20%),差不多追上了最新的 Webkit build、甚至還超過了 Chrome 的 48%。

Screenshot of ECMAScript 6 compatibility table

瀏覽器語系偵測

Update (7/18): 安裝了 El Capitan DP 3 1.0 (15A216g) 之後,Safari 9 的 navigator.language 又變回 zh-tw 了。

在系統設定主要語言為繁體中文、且地區為台灣的情況下,打開 iCloud 網站竟然是出現簡體介面。所以我在 console 下面檢查了 navigator.language,發現新版的 Safari 9 吐出來的結果是 zh-hant、而不是以前的 zh-tw 了。

雖然某種程度上可以理解這是因為台灣不是唯一使用繁體中文的地區,因此 zh-hant 會比 zh-tw 更適合來描述「繁體中文」這件事,但是如果網站是透過比對這個來決定介面語言的話,就可能在這邊出錯而 fallback 成 zh ──然後就變成簡體中文了。

還不確定這個未來會不會修改,不過如果你的網站有偵測瀏覽器語言,就會需要留意這個問題。

Screenshot for Safari 9 console

Unprefixed CSS 屬性

同樣在《What's new in Safari 9.0》文件中,提供了一份正式脫離 vendor prefix 的 CSS 屬性清單。大致上來說是關於 Transition、Animation、CSS Flexbox 跟 CSS Columns 的相關屬性。不過如果平常開發時有在用 autoprefixer 之類的工具的話,其實也就不用太煩惱了,丟給它處理就好XD

釘選分頁的 icon

Safari 9 終於支援了「釘選分頁」的功能。不過被釘選的分頁上顯示的是單色的 icon,不支援現行彩色的 favicon。官方建議是使用前景為 100% 黑色、透明背景的 svg 作為 icon 本身,然後在 <head> 裡面加一行 <meta> 標籤來指定 icon 的顏色。

<!-- 這行要放在其他 <link rel="icon"> 的前面,才不會蓋掉彩色的 favicon -->
<link rel="icon" sizes="any" mask href="website_icon.svg">

<meta name="theme-color" content="#ff0000">

Update (6/11): 經過實測,<link rel="icon"> 那行必須放在 <link rel="apple-touch-icon"> 的後面,不然 Safari 會試圖用 apple-touch-icon 來作為釘選分頁的 icon(然後就會失敗。)

其他

其他還有蠻多沒有在發表會上宣布的新功能,建議有興趣的話可以逛一下《What's new in Safari 9.0》。

用 Composition Event 改進 CodeMirror 對輸入法的支援

CodeMirror 是一套相當熱門的編輯器套件,除了 WebKit 跟 Chromium 裡面的 Inspector 採用以外,Logdown 的編輯器也是用 CodeMirror 做成的。恰如其名,CodeMirror 用來處理程式碼片段非常適合;但是用來處理「文字」倒是有個缺點:沒辦法好好的處理「輸入法」。

對於要編寫非英語文章的使用者來說,多半需要使用輸入法 (Input Method Editor, IME) 來輸入不同語言的文字。大部分的輸入法(例如注音、倉頡、日文拼音輸入法)在打字的時候,會進入一個「組字模式」,把你鍵盤上的輸入,經過對應後轉換為非 ASCII 的文字。

以注音輸入法來說,就是你會看到打出來的字,最後面一小段下面會有底線,然後你可以把游標移動到有底線的文字上、按下「↓」或是空白鍵之類的來改變選字,好讓你可以把「 放棄 」改成「 放氣 」。

但是如果你試過在 CodeMirror(現在是 v3.18)的編輯器裡面使用輸入法打字,你會發現:

Read on