Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Python Flask Basics Templates and Static Files Static Files

CSS file changes

While trying to replicate the steps I am able to make the app is running on a normal PC not mac and run it in Chrome once my pc. However, when I am trying to change the css file to other colors the only way to see the changes is by changing the port. I have look around and found <link rel="stylesheet" href = "/static/styles.css?parameter=1" type="text/css"/>

to add type="text/css"/ at the end as well as parameter=1 to make the app dynamic hoever it does not work.

is there a way to see the changes without changing the port?

1 Answer

Alex Koumparos
seal-mask
.a{fill-rule:evenodd;}techdegree
Alex Koumparos
Python Development Techdegree Student 36,861 Points

Hi Juan,

The problem you are running into is your browser's cache. As long as the stylesheet looks the same to your browser, it uses the cached version stored locally instead of the updated version from the server. You could verify this by going into Chrome's settings and selecting the option to delete cached images and files then reloading the page. You should see your changes reflected.

Obviously, this is not something you want to do every time you update your stylesheet and this is why you've seen some of the suggestions that you mention on the internet. Specifically, the most common suggested workaround is to add a dummy query string at the end of the url to your stylesheet, usually to something like the timestamp of the change you made. As a query string, it won't change anything about how your stylesheet is loaded, but it will look like a change to your browser, which will trigger it to invalidate its cache.

Example:

your current stylesheet link:

<link rel="stylesheet" href="/static/styles.css">

Now, suppose you make a change on 2017-09-27 at 5pm, you could add a query string to the end of the url like so:

<link rel="stylesheet" href="/static/styles.css?q=20170927.1700">

Later, you decide to make another change to the stylesheet, you would go back to the layout.html and change the query string to the new timestamp, let's say 2017-09-27 at 8pm:

<link rel="stylesheet" href="/static/styles.css?q=20170927.2000">

I think the reason you have not seen this approach work is it looks like you've added a query string once and then left it with the same value. If you leave it with the same value, in your example parameter=1, it will only appear as a change to the browser the first time you add this and not with every subsequent change to the CSS (since as long as your html continues to say parameter=1, the browser won't think to reload the CSS).

There's some really helpful discussion of this issue on Stack Overflow.

Hope that helps.

Regards,

Alex