HTML の COPY 禁止をするにはどうすればいいですか?では、 とかく HTML の COPY 禁止というありがちな問答(FAQ)に即して、 user-select プロパティについて述べた。

逆説的ではあるが、user-select プロパティはコピーアンドペーストを 便利にするために使うべきであろう。 つまりは、小技的にコピペをより便利にするような目的で使うようになって欲しい。

例えば、IEBlogのControlling Selection with CSS user-selectでは、 こんな使い方を提案している。

Also on the news Web page there are some menus and links to other parts of the site. Users likely don’t need to select these items. Using -ms-user-select, the Web developer can specify that text selection is allowed in the news article but not allowed in the menus.

以下、筆者による怪しい和訳。

（筆者による怪しい和訳）ニュースサイトにはメニューやサイトの他のものへのリンクなどが含まれる。。 ユーザがこれらを選択する必要はおそらくない。 -ms-user-select を使えば、ウェブ開発者は、ニュース記事をテキスト選択できるがメニューはテキスト選択ができないよう指定することができる。

怪しい私の訳では、あてにならなさそうなので Microsoft Translator による和訳も貼っておこう。

（Microsoft Translator による和訳）ニュースの Web ページをそこにもいくつかのメニューと、サイトの他の部分へのリンク。ユーザーがこれらの項目を選択する必要はありません。-ms-user-selectを使用して、Web 開発者は、テキストの選択範囲はニュース記事はメニューで使用できるないことを指定できます。

さて、コピーアンドペーストという観点から言うと、 「表示されているテキストなのにコピーできない」他に 「表示されていないテキストだがコピーされる」も重要である。

表示 コピー CSS
○ × user-select: none;
× ○ display: none;など

例えば、twitter.com のリンクの部分はこのようになっている：

<a href="https://t.co/qcITCzV8Mt"
   class="twitter-timeline-link"
   target="_blank"
   data-expanded-url="https://developer.mozilla.org/en/docs/CSS/user-select"
   title="https://developer.mozilla.org/en/docs/CSS/user-select"
   dir="ltr">
  <span class="invisible">
    https://
  </span>
  <span class="js-display-url">
    developer.mozilla.org/en/docs/CSS/us
  </span>
  <span class="invisible">
    er-select
  </span>
  <span class="tco-ellipsis">
    <span class="invisible">
      &nbsp;
    </span>
    …
  </span>
</a>

invisibleクラスについては下記の通り、表示をしないように twitter の CSS で設定している。

.tweet a .invisible,.dm-message a .invisible,.bio a .invisible{
    font-size:0;
    line-height:0
}

よって、twitter.com のリンクをコピーすると、 画面上には https:// や省略部分は表示されないが、

https://developer.mozilla.org/en/docs/CSS/user-select …

と展開されたリンクがコピーされるのである。

惜しむらくは、省略記号はコピーできないようになっていないところ。 つまり、user-select: none を以下のように適用して欲しいところだ。

<a href="https://t.co/qcITCzV8Mt"
   class="twitter-timeline-link"
   target="_blank"
   data-expanded-url="https://developer.mozilla.org/en/docs/CSS/user-select"
   title="https://developer.mozilla.org/en/docs/CSS/user-select"
   dir="ltr">
  <span class="invisible">
    https://
  </span>
  <span class="js-display-url">
    developer.mozilla.org/en/docs/CSS/us
  </span>
  <span class="invisible">
    er-select
  </span>
  <span class="tco-ellipsis">
    <span class="invisible">
      &nbsp;
    </span>
    <span class="unselectable">
      …
    </span>
  </span>
</a>

unselectable という class は twitter.com の CSS には既に入っているのだからね。

.unselectable{
    -webkit-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none
}

このようにすれば、表示は…で後ろが省略された URL が表示され、 コピーするときはフルのURLが（… も付かずに）そのままコピーされるので 便利だと思う。