HOME>WEBプログラム覚書>[CSS3]text-shadowを使うなら::selectionも設定しよう。

[CSS3]text-shadowを使うなら::selectionも設定しよう。

僕は長文だったり難解な場合、文章を選択状態にすることが多いのですが、 text-shadowが使われてると読みにくい場合があります。

text-shadowを使うなら選択時のことも考えて::selectionを設定しましょう。 特に白をtext-shadowに設定している場合、とても見難くなります。

text-shadow: 1px 1px #FFFFFF;

設定なし

ここはselectionを設定していませんので、選択すると見難いです。

::selectionでtext-shadow: none;を設定

ここは::selectionを設定しているので選択状態にしても可読性が損なわれません。

というわけで、text-shadowと::selectionはセットで設定するようにしたほうが ユーザビリティ的にもよいとおもいます。

CSS

  1. elem text-shadow {
  2.     text-shadow: 1px 1px #FFFFFF;
  3. }
  4.  
  5. elem ::selection {
  6.     text-shadow: none;
  7. }
投稿日 2012年2月28日 12:07
カテゴリ HTML/CSS
タグ CSS3 | HTML5
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1279

コメント

コメントする
Name
Email Address
URL