*

CSS user-selectを使うときは要注意 !

公開日: : CSS ,


css

CSSの要素でuser-selectというものがあります。

この要素にnoneを指定すると当該コンポーネントは編集ができなくなるというものです。

複数のブラウザに対応させるには恐らく下記のように書くと思いますが、ここで要注意!

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

上記のうち、-webkit-user-selectはChromeとSafariブラウザが対象となりますが、Chromeでは効かず、Safariでは有効になります。

ChromeではOKなのに、結果Safariブラウザでアクセスした人は編集が出来ないという自体に陥ります。

全部のブラウザで隅々までテストしろよ と言われればそのとおりなのですが、先入観で見落としガチかと思い投稿させていただきました。

下記のインプットボックスに -webkit-user-select: none を設定しました。Chromeでは編集可能なのに、Safariでは編集できないと思います。

以上、この投稿が誰かのお役に立ちますように。

Ads by Google

Ads by Google

関連記事

no image

スマートフォンで横長のテーブルを扱う方法

table,table tr,table td,table th{border:1px solid

記事を読む

no image

2014年に流行るウェブデザイン5+1個

洋服がそうであるようにウェブデザインにも流行りがあります。今年はフラットデザインが猛威を振るいました

記事を読む

Ads by Google

Ads by Google

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Ads by Google

Ads by Google
新着記事をRSSで受けとる
PAGE TOP ↑