CSS3

プロパティ

user-select

→●、mdn

ユーザーがテキストを範囲選択できるかどうかを制御する。

user-select プロパティは、［文書内のどの要素をどう選択できるか］を、作者が指定できるようにする。これにより、［選択するのに等しく有用ではない要素がある］ときでも、利用者は、隣接する内容を偶発的に選択するのを避けられ、やりとりし易くなる。

ユーザー エージェントは、［::first-line／::first-letter］疑似要素には、user-select プロパティを適用しないものとする。

課題： user-select を none 以外の値に変更することが コピー可否と DOM API において何を意味するか、明らかにする必要がある。

疑似要素内の生成内容が、この仕組みを通して選択可能になるときは、ユーザー エージェント は、検索機能からも その内容を見出せるようにするべきである。

課題： ::marker にも適用するべきか？ ページ マージン ボックスにも適用するべきか？ auto に対する使用値は none、text のどちらが適切か？

次に挙げる場合を除き、使用値は算出値と同じになる：

• 編集可能な要素上では、算出値に関わらず、使用値は常に contain になる。
• 算出値が auto のときは、使用値は、下に定義するように他のいずれかの値になる。

この仕様の目的においては、次に該当する要素が 編集可能な要素 とされる：

課題： 編集中のホストの編集可能な子孫である要素上の算出値に対し、何が起こるかについて、拘束はあるべきか？ その意味論は、明白ではない。none は、使用値 text に対応付けるべきかもしれないし、他のすべての値も text に対応付けるべきかもしれない。

以下のCSSが組み込んであります：

auto

auto に対する使用値は：

• ［::before／::after］疑似要素に対しては、none になる。
• 編集可能な要素ならば、contain になる。
• 他の場合、親の user-select の使用値は［all／none］ならば、それと同じになる。
• 他の場合、text になる。

注記： この［継承されないプロパティと、初期値 auto に対する使用値が親要素に依存すること］との通例的でない組み合せは、実質的には、選択的な継承を可能にするためにある。これは、当初は、Microsoft IE において継承に類似なふるまいを導入するために提案された ― ここでは、値 contain は継承されないが。

開始<SPAN class=T_before style="
 user-select:auto;
">テスト</SPAN>終了

class=T_beforeが効かず

text

要素は、選択に拘束を課さない。

<DIV style="border:1px solid red;
 user-select:text;
">
 <IMG src="Com/Picture.jpg">
 テキスト
</DIV>

none

ユーザー エージェントは、この要素内から開始される選択を許容しないものとする。

この要素の外側から開始される選択は、この要素内で終端しないものとする。利用者が そのような選択を作成しようと試みた場合、ユーザー エージェントは、代わりに選択範囲を要素境界の所で終端させるものとする。

<DIV style="border:1px solid red;
 user-select:none;
">
 <IMG src="Com/Picture.jpg">
 テキスト
</DIV>

注記： これを書いている時点では、試験的な実装は、この様にふるまっていない部分がある。Firefox は、そうふるまう。
Chrome、Safari は、ほぼそうふるまう： 選択が要素より後から開始して、要素の中へ後戻りしようと試行している場合、それらはここに指定したようにふるまうが、選択が要素より前から開始して、要素の中へ進もうと試行している場合、要素は all にされていたかのようにふるまう結果、全体を選択する。IE（Internet Explorer）は要素の外側から開始され、要素の中へ行く選択を全く制約しない。
Chrome、Safari における別の相違には、none にされた要素の内側からも選択を開始できることが挙げられる ― 選択が要素の外で終端したときには、要素の境界から終端した所までの選択が作成される。Firefox、IE は、この仕様に述べたとおりにふるまうので、選択を全く作成しない。

しかしながら、この要素の子孫に［user-select の使用値が none にならないもの］がある場合、そのような子孫の中で開始して、終端する選択は、許容される。

ユーザー エージェントは、選択が この要素を挟むように拡張することを許容した上で、そのような選択からこの要素を除外するものとする。
ただし、選択ごとに複数の範囲をサポートしないユーザー エージェントは、この要素を含めてもよい。この要素の子孫に［user-select の使用値が none にならないもの］がある場合、そのような子孫は、要素を挟むように拡張している選択内に含まれるものとする。
この仕様は、クリップボードのふるまいについての規範的な要件は課さない： しかしながら、ユーザー エージェントには、コピー時にクリップボードにコピーされるものと、視覚的な選択との整合性を保つことが奨励される。選択されたように現れないテキストをコピーすること、あるいはその逆は、利用者をひどく惑わすので。

user-select が none にされた要素内から ― それをクリックする／その中からドラッグを開始するなどにより ― 選択を開始しようと試みられても、既存の選択は、いかなる仕方でも ― 未選択にされるなど ― 影響されないものとする。

user-select は、ユーザー インタフェースの便利用の仕組みであり、コピー保護の仕組みではない ― ユーザー エージェントは、user-select が none にされようが、利用者がテキストを明示的に選択する代替的な仕方を供してもよい。

