CSS

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

Pocket

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

-CSS
-,

© 2021 みる米技術部 Powered by AFFINGER5