CSS ユーザー選択属性 recollection_html/css_WEB-ITnose

昨日ノートブックを整理してマニュアルを確認したところ、webkit でのみサポートされていると思っていたため、以前は user-select 属性を無視していたことが判明しました。マニュアルは次のように補足されました。

user-select は、ユーザーによるテキストの選択を無効にします

none: テキストを選択できません
text: テキストを選択できます
all: 全体としてすべてのコンテンツを選択できる場合選択されました。子要素をダブルクリックするか、コンテキストに応じてクリックすると、選択した部分がその子要素から遡った最上位の祖先要素になります。
要素: テキストは選択できますが、選択範囲は要素の境界によって制限されます (Webkit ではまだサポートされていません)

互換性のある処理:

IE6-9 はこの属性をサポートしていません。selectstart で label 属性を使用できます="return false;" 実現するには;

Oprea の古いバージョンは、user-select:none の効果を実現するためにプライベート ラベル属性を使用します。最新の Opera は Webkit プレフィックスでこの属性をすでにサポートしています。

Chrome と Safari を除き、他のブラウザでは、テキストが -ms-user-select:none; に設定されている場合、ユーザーはそのテキスト ブロック内のテキストの選択を開始できません。ただし、ユーザーがページの別の領域でテキストの選択を開始した場合でも、テキストを -ms-user-select:none に設定することで、引き続きその領域のテキストを選択できます。概要は次のとおりです。 :

<p onselectstart="return false;" unselectable="on">禁止被选择的文字</p>

css:

/*在自动生成前缀时*/p{user-select:none;} /*在不自动生成前缀时*/p{    user-select:none;    -webkit-user-select:none;    -ms-user-select:none;    -moz-user-select:none;} 

ユーザー エクスペリエンスに関して言えば、単にドラッグ イベントを回避するなどの必要な補助機能を除けば、ほとんど役に立たないようです (著作権侵害を防ぐのは無意味です)か何か）。

でも、今ではフォントを使ってアイコンを作るのが一般的になっています

側面の下部にあるコピー切り替えボタンのアイコンは、アイコンフォントです。ユーザーが頻繁にクリックすると、選択されたテキストが非常に見苦しく、調和のとれたものに見えます。ここで user-select:none を使用するとよいでしょう。

それでは、簡単なヒントです。

フォントを使用してアイコンを作成する場合、アイコンが配置されている要素が頻繁にクリックされる場合は、 user-select:none を追加して、アイコン フォントがテキスト選択として使用されないようにすることを検討できます。見た目に影響します

。