CSS HTML iOS Safari に悩む - KeyHoleTV開発者のブログ

KeyHoleTVのホームページ OISEYER Inc. は、ダサイデザインで、開発者が手で書いている。　HTMLやCSSを emacs で記述しており、デザインツールのたぐいは、gimp と OpneOffice ぐらいである。　デバックは、appach をCentOSにいれて、それで、動作の検証をしている。

ホームページの中で、チェックボックスにチエックを入れると、ボタンが有効になる部分がある。今まででは、JavaScript を使っていたが、CSSでも出来そうなので、CSSに書き換えた。

処理は、

HTMLとCSSだけ！要素の表示・非表示を切り替える方法

と

[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法｜CSS擬似要素・擬似クラス｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

を参考にした。　

これらのページで紹介されているCSSで肝になる部分は、おそらく、

.hidden_box .hidden_show {
    height: 0;
}
.hidden_box input:checked ~ .hidden_show {
    height: auto;
}

div.changed {

color: #000;

}

input[type=checkbox]:checked ~ div.changed {

color: #ff0000;

}

であろうと思う。　これらは、 inputタグで、タイプがcheckbox の時、checkedされているか、いないかで、対象の属性を変える。　上記の例では、checkedされているとき、 .hidden_show、.div.changedの属性を更新するようになっている。　個人的に思う重要な点は、属性の更新ができるものとできないものがあるという点。　例えば、buttonには、 disabledという属性があるが、CSSでは、どうもこの属性の更新ができないようだ。　例えば、 disabled:none; ができると、便利だと思うのだが。 (display:none; は、できるくせに、何故だ。Javascriptを押す人たちが強く主張しているからなのか）　これをするためには、JavaScript を用いるしか方法がないみたい。　方法があったら、教えてほしい。

HTMLでは、

    <label for="label2">クリックして表示</label>

<input type="checkbox" id="label2"/>

と

<input type="checkbox" id="toggle">

<label for="toggle">Toggle Button</label>

となっている。　

さて、iOSのSafariである。　iOSのSafari は、ボタンのtypeやinput のタイプにsubmitを指定すると( <button type="submit" ...>　<input type="submit"..> )、

表示上では、頑なに、トラックの絵のボタンになってしまう。　だから、

テキスト

</button>

で括った場合でも、img やテキストが表示されず、細長いトラックの絵になってしまう。　同じSafariでもMacでは、img やテキストが表示される。

これを解消するために、google でいろいろ探したら、

input[type='submit']

{

-webkit-appearance: none;

}

に行き着く。　どうやら、' -webkit-appearance:'

の属性をnoneにしないといけないようだ。　でもこれでは、正しく表示されない。　理由は、input タグを用いていること。　input タグのタイプがsubmitの場合、 -webkit-appearance　をnoneにしている。　上記のbutton の場合、

button [type="submit"]

{
-webkit-appearance: none;
}

としないといけない。　これで、iOSのSafariでも正しく表示された。　この書き方は、いろいろ探したが、でてこない。　CSSやHTMLを扱っている人にとっては、当然なのかもしれないが、答えを見つけるまで、えらく苦労した。　まず、button に　[type="submit"] が使えるかどうか分からないし、タグは、なんでもよいのかもよく分からない。　個人的には、[type="submit"] は、いろいろなサイトで紹介されており、上の例でもあるように input タグの専売のように見えてしまう。

サイトで、<button ..> タグにする必要性は、販売用のJavaScript がどうやら、 buttonタグのtype しかみておらず、input タグのtype="submit" にしても、JavaScript がそれに反応しない。　当然

idや名前もbutton のものと同じにしても、JavaScript が反応しない。　これも理由がよく分からない。

<form> で囲っているので、その中にある input であろうが、buttonであろうが、　変わらないような気がしてならないのだが。。。

なお、KeyHoleTVのダウンロード・プレミアムモジュールキーの販売は、

www.oiseyer.com

で。