いつの間にかサイトのCSSが適応されなくなっています。

Question

久しぶりにphpで作った自分のサイトをmacでチェックしてみたら、CSSが適応されておらず、レイアウトが崩れていました。
iPhoneの方ではCSSはきちんと適応されており、レイアウトもちゃんと整っています。

一ヶ月ほど前に確認した時にはmacでもちゃんとCSSは適応されていて、それから一度もいじっていません。

ブラウザもずっと同じブラウザを使っており、設定も変更していません。

何が原因だと考えられるでしょうか？

Answer 1

ソースもブラウザの設定も変わっていないとしても、動作が変わっているのだから何かが変わっているのでしょう。
たとえばmacのブラウザがUPDATEされて、いままで動いていたCSSの解釈が変わったとか？
構文的に正しくない部分の仕様は、ブラウザによってまちまちなので、「UPDATEによってレイアウトが変わる」というのは、あり得る話です。

とはいえ、まずは原因を1個ずつ調査していきましょう。
ブラウザの開発ツールを使って、

• CSSファイルは読み込めているか
• CSSファイルに書かれているスタイルは適用されているか

を確認してください。
そうすれば原因は見つかると思います。

あと私の経験ですが、CSSファイルの文字化けによって、CSSが適用されない場合がありました。
CSSファイル自体の文字コードと、CSSの文字コード宣言@Charsetを合わせたら、解決できました。

Answer 2

私のサイトの場合、OSX10.11.5/Chrome49.0.2623.112で、場合によってflexboxの子要素にmin-widthの指定が必要になったことでしょうか。

以下は、flexboxの子要素の自動計算されたwidthが子、孫に伝達せず、デザイン崩れが発生している例です。

こちらのコミットで加えた２つのプロパティで、この問題を解決しました。

Answer 3

コードを見ないと何とも言えませんが、
CSSのパスがずれているとか、
HTMLが文字化けして読めなくなっているとか・・・