When I'm trying to change anything in my CSS files, I can't see any changes in the stylsheet shown to the browser.
After I build the project, I change a style (for example, the background color in default.css from white to black). I then run the project, but the page background still will be white. I think it comes from {% load static %} in my HTML template file, but I'm not quite sure. The only way I found to apply changes in CSS is to create new a CSS file and reference it from the HTML template. Any ideas how to fix it?
There are a couple things here that could be giving you issues.
Your browser is caching the stylesheets. To disable this caching, you can open your developer tools, go the network tab, and click "Disable cache" (in Firefox or Chrome, at least).
Your project is configured to serve the collected files. To fix this, run ./manage.py collectstatic - this will collect all your CSS into a single file, which can then be served.
sounds like caching is on on your browser. if you're using chrome, open dev tools and check the box to disable cache
https://stackoverflow.com/a/7000899/5360912
Related
I'm working on fixing a CLS issue. It would really speed up my development cycle if I was able to make HTML tweaks in the inspector, then be able to immediately run those through Lighthouse. Is this possible?
You can try using local overrides to make changes persist in Chrome Dev Tools. Here's a video that explains it: https://www.youtube.com/watch?v=xNzOUOtnxDc&t=656s
I just deleted an unused CSS file full of fonts and compared the Lighthouse JSON files before and after and it seemed to work.
This is the Lighthouse comparison tool I used: https://googlechrome.github.io/lighthouse-ci/viewer/
This was the first time I did it, so apologies if it doesn't work as intended.
Hope this helps!
I recently added some text effects to my website in HTML and CSS. It runs perfectly on VS Code live sever but whenever I upload the code files on to my cpanel, the effects just seem to go away when I actually click and go on my website and I am not sure why. Does anyone know a fix for this? Here is my website julianwsanchez.com
And this how it is supposed to look:
How It Looks When I open it:
The output I'm seeing on your site matches the output of the code snippet here, effects and all.
Check to see if you have some browser extension that affects the way a site might look (e.g. a dark mode extension). Also, try going to your site in a different browser and/or in Incognito mode.
it Works for me just fine, both the link given, and the files running on localhost
You might need to do a hard reload.
try Ctrl-Shift-R on chrome when viewing the page.
This clears the browsers cache for that webpage,
alternative: open the web page in another browser.
I'm developing a basic web page with css file on my local machine and testing by opening the html file in the browser straight from the filesystem.
This works, but now since using the Chrome developer tools to play around with different styles by editing the css file under the Sources tab, whenever I refresh the page none of the CSS loads until I again edit it in the sources tab - just adding a return to the end is enough to load all the CSS.
Also, occasionally when refreshing the page, the Sources tab shows the contents of the css file as corrupt (a load of random characters)
I've run the css through a validator and that says it is all fine and there is no javascript on the page
I'm not a web developer so probably missing something obvious...
This is happening because you are editing css inside the Inspect Element (Chrome developer tools).
This is because the css literally lives on a webpage and it is pulled from your actual css file on your desktop (css file from the folder of your website).
Because of this, you are never actually changing an actual css on your computer, just in the browser, and that is temporary, because the same old css from your computer will load everytime you reload the page (untill you modify the css on your computer).
You should edit your changes in your actual css file on your computer inside your text editor (notepad++, visual studio code, atom, sublime text, etc ...).
That way, it is going to work as you want ! Hope you understood what I meant, if not, just tell me, so I can clarify again :)
Add this to the nginx configuration:
http {
include /etc/nginx/mime.types;
....
}
this solved it for me.
Thanks
I have successfully installed both netbeans and the chrome extension for doing html/css/js work. It appears to work for the most part but I've seen some questionable activity that is... "limiting".
Netbeans > Chrome seems like a fragile interaction. In netbeans, I select run file, and the page opens in chrome always in a new window (is that right?). Part of the marketing here is that you're supposed to be able to edit the css without having to constantly go to the browser and reload. But in netbeans, when I go to the tab of the css file (in the same project), the chrome page bombs with the Dead Folder icon and the text "Something went wrong while displaying this webpage".
What's supposed to be the process here? It seems to work in principle, but not in practice.
[update]
I had also had the addon problem that if I did Run Main Project while looking at the css file, it would show the css file as if it were the main html file. After setting chrome as the default browser, this action shows the actual main html file. At that point, making any change to the css file, any typing at all, will bomb the chrome page.
Take a look at this tutorial.
Once you run a page/project in Chrome with NetBeans integration, in NetBeans there is a window CSS Styles and slightly different Navigator (in 7.3). Now in browser you can start Inspect mode (for instance right click on NetBeans logo in omnibar and check "Inspect in NetBeans mode") and then you can for instance click on elements in browser and if you do that, the CSS Styles window in IDE shows all css properties and rules applied to selected element. You can edit CSS from either CSS Styles or by plain old editing of CSS file in NetBeans. In both cases, changes are visible in Chrome without any reload (without even saving the css file). And you can also use JavaScript debugger in NetBeans.
I don't know what do you mean by "chrome page bombs", but page cannot be debugged by 2 "debuggers" at the same time in Chrome - so you can either use NetBeans or Chrome Developer tools.
There are many new features in the upcoming NetBeans 7.4 (you can download 7.4 Beta from netbeans.org). You can try it as well.
In which case webpage loads without external stylesheet in chrome or safari ?
I am talking about a case in which webbrowser first loads webpage without stylesheet and then redraw it with css once it becomes available.
It would be great If you give me a small html page with external stylesheet, which always loads webpage without external stylesheet.
I am a webkit developer and want that case to do some development in webkit engine.
I believe that this is always the case. In other words, CSS files are always loaded asynchronously, and when they become available they are stored in the broser and applied to the existing DOM.
If you are interested in slow loading files, you can simulate this and see how your browser behaves. Best way is the following: get yourself a php and apache installation (say XAMPP), instruct Apache to handle .css files as php files (i.e. execute php code in css files), create a new css file and at its to add <? sleep(20); ?>. This will cause the css file to be delayed by 20 seconds, effectively simulating the slowloading.
Other than that, you could also wish to load a CSS file after the page is already loaded. Here you can find an example: http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/