Safari 10 for Developer

Safari 10 跟著 macOS 一起出來了,這次更新了不少東西(對於網頁開發者來說),Apple 也依舊放了一份文件在他們的 Developer Library 裡面,以下列出我覺得比較有趣的:

CSP 2.0

CSP 2.0 和之前的版本相比,最主要是多了非常多可以控制的權限,也有幾個名稱有改掉,不過基本上格式是相容的。

Shadow DOM

Shadow DOM 1.0 標準,這也讓 Web Component 的理想又往前賣進一步了。

ES 6

號稱支援度 100%,看起來是依據 ECMAScript compatable table 的,不過在 module 的面前,還沒有真的 100% 的啊,另外主流瀏覽器其實支援度都蠻高了,之前 Edge 還放話說領先的,沒想到現在就已經被 Safari 10 和 Chrome 超過了,而 Chrome 看來也之差 tail call 而已,接下來應該又要開始效能比拼了吧。

Inline and Auto Video Playback in iOS

這也是等很久的功能,之前就有先開放靜音影片能直接在 iOS Safari 上自動播放,主要的考量是,gif 和 mp4 相比,還是 gif 比較吃資源啊。

ES Internationalization

ECMA-402 支援,這也是希望快點普及的東西啊,不然數字、日期什麼的搞本地化實在很麻煩。

WOFF 2.0 Support

令人意外的有點慢,不過還算很有誠意的把很新的 CSS Font Loading Module Level 3 的 API 做好了。

#RRGGBBAA

新的 CSS color 格式,也是前陣子才 propose 出來而已,這樣以後就可以讓 CSS 裡的顏色格式統一點了。

Right-to-Left Language Support

主要是 RTL 頁面 scrollbar 的位置終於會換邊了。

Media Query for Wide Color Gamut Support

廣色域的 CSS media query,主要是因為最新的 iMac 和 iPhone 7 都有支援 P3 色域了。

WebDriver Support

主流瀏覽器最後一個支援的...

Apple Pay for the Web

這真的蠻兇狠的,不過 Google 也有在 Android 做類似的就是了。

大概就這些了,其實也列出超過一半的項目了,Safari 這種更新頻率其實比起其它幾家來說吃虧不少,不過還是一直有跟上最新進度,其實也蠻厲害的,更何況現在 Google 都把人拉到 Blink 去,有回到 Webkit 的貢獻似乎比例上不高。


MRT & GIT

今年 COSCUP Lightening Talk 分享的主題是 GIT & MRT,主題就是紀錄我之前用 GIT 線圖畫台北捷運路線圖的過程,投影片在上面,這篇文章是補充一下被省略的部分和講不完的部分,當天我有用 Ricoh Theta 錄影,也丟上 YouTube 了:

閱讀「MRT & GIT」全文

Input Event

Playtime Credit Card,

今天做了一個特殊的 input 欄位,其實目標只是做成類似像輸入信用卡號那樣,輸入1234完,準備要輸入5的時候,會在4後面補上一個-,變成1234-5,不過我預期做的完美一點,所以考慮了很多狀況,例如:

  • 複製貼上沒有-的資料後會自動格式化
  • 已經輸入一部分資料後,游標移到前面插入資料也會正確格式化
  • 直接用DELBackspace來刪除資料,要讓使用者感覺不到-
  • 先選取一些字元然後用DELBackspace甚至是剪下來刪除資料後會重新格式化
  • 以上幾種操作都不會讓游標亂跳

簡單看過目前一些信用卡相關的 library,在卡號輸入的部分是沒有全部達到的,要達成這些目標,幾乎是等於每個使用者的操作都要攔截下來,然後要抓到當欄位內的值,會用到的事件包括了 keyup、keydown、paste 和 input,等,其中本來我對於一般使用者敲打鍵盤輸入的事件是用 keyup,keyup 事件後會判斷游標位置和輸入的內容,如果需要的話就加上-,然後調整游標位置,通常是 +1,弄好後測試一陣,發現如果按鍵輸入很快的話,游標位置會亂掉,應該要 +1 的卻錯過了,深入除錯一陣子之後發現,keyup 事件其實和欄位內的 value 變更是非同步的,所以不能確保 keyup 事件拿到的欄位值是正確的,能確保欄位值正確的,其實是 input 事件,不過 input 事件沒有 keyCode,所以只能自己判斷輸入了什麼,另外刪除內容時也不會觸發 input,還好DELBackspace是用 keydown 事件來處理,兩邊剛好錯開了。

雖然 input 事件似乎很好用,不過其實它在早期的時候支援度是不太好的,算是比較新的事件,有類似狀況的還有一個是 change 事件,我的印象中是某些瀏覽器的行為會不太正確,所以其實我一直都還不太使用,至於 input 事件,我則是需要在不支援的瀏覽器中 fallback 到 keyup 事件,所以就會需要偵測,找了一下在 Modernizr 有支援,仔細看一下內容其實可以發現不是很好偵測,然後我也不是很喜歡 Modernizr 的介面,所以目前用的是在 Modernizr Issue 210 裡面 AndyE 提供的版本,稍微精簡一些:

var inputSupport = "oninput" in document.body || checkEvent(document.body);
/*
   The following function tests an element for oninput support in Firefox.  Many thanks to
        http://blog.danielfriesen.name/2010/02/16/html5-browser-maze-oninput-support/
*/
function checkEvent(el) {
    // First check, for if Firefox fixes its issue with el.oninput = function
    el.setAttribute("oninput", "return");
    if (typeof el.oninput == "function")
        return true;

    // Second check, because Firefox doesn't map oninput attribute to oninput property
    try {
        var e  = document.createEvent("KeyboardEvent"),
            ok = false,
            tester = function(e) {
                ok = true;
                e.preventDefault();
                e.stopPropagation();
            }
        e.initKeyEvent("keypress", true, true, window, false, false, false, false, 0, "e".charCodeAt(0));
        document.body.appendChild(el);
        el.addEventListener("input", tester, false);
        el.focus();
        el.dispatchEvent(e);
        el.removeEventListener("input", tester, false);
        document.body.removeChild(el);
        return ok;
    } catch(e) {}
}

測試困難的主因是 Firefox 4 有 bug,所以需要真的建立一個 input 元件,然後用完整模擬 input 事件。然後雖然這個版本的比較精簡好懂,不過之後還是會因為 license 的關係改用 Modernizr 的版本吧。至於我做的 input field 呢,現在當然還是公司資產,大概要等我有空在假日重寫一個 Credit Card 的版本才會放出來吧。


更之前的文章