1

I'm hosting an ASP.NET website on Local IIS (not IIS Express), and as soon as I save a change to a .css file in Visual Studio, the change immediately appears in browser windows that use that file (or after mousing over the window in Chrome), without clearing caches and refreshing.

Why do the changes appear immediately?

Opening the .css file itself (not a page using the file) in the browser shows a more expected result: saving the file in Visual Studio does not change what I see in the browser until I refresh the .css file.

Micteu
  • 451
  • 5
  • 17
  • **"and as soon as I save a change to a .css file in Visual Studio, the change immediately appears in browser windows"**, **"saving the file in Visual Studio does not change what I see in the browser until I refresh the .css file."**. cant make up your mind mate? – Banana Dec 09 '14 at 18:51
  • @Banana Sorry, I thought that might be a bit ambiguous, and I guess it is. When the .css file is viewed in the browser, the text doesn't change until a refresh occurs. When a page (that uses the .css) is viewed in the browser, the changes to the .css file are visible on the page (and the developer tools for the browser) immediately. – Micteu Dec 09 '14 at 19:04
  • i still dont understand. do you mean that the css page's content doesnt change until you refresh, but the aspx page shows the changed anyway? – Banana Dec 09 '14 at 19:06
  • @Banana Yes, I believe we're on the same page now. – Micteu Dec 09 '14 at 19:15

2 Answers2

1

As it turns out, I had Browser Link enabled in Visual Studio, and with it, CSS Auto-Sync. This opens up a port on the local machine and uses SignalR to communicate with the browser window about 400 times per second, including any CSS changes needed.

For more information, see these topics:

Community
  • 1
  • 1
Micteu
  • 451
  • 5
  • 17
0

This probably happens due to caching. when you open the css itself, it retrieves a new copy from the server, but when you open a page that uses the css file, the css file is being cached as the page's resource and the browser just shows the cached resources until you force it to reload them.

a trick i learned to fix the issue, is to link the css file to the aspx page and include a random query string to the linking, that way it tricks the browser to think that its a new resource and reload it from the server anyway.

like this:

<link href="../stylesheets/MyCSS.css?<%=DateTime.Now%>" 
      rel="stylesheet" type="text/css" />

we use the aspx preprocessor directive <%=DateTime.Now%> to append the current time as a query string, to ensure the link is always different.

  • Dont forget the question mark between the css filename and the preprocessor directive
Banana
  • 7,424
  • 3
  • 22
  • 43
  • Sorry, I've been meaning to tinker with this, but my projects got re-prioritized. – Micteu Dec 11 '14 at 18:54
  • This causes the behavior to look more like I would expect it to, yes, but why does (without the change in this answer) the page update automatically? How does the update get communicated to the browser? – Micteu Dec 12 '14 at 17:33
  • Because apparently the browser only caches resources. When you open the css page, its not being regarded as a resource so it gets an updated version, but when the css is being linked to the webpage it becomes a resource and is being cached alongside the images and other resources – Banana Dec 12 '14 at 17:39