user-select: none した要素の中で一部の選択を許可したければ user-select: text を使うといい。というお話。
user-select という CSS プロパティがあって、これを none にするとコンテンツを選択することができなくなります。選択できないので、コピーもできません。
そんな user-select: none にしたコンテンツの中で、一部は選択できるようにしたい。といったときに、どうするか？
user-select の初期値にしてやればいいんだろ？と思い、MDN に初期値は auto と書いてあったので user-select: auto にしてみました。
iOS の Safari では、期待する動作をしたのですが、Android の Chrome ではとても微妙な動作でした。範囲選択はできる。コピーもできる。じゃぁ何が微妙なのか？
範囲選択すると「コピー」などのメニューが出ますね。これは他の場所をタップすれば消えるだろうというのが、ユーザー、少なくとも私の期待する動作です。しかし user-select: auto の場所でこのメニューを出すと、同じ user-select: auto の場所をタップしたときにメニューが消えません。これが微妙な動作。
じゃぁ何が正解？ということで、user-select の選択肢から考えられる3パターンを CodePen に書いて試してみました。
See the Pen CSS user-select by rch850 (@rch850) on CodePen.
その結果、期待する動作をしたのは user-select: text でした。よし、これを使おう。
auto が初期値だからといって、初期値に戻せばいいってわけじゃないことを学んだ user-select 体験でした。
