レスポンシブでpointer-eventsを効果的に使う

レスポンシブでのCSS小技。

ケースとして、PCはテキストの要素だけどSPでは要素自体をリンクにしたいとする。
JS

See the Pen yeVXaO by Youhei Isokawa (@yuhiisk) on CodePen.

• demo

解説

こういう場合、まずSPを基準に考えたほうが良い。
リンクとして振る舞うのが前提だから、当然htmlの要素は<a>でのマークアップになる。

HTML

<a class="link-area">
    <div class="text">text1</div>
    <div class="text">text2</div>
</a>

次にPCではリンクを無効にしたい。そういう時に使えるのが pointer-events だ。
pointer-events はCSSでマウスイベントを制御することができる。
もちろんリンクのクリックを無効にすることだってできる。

pointer-events – CSS | MDN

PCではリンクを無効にするので、併せて cursor プロパティも指定しておくと親切だ。
そしてSP（メディアクエリ内）では、pointer-events: auto; でマウスイベントを有効にして元のアンカー要素として振る舞う。
cursor: pointer; も忘れずに指定すること。これを忘れると、iOSでJSのバグの原因になる可能性がある。

CSS

.link-area {
  display: block;
  position: relative;
  padding: 10px;
  border-radius: 5px;
  background-color: #eee;
  cursor: default;
  pointer-events: none;
}

@media only screen and (max-width: 750px) {
  .link-area {
    padding: 10px 25px 10px 10px;
    background: url(https://wp-blog.yuhiisk.com/img/post/2015-12/arrow.png) no-repeat 99% center #eee;
    cursor: pointer;
    pointer-events: auto;
  }
}

• CSS pointer-events (for HTML) – caniuse.com

IE10以下でサポートされていない点が欠点だが、時間の問題だろう。
ぜひ使える場合は積極的に使ってもらいたい。