CSSで書いたコードが突然反映しなくなった原因は、サーバー側のキャッシュ・ほか思い当たること

先日、ふわリンクと、ふわふわナビを導入しました♪装飾して導入後、翌日まで反映していたものが、急に反映しなくなってしまって。

仕方ないから、「 transition: 1s;」の位置をかえたり、コメントアウトも削除したり、Firefox、IE、Chromeでブラウザを変えたり、キャッシュを削除などもしたんです。

まさに、摩訶不思議の世界へようこそぉ♪って手招きされた気分が、2日位かかってやっと、結論がわかったので書いてます。

その他、原因として思いつくことを書き出したので、目次で飛ばして見てくださいね。無事、解決できますように＾＾

CSSで書いたコードが反映したのに、突然反映しなくった理由

優先順位と、サーバー側のキャッシュの関係だった可能性が大きいと、断定する他、理由が見当たらないのが結論ですが、どうぞ。

解らないなりに、考えてみた様子と結果。強引に腑に落とす為に…

このaタグとかとtransitionのコードをCSSの一番下に書いて、その後、ふわふわ動くナビゲーションを入れたんです。ナビゲーションのコードを書いた場所は、また一番下。

どちらもCSS3。その後反映されたけど、突然ふわリンクがダメになったのは、キャッシュが原因かなぁ？って思ってみました。PC側のキャッシュは出来てます。

1. ふわナビ入れても、ふわリンクは反映していた
2. PCのキャッシュは、行っている
3. 反映してたものが、突然反映しなくなる
4. これ▲ココがさっぱりわからなかったんです。（THE　I・MI・HU）
5. ふわナビを入れたからかも？って気付く
   （優先順位問題でした）
6. 反映しましたぁ♪ﾔｯﾀｧ～✧＼\ ٩( ‘ω’ )و /／✧
7. でも、何で3.の記述、突然反映しなくなったのぉ？（MATA　I/MI/HU）
8. もしかしたら、サーバー側のキャッシュ問題かも？と、推測なう
9. .htaccessを確認したら、設定はCSSのキャッシュが1日になってます。
   ふわナビを入れて1日経ってサーバー側のキャッシュがクリアされたって可能性！？
10. って事は、PC側のキャッシュと、サーバー側のキャッシュは別。
11. 昨日ブログ見てくれた人は、今日・・ふわリンクが反映されないっ♪それは、PC側のキャッシュの問題
    今日初めてブログに来た人は、ふわリンクがおかしい状態。サーバー側のキャッシュの問題。
    きっとそう言う事♪ 裏付けはありません。。(๑ơ ₃ ơ)♥
12. 次は、ふわナビがどう動くか・・翌日まで待つ。
13. 翌日→よしっ、ちゃんと動いてる♪

結論まとめ：反映していたCSSのコードが突然反映しなくなった時、何を疑うか？

1つ目のポイント：優先順位

新たに追加したコードの内容が被ってる、それでCSSの優先順位が関係して反映しなくなったって事です。

そこで気になるのが、なぜCSSに新たなコード、私の場合はふわふわナビを入れた時に、その前に書いたふわリンクのコードが優先順位落ちしなかったのか？ですよねっ。PC画面からキャッシュの削除をしてるのに・・。

LINK初心者のCSSが反映されない原因の1つ！優先順位の詳細度とは

LINKCSSの基本、class・id・子孫セレクタなど！HTMLタグの装飾、セレクタの指定方法と優先順位

サーバー側のキャッシュ・.htaccessに記載関連

PC側と、サーバー側のキャッシュは別。ではないかとしか思いつかない。サーバー側のCSSのキャッシュは、1日でクリアされる設定にしています。条件が合致♪

って、結論に落ち着かせました。それ以外全く思いつかないので。

サーバーによってはキャッシュを導入している場合があります。そのキャッシュを削除して確認するなど試す。

2015/12/14追記

キャッシュされる場所は3カ所

コンテンツがキャッシュされる場所は、図1のように大きく分けて以下の3つの場所がある。

