文字を選択した時の色＋文字選択時のコネタ

文字を選択した時の色

なぜか自分のはてダにて、文字を選択した時に「背景色変わらない」「文字色ほとんどかわらない」という現象が起きてました。
実際にはこのような感じ。

文字選択前

文字選択後

これではどうにも分かりにくいので、文字を選択した時の色を変更できないかと調べた結果がこれ。
CSS Test Page
Vendre un bien qui est loué à en Poitou Charente : les droits du propriétaire et du locataire |
クロスブラウザのためのCSSのテクニック10選「10 astonishing CSS hacks and techniques」 | DesignDevelop

selection {

background: #ffb7b7; /* CSS3 */
}

-moz-selection {

background: #ffb7b7; /* Firefox */
}
クロスブラウザのためのCSSのテクニック10選「10 astonishing CSS hacks and techniques」 | DesignDevelop

CSS3でサポートされるものらしいので、ブラウザによって対応状況が異なります。
どうしようかと思いましたが、手持ちのIEでは再現しなかったことですし、
普段使うFirefoxだけでも色変えれたらと思い -moz-selection 使ってみました。

その結果がこちら。

可視性が全然ちがいますね！

文字選択時に勝手に選択範囲が広くなってしまう場合の対処方法

ついでに思い出したんでメモ。
IEだけかも知れませんが、ある特定の文字だけ選択したいのに、
マウスでドラッグしていると選択範囲が勝手に広がってしまう場合がありますよね？

さきほどの

を例にとり、

　ちなみにW63CAで撮った写真をEnhance Photo!で自動補正してます。

から『なみにW6』だけ選択したいとします。

手順

IEで『な』から文字を選択していくと…

まだ順調！

しかし、『なみにW』まで選択したところで、選択範囲が『ちなみにW63CA』まで広がってしまいます。
ここでマウスを少し左に戻すと

選択範囲がまたもどりますね。
この状態で再びマウスを右に動かします。

すると、『W63CA』は選択範囲に含まれますが、『ち』は含まれず結果『なみにW63CA』が選択された状態になります。

次に『W63CA』をなんとかしたいと思います。
一度マウスを『W63CA』より右側まで動かした上で左に戻すと…

『W63CA』の途中まで選択することができます。
今回の場合『W63C』まで動かした後でマウスを左に移動しても、
『W63』の途中で選択範囲を止めることができますよ。

！！ポイント！！

ポイントを汎用的に表現してみます。

ドラッグの進行方向と逆側に選択範囲が伸びた場合は、ポインタを進行方向と逆に少し戻す。
ドラッグの進行方向と同じ側に選択範囲が伸びた場合は、選択範囲の進行方向端までポインタを動かしてから進行方向逆側に戻す。(単語の区切りまでで良いかも)

…文章能力の低さを露呈しただけのような気もします。
これについては細かく条件を書くよりも、実際に動かしてみたほうが分かりやすいと思います。
(メンドウだという気持ちも4割ほど)
どこまでマウスを動かして戻すかにより選択範囲の動きは微妙に異なってくると思いますが、
選択範囲が勝手に広がってもまだまだあきらめる必要はないですよ！というのが伝われば幸いです。