chrome CSS html javascript

最近の気になるブラウザ新機能(2017/09)！

2017年も残り3ヵ月ですが、既に今年に入って各種ブラウザや言語などで色々なアップデートがかかりました。 自分が気になった機能があったので、ちょっとリストアップしてみようと思います。

HTML編

rel=noopener

aタグの属性などにあるrelの値にnoopenerというのがあり、 target="_blank"で開いた際に、リンク元となるページの変更できないようするリンクです。
フィッシング詐欺などのセキュリティ対策として使うものなのです。 対応していないブラウザにはnorefferを付けでも同様のことができるらしいのです。 まだ、すべてのブラウザが対応してはいないかもですが、つけるのがマストになるかもしれませんね。 ちなみにwordpressでも最近のアップデートで自動付与されるようになっております。
Can I use… 「rel=noopener」

CSS編

CSS Grid

CSSはやはり、CSS Gridじゃないでしょうか。
現在の主要となるブラウザの対応が出そろっています（MS系は要ベンダープレフィックス付与） グリッドという名前ではありますが、テーブル組のようなものだけではなく、 様々レイアウトを作ることができます。対応ブラウザは以下から。 今年中に自分も最低限覚えておきたい技術の一つです。

以下のサイトでは様々Grid Layoutのサンプルを見ることができます！ Jen Simmons | Labs

対応ブラウザは参考はこちらから Can I use… 「Grid Layout」

position sticky

「ある位置までスクロールしたら固定ヘッダーにする」といった挙動は今までJSと組み合わせて作っていたと思いますが、それが、CSSだけでできるようになるというも のです。 safari、androidブラウザでは対応しているので、モバイルサイトで使っている人も少ないんじゃないでしょうか。

Can I use… 「position: sticky」

JavaScript・API編

WebVR

その名の通りVRの機能がブラウザでVR体験ができるようになるといったものです。 Edge,Chrome,Firefoxとモダンなブラウザではすでに対応済み！

つい先日もchromeがどんなサイトもVRで閲覧できるアップデートしましたと発表しておりました。（要Daydream View）

スクリーン不要でマトリックス世界へ。Chromeが全インターネットをVRで閲覧できるように | ギズモード・ジャパン

The Chromium team is working on browsing the web in VR with a Daydream View h…

Webとは少々離れますが、アニメ『ソードアート・オンライン』の世界のような VR MMO ゲームの登場も遠くなかったり？！

EcmaScript 2015~17への対応

async functionや、ES Moduleなど、2015年以降毎年アップデートされているEcmaScript標準への対応もしっかりと行われています。
その中でもファイルの分割のES Moduleは今後の開発手法に大きく関わってくるかもしれませんね。

Payment Request API

ECサイト上での一貫性のある決済フローを目指すAPIです。 複雑になりやすい支払いフローをベンダーやAPI側で提供することで開発しやすくなり、UXの向上があがっていきます。 ECサイト、Webサービス開発者には特に注目な機能です！

その他にもたくさんのアップデート、追加機能がある

Chromeは6週間ごと、Firefoxは6～8週間ごとといったように、ブラウザによってはとても速いスピードでアップデートされています。 上記にあげた機能はほんの一部です。
各ブラウザのリリース情報やリリースノートなどを見て各ブラウザの機能を追っていきましょう！

アップデートされないブラウザへの対応はどうしていくべきか

そして、新機能だけに目を向けるのではなく、アップデートされないブラウザへの対策を検討していく必要があります、IE11は基本的に機能が増えることがありません。 また、モバイルでも、ユーザーがアップデートしない場合はChromeなどでも古いバージョンにとどまってしまう場合があります。
対応としては以下が主だった方法になるかと思います。

  • アップデートしてもらうよう促す
  • 新機能が対応しているブラウザを使ってもらうように促す
  • ポリフィルを使って最新機能を旧ブラウザでも再現させていく

どれか一つをとればいいわけではなく、上記にあげた方法だけでなく、またそれ以外の方法もあるかと思います。 開発者視点とユーザー視点を意識した上で、どの手段が有効なのか、しっかり考えて対応していきたいですね。

関連記事