[html][css]safariのtextareaが自動的に動く

今、サイトのメンテナンスをしていて、作ったページをsafari(ver 4)で開いたら、なんと、なんと、textareaの大きさを手動で変更できちゃったのです。

まがいなりにも3年間ぐらいhtmlを書き続けてきましたが、こんな現象初めてです。

だって、↓だけ書いただけだよ。

<textarea cols="30" rows="30">safari version 4で動作確認中</textarea>

最初に開いたとき、↓が表示されました。


で、右下にある模様をドラッグしたら動いちゃったよ。


ちょっと試してみたところ、大きくすることはできるのですが、最初に表示された大きさよりも小さくすることはできないみたいです。

これはバグではなく、safari上の仕様だと思われる。

ちなみに、Safari 3 で textarea のリサイズを制御する方法をみたところ、この現象は、safari3からあるみたいです。

で、回避方法なのですが、CSSから制御するみたいで、先ほど紹介したサイトによると、
style="resize:both;"→縦横両方動く
style="resize:horizontal;"→横方向だけ動く
style="resize:vertical;"→縦方向だけ動く
style="resize:none;"→両方動かない
でオッケーみたいです。

ここで問題となるのは、普段、IEだけしか対応していないサイトを開発していると、html version 5によって拡張されたブラウザの仕様がわからなくなってしまうこと。

確かに、イントラなどは、企業内のサイトなので、当然、導入されているOSがmicrosoftのwindowsだからそんなことは関係ねーっと思っていると技術的にドンドン遅れていく懸念が想定されます。

他のブラウザのことも意識することが大切なのかなと。
日々精進ですね!!

追記
上で紹介したテキストエリアを表示するので、safari3または、safari4をインストールされている方は、是非、試していただきたいです。

safariで動作確認してください。