CSS changes are not getting reflected. Why? [closed]

Question

I am working on my website and whenever I am adding some new lines to my CSS file, it just doesn't want to use the lines I made.

Yet, they should be alright.

.what-new {     padding:2em 0 4em;     text-align:center; } .what-new h3 {     font-size:4em;     font-weight:700;     color:#000;     margin:0.5em 0; 

Just as an example.

The CSS file is working at one part, but from somewhere it just stops using my file. Yet, it is linked in the < head >.

<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/> 

And my HTML code is the following(note that this is just a part of the code):

    <div class="what-new">     <div class="container">         <h3>What's new</h3>         <div class="blog-news">             <div class="blog-news-grid">                 <div class="news-grid-left">                     <h4>06</h4>                     <small>of january 2015</small>     </div> 

Anyone know a solution for that?

Answer 1

This means that your CSS rule is not applied or that your CSS file is cached.

The possible causes are:

• a CSS rule with a higher Specificity is winning over the rule you expect to be applied
• a CSS rule with the same Specificity is loaded after your
  (the order of declaration counts - the latter wins - so check your CSS file imports)
• a CSS rule targeting your object uses the !important keyword.

Inspect how the rules are applied through the browser's Developer Tools (open with F12).

HINT: In the CSS panel, the rules are listed by importance in descending order.

• your CSS has syntax errors
• your HTML is not well-formed

Use some validator.

• your browser is caching the CSS file

Force the refresh of the browser-cached resource by pressing CTRLF5.

HINT: This Q&A explores the subject.

• your server is caching the CSS file

Force the refresh of the server-cached resource by entering the URL of the static resources in the Address Bar and pressing CTRLF5 on that page (that is the CSS file).

HINT: To open the CSS file's URL fastly, use Open link in a new Tab from the browser's Developer Tools, or click on the CSS link in the HTML opened with View Source.

Answer 2

You are basically facing a caching issue where your browser doesn't feel like actually requesting the new version from the server and instead uses the one cached in the internal browser cache.

Simply using Developer tools to disable cache will work during development but if your workflow is based on putting stuff online frequently you will eventually face a situation where you are not anymore in control which version of your CSS code your visitors see (and you can't count on them using their Developer tools to disable caching).

In order to prevent stuff like this from happening you should use a technique called "cache busting" which essentially means you will be appending stuff to your resource URLs that will change every time your resource files change. Essentially your CSS URL transform from this

<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/> 

to something like this

<link rel="stylesheet" href="style/css_2-play.css?1422585377" type="text/css"/> 

There is a lot of coverage about cache busting on SO so you might want to take a look at all available options before deciding how you want to handle the issue.

My personal favorite technique is combining server-side code with mod_rewrite to achieve cache busting. The workflow is as follows.

1) Server side code uses DOMDocument to look up for all resource files in the generated HTML code like CSS, JavaScript etc. and appends a modified timestamp retrieved with filemtime.

Example: /css/main.min.css becomes /css/main.min-1422585377.css in the code that will be served back to the client (browser).

2) When the browser receives the response it will simply have to treat that CSS request as a new resource if the appended timestamp doesn't match the one in the cache (resource with a different name is always treated as a new request).

3) Browser now send a request for /css/main.min-1422585377.css to the server.

4) In order to redirect all requests to the one and only main.min.css that actually exists on the server we use a simple rewrite rule like this

RewriteRule (.+)-(\d{10,}).(css|js|jpg|jpeg|png|gif)$ $1.$3 [L] 

NOTE: I actually prefer to include timestamps in the filename itself so instead of /css/main.min.css?1422585377 I prefer to use /css/main-1422585377.min.css because some proxy servers like Squid tend to ignore query strings and will treat only the filename part as relevant.