注記： none はコピー保護の仕組みではないので、そのように利用しても、効果は無い：

• ユーザー エージェントには、それを迂回する仕方を供することが許容される。
• サポートしない旧来の ユーザー エージェントには、その効果は無い。
• いずれにせよ、利用者は、ユーザー エージェントの利用者スタイルシートやそれに等価な仕組みを通して不能化できる。

none に意図されているのは、［作者が、選択しても有用にならない UI 要素の選択を不能化できるようにする］ことにより、［利用者が、求める内容を選択し易くする］ことである。［CSS 検証器、linter、ブラウザ内の開発者ツール］などのツールには、経験則を利用して、［使い勝手を悪くしたり、よくある利用者の期待に違反する］ような［不正、あるいは濫用的］な用法を検出して、警告することが奨励される。

注記： 作者は、利用者を不必要に拘束しないことについて注意深くあるべきである。例えば、根要素の user-select を none に設定した上で［作者が選択するに有用と判定した、一握りの要素において、その制約を緩める］ことは、利用者をいらつかせかねない：

• 空な区画をクリックして現在の選択を未選択にすることが、できなくなる
• 作者は、選択可能にすべき区画を見落とすかもしれない
• 後でページに区画を追加するとき、選択可能にし忘れるかもしれない
• 利用者は主だった内容以外のテキスト片を選択したいと求めるかもしれない ― 一例として、それらを［何らかの辞書や翻訳ツールで検索する／検索エンジン内で警告やエラー メッセージを見つける］ためなど…

作者にとって代わりになる良い実施は、［偶発的に選択されると、意図される動作に干渉すると見込まれる要素］に対し、選択的に user-select: none を適用することである。ページ内の［やりとりされないと見込まれる各部］は偶発的に選択可能なままにする方が、その逆にするより、ずっと利用者をいらつかせずに済むと見込まれるので。

contain

ユーザー エージェントは、この要素から開始された選択が要素の外側まで拡張されるのを許容しないものとする。

この要素の外側から開始された選択は、この要素内で終端しないものとする。利用者がそのような選択を作成しようと試みた場合には、ユーザー エージェントは、選択範囲を要素境界の所で終端させるものとする。

ユーザー エージェントは、選択が この要素を挟むように拡張することを許容するものとする。そのような選択には、要素の内容も含めるものとする。

<DIV style="border:1px solid red;
 user-select:contain;
">
 <IMG src="Com/Picture.jpg">
 テキスト
</DIV>

注記： これを書いている時点では、試験的実装のふるまいは、［外側から開始された選択、要素の中へ行く選択］について互いに異なる。このふるまいは、contain を明示的にサポートしないブラウザにすら［<TEXTAREA>／contenteditable］要素の中へ選択しようと試行することにより観測できる。

開始<TEXTAREA style="border:1px solid black;
">テキスト</TEXTAREA>終了

開始<TEXTAREA style="border:1px solid red;
 user-select:contain;
">テキスト</TEXTAREA>終了

開始<SPAN contenteditable style="border:1px solid black;
">テキスト</SPAN>終了

開始<SPAN contenteditable style="border:1px solid red;
 user-select:contain;
">テキスト</SPAN>終了

注記： これは、当初は Internet Explorer における試験的な特能として，user-select に対する値 element の下で導入された。

all

要素の内容は、不可分に選択されるものとする。選択が要素の一部を包含することになる場合、選択は、要素全体を ― そのすべての子孫も含め ― 包含するものとする。要素の親の user-select の使用値も all の場合、要素が選択されたときには、親も再帰的に選択に含めるものとする。

<DIV style="border:1px solid red;
 user-select:all;
">
 <IMG src="Com/Picture.jpg">
 テキスト
</DIV>

この要素の子孫に user-select の使用値が all でないものがあって、選択全体が そのような子孫たちに包含されている場合、［選択が この要素一体を含むように拡張する］ことはないとする。

注記： 選択は、テキストのみならず、［画像、テーブル、動画、等々］まで拡張して、それらを含み得る。そのような選択を［コピーする／ペーストする］ときのふるまいは、この仕様の視野外である。

HTML 用には、次の ユーザー エージェント スタイルシートが追加される：

button, meter, progress, select { user-select: none; }

課題： 上のリストは不完全であり、少なくとも <INPUT> の各種ボタン類は含める必要がある。

旧来の内容との互換性を得るため、user-select をサポートする ユーザー エージェントは、-webkit-user-select も別名としてサポートするものとする。

注記： 別名にする仕組みの詳細は、意図的にユーザー エージェントに委ねられる。-webkit-user-select を user-select の略式プロパティにすることは、有効なアプローチとして既知であり、新たな実装者は それを考慮するべきである。しかしながら、互換性に反する帰結なしに、他の手段を通して -webkit-user-select を user-select の別名としてサポートしているユーザー エージェントも存在するので、この仕様は、そのような柔軟性を許容する。

テスト