Discussions

Q[HTML5+CSS3]Firefox用のCSSをWebkit用に変換する際の注意点

ブラウザの互換性に関する質問です。
現在コーディングの練習として
Firefox用に書かれたCSSコードをChromeなどで動くように変換しているのですが、
-moz-で書かれたコードを書き換えただけではうまく動かなくて困っています。
そこで様々なブラウザーの対応する際のコツや、ポイントを教えていただけないでしょうか。

以下に現在私が取り組んでいるコードを添付します。
恐らくLine99以降がおかしいのかな、と思うのですが自分のスキルでは解決できません。
解決法がお分かりになった方がいらっしゃったら併せて教えていただきたいと思っています。

どうぞよろしくお願いします。

Sample Code

AAnswer to: [HTML5+CSS3]Firefox用のCSSをWebkit用に変換する際の注意点

GeckoTang

50行目は display: -webkit-box; かと。

chrome12だと間接セレクタの input:checked ~ elm がうまく動かないです。
13以降では動くかと思います。(14devでは動きました。)

他のブラウザが対応してくれた時の為に、各プレフィックスを名前の長い順に書くようにしてます。
-webkit-transition:
-moz-transition:
-ms-transition:
-o-transition:
transition:

ntomita

GeckoTangさん
コメントありがとうございます。
>50行目は display: -webkit-box; かと。
見落としていました。ご指摘ありがとうございます。

>chrome12だと間接セレクタの input:checked ~ elm がうまく動かないです。
>13以降では動くかと思います。(14devでは動きました。)
Chrome側の問題だったんですね。Chromeは大丈夫だろうと盲目的に考えていました。。
お教えいただいたヴァージョンで動かしてみます!

>他のブラウザが対応してくれた時の為に、各プレフィックスを名前の長い順に書くようにしてます。
大変参考になります。特定のブラウザーだけでなく、可能なかぎりすべてのプレフィックスを書いておく必要があるのですね。
HTML5は思っていたよりも大変でしたが、これからも頑張って勉強してみたいと思います。

Post a question

You can post JavaScript, HTML, CSS related questions with attached reference to actual codes and get the answers likewise.

Ask a question

  • 1. Click the ‘Post a question’ above

  • 2. Enter question details, reference code, and click ‘Add question’ button

  • 3. Question will be paired with the code on display

Add an answer

  • 1. Choose a question

  • 2. Enter answer details, attach the reference code and click ‘add answer’ button

  • 3. Your answer will accompanied with attached code

Tag