2014年9月11日木曜日

【CSS】-user-selectでユーザー選択を無効・有効にする時の注意点

CSSの「-user-select」でユーザー選択を無効・有効にする時は注意が必要だ。

無効にするには全てのブラウザで「none」とすればいい。

/* ユーザー選択を無効にする */
.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

しかし、WebサイトではなくWebアプリを作る場合は、デフォルトをユーザー選択無効にしたいのでこうするだろう。

* {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

するとピンポイント的にユーザー選択を有効にする必要があるが、ここで指定するべきプロパティーがブラウザによって異なるので注意が必要だ。

/* ユーザー選択を有効にする */
.selectable {
  -moz-user-select: text;
  -webkit-user-select: auto;
  -ms-user-select: text;
  user-select: text;
}

基本的には「text」で、「auto」はwebkitのみで効く。Chromeで開発しているため基本が「auto」だと思い込んでいたのが敗因だった(^^);

msにも「auto」のプロパティーはあるが、親ノードの影響を受けるので求めている動作をしてくれない。よって「text」を指定するのが正しい。

Firefoxおよび標準:user-select - CSS | MDN
WebKit系:Blogger: 琴線探査 - 投稿を作成
IE系:CSS を使って Web ページにおけるテキスト選択を防ぐ (または有効にする) 方法 (Windows)

また、調べてる時にたまたま見たこのページは参考になる。

【CSS】ハイブリッドアプリを作成するときにいつも書くようにしているCSSプロパティいくつか!