CSS3のベンダープリフィックス、まだまだ必要だなと思った

2015年1月7日

WordPress のテーマは Simplicity を使わせていただいてる。

wordpress.com には登録されてない、いわゆる「野良テーマ」だが、
レスポンシブ対応、SEO対策、その他機能も満載。
国産で、かなり精力的に開発を行ってるので好感が持てる。

野良テーマといえど、人気は高く、
Simplicity 導入サイトもかなり増えてるようだ。

子テーマも最初から準備されてるので、
子テーマをダウンロードして、モリモリ改造。
functions.php だけでも1,000行超えた・・・

その他のPHPファイルも、結局30ファイル近く子テーマに突っ込んだｗ

実際のスマホで見たら input が画面外に飛び出した

改造はすれど、レスポンシブは崩したくないので、
ちょくちょく画面サイズを変えて確認しながら、style.css もカキカキ・・・

スマホでも確認作業・・・

・・・アレ？ (･ω･｀)

なんか、検索の input が画面外に飛び出てる。
おいらのカスタマイズミスか？

デフォルトの親テーマに戻して確認してみる。

デフォルトでも、やっぱり飛び出てる。
コメント入力欄の input も同様。

これのせいで、スマホでスクロールすると、画面が左右にブレる。

親テーマの style.css を確認

子テーマのCSSでは input系に手を入れてないので、
親テーマの CSS を確認してみた。

input[type="text"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
textarea {
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  color: #333;
  display: block;
  font-size: 16px;
  line-height: 1.42857;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 290px;
  max-width: 100%;
  box-sizing: border-box;
}

特に問題があるように見えない
なぜだ？ (･ω･｀)

とりあえず width の値を小さくしてみた（・・・結果的には失敗）

もともとの input の max-width が 100% なので、
子テーマ側で、これを 90% にしてみた。

input[type="text"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
textarea {
	max-width: 90%;
	font-size: 14px;
}

width:95% くらいでも、ギリギリ画面内には収まるが、
見た目が、

(´Д｀)
こんな有り様になるので、90% までガッツリ縮小

とりあえず、↓ こーなった

検索ボタンが、input の外側になってしまったが、
見た目としては違和感ないし、
とりあえず、画面内に収まったし、
これでいーか・・・

・・・と思いきや

PageSpeed Insights でユーザーエクスペリエンス減点

PageSpeed Insights で確認してみたら、

あらー (´Д｀)

1点減点されて99点になってもうた。

とどのつまり、<input type="text" /> と <input type="submit" />
の距離が近すぎるぞ (゜Д゜)ゴルァ！
との仰せらしい。

うーん
↓ これは OK で、

↓ これはダメと申されるかｗ

悔しいので本格的な対策に乗り出した

ていうか、PC で見ても飛び出てないし、
@media screen で別の指定をしてるわけでもないのに、
ボックス外に飛び出るってこと自体おかしい。

普通に考えておかしい・・・

で、親テーマのCSSをもう一度見て、ふと気づいた。

input[type="text"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
textarea {
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  color: #333;
  display: block;
  font-size: 16px;
  line-height: 1.42857;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 290px;
  max-width: 100%;
  box-sizing: border-box;
}

box-sizing のブラウザ対応って、どこまで進んでるんだ？

解決

調べたら、box-sizing は Android 4.0 、iOS 5.0 からって書いてあった。

おいらのスマホ、Android 2.3 www
border-radius とか、ちゃんと角丸表示されてるから勘違いしてた。

CSS	正式サポート
border-radius	Android 2.2 から	iOS 4.0 から
box-shadow	Android 4.0 から	iOS 5.0 から
box-sizing	Android 4.0 から	iOS 5.0 から

border-radius はともかく、
box-shadow とか box-sizing って意外と対応遅かったのね。
Android だと、まだ 2系・3系の人とか多いしな。

border-radius や box-shadow なら、大した影響はないが、
box-sizing の場合、margin や padding の量によっては、
かなり影響が出ることがある。

というわけで、子テーマ側でベンダープリフィックス付けてみた。

input[type="text"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
textarea {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    max-width: 100%;
    font-size: 14px;
}