こんにちは、R&D 部の青野です。
「読者視点で見やすくて読みやすいページを作りましょう」とよく言われてますが、たまには見づらくて読みにくいページがあってもいいんじゃないか。
ということで、読みにくいページを作りました。
と言っても、デザイン、ページ構成的にというわけではなく、ただ暗いだけのページです。
仕組みとしては暗く描画した canvas タグをページの上に重ねているだけとなっております。
また、このページはモバイルとPCでは見え方が少し違いますので、モバイルで見ている方はPCでも見てみてください。
（さすがに暗いままだと記事が読みにくいので、ページを明るくするボタンを付けました。ご利用ください。）
通常 canvas 要素や img 要素などが上に重なっている場合、その下にある要素は選択できなくなります。しかしこのページではまっ暗な状態でも上にある[ON][OFF]のボタンが押せるようになっています。
なぜページ全体の上に重なるcanvas 要素があるのに、下にある要素が選択できるのでしょうか。
説明いたします。
pointer-events でイベントを制御する
pointer-events はクリックやタップイベントを制御するCSSです。デフォルトの状態では「pointer-events:auto;」が適用されており、この状態では「z-index」などで上に重ねた要素がある場合、下の要素のボタンやテキストは選択できません。
しかし、「pointer-events:none;」を適用した場合、上にある要素を無視して下にある要素が選択できるようになります。これは「pointer-events:none;」が適用された要素はイベントのターゲットにならず、その要素の下にあるものに通過するためです。
また、イベントのターゲットにならないということは、上記のように上にある要素を通過して下にある要素を選択させる以外にも、クリックさせないという使い方もできます。
例として下にあるボタンは、「pointer-events:none;」を適用しているため、イベントのターゲットにならず、押すことができません。
ボタン以外では a タグのリンクや、
画像なども保存できません。
一行でこれらを制御できるのは便利ですね。
pointer-events のブラウザ別対応状況
いくら便利でもPC、モバイルなど、多々あるブラウザで対応していないのでは使えませんので、対応状況を Can I use で確認してみます。
Microsoft Internet Explorer（以下 IE） が11からとなっているのがネックですが、ほぼ対応していると言っていいのではないでしょうか。
ただ、IE 10 以下のシェアが多いとなかなか使いにくいと思いますので、気になる最新のシェア状況を見てみます。
2017年9月時点のブラウザシェア状況
NETMARKETSHARE で日本の2017年9月時点のブラウザシェアを確認してみます。
| ブラウザ | シェア |
|---|---|
| Chrome | 58.5% |
| IE | 13.84% |
| Firefox | 12.72% |
| Microsoft Edge | 5.02% |
| Safari | 4.97% |
| Proprietary or Undetectable | 1.93% |
| Opera | 1.26% |
| Other | 1.76% |
Chrome が 58.5% と圧倒的ですね。次点で IE が 13.84% となっています。
では 13.84% の内約内訳（うちわけ）はどうなっているでしょうか。
| ブラウザバージョン | シェア |
|---|---|
| IE 11 | 11.72% |
| IE 10 | 0.50% |
| IE 9 | 0.67% |
| IE 8 | 0.89% |
IE 10 以下は Other にまとめられてしまっていますが、約85％以上が IE 11 となっているようです。
IE のバージョン別のシェアを確認したのは久しぶりですが、想像以上に IE 10 以下が少ないです。
現在 IE 10 以下は、Microsoft のサポートも終了していますので、そろそろ対象外にしても良さそうです。
おわり
最初は見づらくて読みにくいページを作るという記事だったはずが、ほとんど「pointer-events」の紹介記事になってしまいました。
そんなにポンポン使うような CSS ではありませんが、「pointer-events」の地味な便利さを伝えられたのではないかと思います。
是非機会があれば使ってみてください。
[追記 – 2017/10/4 13:56]
モバイル端末でPC表示をしたときに対応できてなかったので、対応しました。
[追記 – 2017/10/6 14:52]
はてブコメントにあった内訳警察さんありがとうございます。
該当箇所修正しました。
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
フェンリルの Facebook ページでは、最新トピックをお知らせしています。よろしければいいね！してください！
関連記事
