I have project. I used HTML and external CSS. But when I create CSS file and save it, it works. But when i add more data in the CSS file, It only load the previous CSS. The new CSS file i added recently it's not working.
So i have to always create new separate CSS file on every page before I save it. I don't know how to make it works using only single CSS file for my project on my base UI.
and if i copy that style to the body of HTML(inline CSS) it's totally working. But when i added that file into style.CSS it's not working unless i create new file CSS.
Do you know how to solve this?
The static resources are probably getting cached in your browser. Try to do hard-refresh your page by pressing Ctrl + F5 or Ctrl + click refresh button.
https://www.getfilecloud.com/blog/2015/03/tech-tip-how-to-do-hard-refresh-in-browsers/
Related
I am using dev_tools_hot_reload=False like below and I have style.css file in asset folder. I am wondering if I can still refresh CSS file only? From below website, it does say " If only CSS changed, then Dash will only refresh that CSS file.". However after I use dev_tools_hot_reload=False, changing CSS file will not refresh my page style.
Thanks
app.run_server(mode='external',debug=True,port=8050,dev_tools_hot_reload = False)
https://dash.plotly.com/devtools
Whenever I make changes to files I am hosting for my website, like the CSS files, they never update. Even after deleting the original CSS files everywhere, using Chrome's inspect element still shows that the websites HTML is being styled by the "style.css" file that doesn't exist. The only way I have found around this is by changing the HTML pages to be styled by a "style2.css", and renaming my updated CSS file to "style2".
Is this not insanely weird? Ghost files? I'm not going crazy right?
Try refreshing with CTRL+F5 instead of only F5
This will clear the already cached files like css and js and will reload the updated ones
Let's say you have style.css
with
.body{
background-color:white;
}
after that you change the same style.css file to
.body{
background-color:black;
}
sometimes the navigator won't read the new code in css/js
and will load the old ones unless you clear them
This could be your problem, try it and check again
Or you could check out this case : How to force the browser to reload cached CSS and JavaScript files
I have a problem when I try to import css from folder. When I change something in css file, it just won't apply changes. When I try it inside the folder where is my php file, it works well.
If I delete everything in css file it just don't do anything. Like the file is saved and anything I do it won't apply any changes.
<link rel="stylesheet" href="css/moj.css">
Press Shift when you reload. That will clear the cache and load the new CSS changes.
It is a rookie problem. Happy Coding.
Go into inspect element mode, and right click on refresh button (Chrome) and click "Empty cache and hard reload" .
This fixed my problem!
Have you tried pasting the whole URL (i.e. http://www.). I've found this to work sometimes when it is having trouble pulling the style sheet from another directory. Hope this helps!
I go to the sources tab and try to edit HTML file - I can't
whereas I can edit js/css files - curious, how can I edit the HTML? if I can only edit it via the Elements tab, then what can I do so those changes reflect in the HTML file found in sources? reason I ask is because I want to save the html file with all the different changes I've made using Devtools
It's weird, but I do it by changing whatever I want in the elements-tab, then right click on the <html> tag and press Copy as HTML, then make a new .txt file, paste it in there, and rename it to a .html file!
I'm trying to get Chrome's DevTools to auto reload a page when I save a watched SCSS file which will compile and make changes to the CSS file.
I have the Auto-reload generated CSS option checked, but sadly, it isn't working as expected.
Whenever I make changes to the SCSS file and save it, the page doesn't reload. I have added my working folder to the workspace and also mapped the files (both the SCSS file and the generated CSS) to their respective versions on my local system drive. This, however, doesn't help.
The SASS source maps seems to be working fine as the scss files are reflected in the DevTools inspector:
I'm using Chrome version 31:
Have I missed out anything that I don't know of? What else do I have to do to get this to work?
I used drupal in this case and drupal generate css link like 'style.css?abc'. Problem in this suffix '?abc'. You need to start file mapping from LOCAL (press right-click on local) 'style.css' to WEB 'style.css?abc' (shown in list). Not from WEB to LOCAL. If result is correct WEB-links disappears from list in 'resourses' tab.
here is a good solution, to avoid this mapping issue of .css?201203241721 / .js?201203241721-files as szdv mentioned with drupal. I have had it with typo3 and this solved it:
/* remove in production *************************************************/
//filter typo3 temp file src/href with ?date ending for chrome workspaces
$('script, link').each(function(){
rpString = /\?[0-9]*/;
if(this.src){
this.src = this.src.replace(rpString,'');
}
if(this.href){
this.href = this.href.replace(rpString,'');
}
});
/* ******************** *************************************************/