🧊

Safari 10.1でアップデートされたHTML系を試した

ほんとはリリースノートが出てすぐ試したかったんやけど・・。

Safari 10.1

見出しとしてはこの3つ。

  • Interactive Form Validation
  • HTML5 Download Attribute
  • HTML Media Capture

相変わらず、興味あるとこだけざっくりさわったメモです。

試した環境

iOSも10.3.1ならSafariのバージョンは10.1になるかと思ってたけど、UA見る限り`10.0 Mobile`なんよね。

Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1

Interactive Form Validation

`form`の`required`とか、`pattern=""`とか`checkValidity()`とか、`type=date`とかあのへん。

HTML Interactive Form Validation | WebKit

Mac

  • 動いてる
    • `required`
    • `pattern`
    • `minlength` / `maxlength`
    • `min` / `max` / `step`
    • `type=number` / `type=email` / `type=url`
    • `checkValidity()` / `setCustomValidity()`
  • 微妙
    • `type=date`: ただの`text`感ある

iOSの方が優秀な気がする。

iOS

  • 動いてる
    • `required`
    • `pattern`
    • `minlength` / `maxlength`
    • `min` / `max` / `step`
    • `type=number` / `type=email` / `type=url`
    • `checkValidity()` / `setCustomValidity()`
  • 微妙
    • `type=number`でもただの文字入力フィールド（補助なし）なので`step`とか意味ない風、やのに怒ってくる
    • `type=date`の`validationMessage`が変な日本語

`type=date`が使いやすいUIになってて優秀。

HTML5 Download Attribute

<a href="./path/to/image.jpg" download="foo.jpg">download</a>
<a href="./path/to/image.jpg">download</a>

コレ。

Mac

普通にダウンロードできる。

iOS

まあそら無理やろって感じ。
普通のリンクとしてページ遷移する。

HTML Media Capture

<!-- 背面カメラ -->
<input type="file" accept="image/*" capture="environment">
<!-- フロントカメラ -->
<input type="file" accept="image/*" capture="user">

Mac

ただの`input=file`。

iOS

ちゃんとカメラ起動するすごい！

おわりに

Safariって言ってもiOSなのかMacなのかどっちやねんという。

ちなみにそれ10.1以前でもできたけどね！っていうのは追ってないので知らねーです。