Geek Answers Handbook

CSS changes are not reflected. What for?

I am working on my site, and whenever I add some new lines to my CSS file, it just doesn’t want to use the lines that I made.

But they should be fine.

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

As an example.

The CSS file works on the one hand, but from somewhere it just stops using my file. However, he is tied to 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 part of the code):

  <div class="what-new"> <div class="container"> <h3>What 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>

Does anyone know a solution for this?

+13
html css css3
source share
13 answers

I forgot to close { in the CSS file. This is why all the code did not appear on the page.

0
source share

Typically, the cause is one of the following:

1) Your rule does not apply

This can happen because:

  • your HTML is not very well formed (but usually browsers handle this);
  • your CSS has syntax errors;
  • some other CSS file (with the same / similar rules) is loaded after yours (ad order is considered, the latter wins);
  • some other CSS rules with higher specificity are loaded somewhere on the page and outperform the rules you want to apply (additional information about this answer) ;
  • Some other CSS rules use the !important Important keyword .

You can verify this using your browser’s developer tools (press F12 ) by looking at the CSS panel, where the rules are listed in importance in descending order (from more important to less important).

2) Your CSS file is cached

This can happen because your server or your browser is caching a CSS resource. To force update a resource, you need to press CTRL F5 instead of one F5 , only once (after you redeployed your static resource).

There is well-known SO & Q on this subject , and it is clearly stated that:

  • CTRL F5 works (worked?) Differently in different browsers ;
  • note that although Ctrl + F5 causes the browser to drop the cache and request a new one from the server, the server can ignore the no-cache header and serve the cached page on the server side. Thus, even Ctrl + F5 can return the old version of the page if the server ignores the no-cache header. (from the comment to the accepted answer ).

If the server ignores the browser’s request to clear the cache (sometimes this happens), the fastest way I found to solve this problem is to enter the URL of static resources in the address bar and press CTRL F5 on this page (this is a CSS file), and not on the page importing it. This works in 100% of cases.

To do this quickly, use the Open link in a new Tab from the DevTools browser or click on the CSS link via HTML opened with View Source .

+41
source share

Basically, you encounter a caching problem when your browser does not really want to request a new version from the server and instead uses one cached cache in the internal browser.

A simple use of the developer tools to disable the cache will work during development, but if your workflow is based on frequent posting on the Internet, you will eventually come across a situation where you no longer control which version of your CSS code your visitors see ( and you cannot count on them using your developer tools to disable caching).

To prevent this from happening, you should use the "cache interception" method, which essentially means that you will add material to the resource URLs that will change each time your resource files change. Essentially your CSS url is converted 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 are many reports of cache overflows on SO, so you can take a look at all the available options before deciding how you want to deal with this problem.

My personal favorite method is combining server-side code with mod_rewrite to get a cache override. The workflow is as follows.

1) On the server side, DOMDocument is used to search all resource files in the generated HTML code, such as CSS, JavaScript, etc. Adds the modified timestamp obtained using filemtime .

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

2) When the browser receives a response, it will just have to process this CSS request as a new resource if the added timestamp does not match that in the cache (a resource with a different name is always treated as a new request).

3) Now the browser now sends a request to /css/main.min-1422585377.css to the server.

4) To redirect all requests to one and only main.min.css that actually exist 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 really prefer to include timestamps in the file name itself, so instead of /css/main.min.css?1422585377 I prefer to use /css/main-1422585377.min.css because some proxies like Squid, tend to ignore query strings and will only process part of the file name as relevant.

+6
source share

This happens to me all the time when I work on my website in my XAMPP stack on my mac. The solution is to activate the developer options and select the "empty cache" from the developers menu. This forces the browser to update the CSS for the page. I am not familiar with development on other platforms, but I see whether it is possible to clear the cache in my browser.

Also, check your css and make sure your syntax is correct, in particular that you did not specify "}" somewhere.

+4
source share

Close the div you start .what-new h3

CSS CODE:

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

If your browser does not reflect the changes made to the CSS stylesheets, try the following:

  • Right-click the document in the browser window.
  • Go to the page view source.
  • In the code, find the link to the attached CSS file. Go to the attached CSS file and see if it contains your latest changes. If you do not update your CSS file and all the latest changes will be displayed.
  • Reload the document and the changes will appear. Open the CSS file in your browser. Reload the CSS file in your browser . Hope this helps!
+2
source share

For Django, "clearsessions" and then "runningerver" will update all settings in the .css file.

You should also clear your browser cache.

+1
source share

This is mainly due to caching your browser. Delete cache by deleting history and deleting caches or as suggested above, just press ctrl + f5 instead of just f5

0
source share

In fact, the browser gets the old cache file from the browser cache. you need to flush the cache, then try. I was the same problem too ...

0
source share

A lot of suffering and having done all the forms mentioned here.

I found in my CPanel an application called Cachewall , I will just disable it and this will solve my problem

It may help someone

0
source share

In my case, the error was that I did not install the package in VS2017 with the name Bundler and Minifier. After installation, all changes, for example. main.css automatically changed and main.min.css and web publishing took the actual CSS file.

0
source share

I am facing the same problem, but I found a solution. after adding or changing css properties in css_2-play.css

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

change CSS file name to something .css

 <link rel="stylesheet" href="style/something.css" type="text/css"/>

Remember to rename the CSS file in the Orignal directory.

0
source share

Have you tested your cache apps on the web hosting side?

Also, did you try to clear your DNS machines? To do this, run the ipconfig / flushdns command and see if it makes any changes.

0
source share

More articles:


All Articles