CSS creating problems for cache? - html

Question

I was making a website and after doing some coding with css, I pushed the data to my hosting. But, the website css wasn't showing up what is was supposed to be! I got a lot of support here, discord, and namecheap (my hosting). And they all said it has to do with browser caching.
After doing some experiments I concluded that it changes with wifi connection. I went to my school wifi and the css looked normal, but back home it didn't look what it was supposed to.
I isolated the error and found it had to do with 1 css file. But after taking the identical code to a different file it worked fine. Granted, the code did change while I was putting it into a different file since there was css there before.
Here is the code that seemed to cause it:
h1 {
font-family: "JetBrains Mono ExtraBold", monospace;
color: #2474ff;
text-align: left;
float: left;
margin: 5px 30px;
font-size: xxx-large;
box-shadow: 0 0 25px 5px #0ff;
border: solid dodgerblue 4px;
border-radius: 15px;
animation: crazy 3s infinite;
}
#keyframes crazy {
50% {box-shadow: 1px 2px 3px blue}
}
.content {
font-family: "JetBrains Mono", monospace;
font-size: 14px;
border: 4px solid dodgerblue;
box-sizing: border-box;
width: 300px;
height: 500px;
padding: 5px;
display: block;
border-radius: 10px;
}
.content h3{
font-size: 30px;
font-weight: bold;
text-align: center;
}
button {
font-family: "JetBrains Mono ExtraBold", monospace;
}
a {
float: left;
margin-left: 15px;
The problem is fixed now, but I wanna know why this was happening.

Answer 1

This is the intended behavior of browser caching; it's not an error. Your browser "remembers" a file it's already downloaded, and saves that data locally for a period of time instead of re-loading and re-reading it again, so that sites load more efficiently.
Since, while you're developing and frequently changing a file, you don't want this behavior, there are a many things you can do. These are just a few:
• Developer tools built into web browsers, like Chrome Inspector (which will benefit your development in many other ways as well) will have a setting to disable browser cache when it's active, so every time you refresh a page, it will automatically download the freshest files
• You can manually clear the cache on your browser. Most browsers have shortcuts for this (for example, holding down shift while pressing the reload button)
• A simple way to make sure everyone else's browsers downloads the most recent version of your css file, too, is to add a querystring to the end of your css link, and change it every time you make an update. e.g.:
<link rel="stylesheet" type="text/css" href="styles.css?v=1">
(next time you update the file and want to make sure everyone sees those changes, change v=1 to v=2)

Answer 2

This is a browser feature. One of the simplest ways to get around the issue is to "hard refresh" the page.
On Windows it's ctrl + F5
On Mac it's cmd + shift + r