cssが抜け落ちる問題

Question

Appcelarator Studioを用いてアプリの開発を行っています。
その際、WebViewを用いてwebサイトを表示させているのですが、最新の変更分のcssのみが反映されずレイアウトが崩れる問題が発生しました。
あまり例がなく、対処方法が思いつかなかったので、styleをhtmlに直接書くことで一時凌ぎを行いました。

内部ブラウザ: Gecko

Answer 1

IEでよくあるのですが、読み込んだCSSがブラウザのキャッシュに入ってしまい更新分がダウンロードさえされていないということがあります。

そういうのを回避するために良くあるのが、CSSファイルを指定するために

href='main.css?20151208'

みたいな書き方することです。

Answer 2

直接記述して適用されたとのことなので、CSSの**”強さ”**が原因かもしれません。

複数のスタイルが記述されている場合はルールに則り優先順位が決まり、最優先のスタイルが適用されます。

1. 前に書かれたスタイルよりあとに書いたスタイルが優先
2. セレクタがより詳細に指定されたスタイルが優先
3. !important が記述されたスタイルが最優先

上記のルールによってスタイルは上書きされていきます。

最新の変更分のCSSがそれ以前に記述されたCSSより優先順位が下になっているのかもしれません。

---

1.の場合

p {color:#FF0}
p {color:#000}

#000が適用されます。

---

2.の場合

body p {color:#FF0}
p {color:#000}

#FF0が適用されます。

---

3.の場合

p {color:#FF0 !important}
p {color:#000}

#FF0が適用されます。