• クライアントマシン上のブラウザ
• クライアントマシンとWebサーバの間に位置するProxyサーバ
• Webサーバの背後にあるアプリケーションサーバ

キャッシュをうまく制御することによって、システムの正しい動作を保証するだけではなく、応答時間の短縮、回線の有効活用、サーバリソースの節約といった重要な性能対策になる。

ブラウザキャッシュでパフォーマンス向上―負荷分散装置の落とし穴に注意−

本連載では、現場でのエンジニアの経験から得られた、アプリケーション・サーバをベースとしたWebシステム開発における注意点やヒントについて解説する。巷のドキュメントではなかなか得られない貴重なノウハウが散りばめられている。読者の問題解決や今後システムを開発する際の参考として大いに活用していただきたい。（編集局）

atmarkit.itmedia.co.jp

 

プラグインのキャッシュの可能性

導入しているheadクリーナー系など、キャッシュを保存しているプラグインを導入していると、古い情報が表示されたままです。プラグイン側のキャッシュを削除してください。

コメントアウト

CSSでコメントを書くとき、/*コメントアウト*/を使いますよね。新たに/*コメントアウト*/を付け足しませんでしたか？

コメントアウトの中にコメントアウトを使うと、装飾のみが残され、他のスタイルに影響があることもあります。例えばこんな感じです。

/*
.theContentWrap-ccc a::before {
	content: "★";
	font-size: 50%;
	-moz-transform: rotate(-15deg); /*ココから角度：ブラウザ毎に指定*/
	-webkit-transform: rotate(-15deg);
	-o-transform: rotate(-15deg);
	-ms-transform: rotate(-15deg);
	transform: rotate(-15deg); /*ここまで角度をつける*/
	color: #e4bbfd; /*文字の色：薄紫*/
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.62); /*文字の影*/
	position: absolute; /*基準からの位置移動*/
	left: -1.1em; /*基準の左端からへ-1文字*/
	line-height: 2em;/*fontの高さあわせ*/
}
*/

１行目の/*から、次にある*/5行目ですね。ここまでコメントアウトが適用されて、それ以降が、ただの文字がむき出しになった状態になると、CSSが言うこと聞いてくれない事があります。

	-webkit-transform: rotate(-15deg);
	-o-transform: rotate(-15deg);
	-ms-transform: rotate(-15deg);
	transform: rotate(-15deg); /*ここまで角度をつける*/
	color: #e4bbfd; /*文字の色：薄紫*/
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.62); /*文字の影*/
	position: absolute; /*基準からの位置移動*/
	left: -1.1em; /*基準の左端からへ-1文字*/
	line-height: 2em;/*fontの高さあわせ*/
}
*/

どの装飾をしたいのか、書かれてませんよね。

.theContentWrap-ccc a::before {

この部分がないので、不具合が起きた可能性がありますので、確認してください。

LINKCSSが効かない原因！反映させるため、ブログ初心者さんが確認する7つのこと

閉じるマーク} や、書き終わり;など、決してないか確認

装飾するには、タグの指定と、装飾の始まり{と終わり}が必要です。またプロパティ:値;とコロンやセミコロンが抜けてないか。間違って決してしまった場合反映しなくなります。

CSS検証サービス｜W3CでCSSを検証してみると、おかしな場所が見つかります。

一度試してみてくださいね＾＾

さいごに

何かあったら、すぐググれる、調べられるのって便利ですよねっ♪「ビバ★りずむ」私のブログタイトルですけど、調べるのって楽しいねって意味です。人に聞いても楽しいですので、聞ける時は聞いてください♪

調べたら、少ないながらも知識は付きます。ただ難点があるとしたら、調べるのにめちゃくちゃ時間を費やして、記事が書けない！

書いてる内容が解かりにくいって時は、お声かけください。解かる内容の範囲でお答え出来ますが、わからない事も多いです。なので、知識の共有させてくださいねぇ♪

解決したらシェアで教えてください。このページで解決できますように…

それでは、かうたっくでした！