CSS changes are not getting reflected. Why?
I forgot to close a {
in the CSS file.
That's why all the code didn't show up on the page.
CSS changes are not reflected even after changing version, hard refresh and clearing cache
is it a PWA (progressive web app)... ? in which case the data is served by service worker and not freshly fetched.
Go to
- Chrome developer tools (press F12)...
- Click on Application tab on
- the left navigation, click on "Service workers" and 'unregister"
service workers... - going on the next option in the left navigation, click on "Clear storage"...
- click on the "Clear site data" button on the right zone restart Chrome and check with Ctrl+shift+R
if you're using a CDN, you may have to purge the cache for this particular CSS file from there as well.
css changes doesnt reflect on my project on localhost
Sometimes web browser may keep old version in cache and you may need turn off cache in web browser, or clear it, or try Ctrl+F5
to reload without using cache.
Or you can add random argument with ?
to url - ie, /static/main.css?2020.08.11.08:45
and web browser will treat it as new url so it will read it from server.
In DevTool
in Firefox/Chrome
in tab Network
you can check if it has no problem to load this file. It should show also if it was readed from cache.
CSS File Not Updating on Deploy (Google AppEngine)
I've seen this before on App Engine, even when using cache-busting query parameters like /stylesheets/default.css?{{ App.Version }}
.
Here's my (unconfirmed) theory:
- You push a new version by deploying or changing a new version to
default
. - While this update is being propagated to all GAE instances running your app...
- ...someone hits your site.
- The request for static resource
default.css{{ App.Version }}
is sent to Google's CDN, which doesn't yet have it. - Google's CDN asks GAE for the resource before propagation from step #2 is done for all instances.
- If you're unlucky, GAE serves up the resource from an instance running the old version...
- ...which now gets cached in Google's CDN as the authoritative "new" version.
When this (if this is what happens) happens, I can confirm that no amount of cache-busting browser work will help. The Google CDN servers are holding the wrong version.
To fix: The only way I've found to fix this is to deploy another version. You don't run the risk of this happening again (if you haven't made any CSS changes since the race condition), because even if the race condition occurs, presumably your first update is done by the time you deploy your second one, so all instances will be serving the correct version no matter what.
CSS file not updating on Azure Deploy/Publish
"We are using Cloudflare which has a default set up to cache all CSS and JS files. It purges the cache every 4 hours which resulted in the arbitrary updates. So, even though I was adding a new query string to the end of the css file, Cloudflare still cached the old one"
Just a quick note that you should go to CloudFlare Development Mode when making changes to the static content files on your site. You can get to Development Mode to bypass the cache by going to: settings->Development Mode. You also have the option of purging your cache as an additional option, which we would only recommend if you really want to purge everything.
Firebase not rendering CSS Changes
First I tried changing the .body background color and it didn't work, so the solution was to add a new file 'mobile.css', link to it in index.html, and then redeploy the app.
Edit: After more changes, I've noticed that CSS files can only be deployed once.
@media screen and (max-width: 600px){
.computer-calendar{
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
@media screen and (min-width: 600px){
.mobile-calendar{
visibility: visible;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
Related Topics
Recording and Saving an Svg Animation as an Animated Gif
Vertical Align Center Image in Fixed Size Div
CSS Hide Element, After 5 Seconds Show It
What Does the Scalez() CSS Transform Function Do
Semantic Grid with Bootstrap + Less Mixins ¿ How
CSS Selector for Disabled Input Type="Submit"
How to Maintain Png Alpha Transparency When Using "-Ms-Filter" Property
Understanding the Difference Between the Flex and Flex-Grow Properties
CSS Width and Max-Width Combined
Changing Font-Family for Placeholder
How to Exclude a Tag from CSS Class
Reset/Remove All Styles for Input, Select and Button Across All Browsers Including Mobile
How to Change Extjs Grid Single Cell Background Color Depending on Value Changes
How to Add Custom CSS in Wix Website
How to Add/Insert a Before or After Pseudo Element into Chrome's Inspector