Browser Caching of CSS files

by

Your file will probably be cached – but it depends…

Different browsers have slightly different behaviors – most noticeably when dealing with ambiguous/limited caching headers emanating from the server. If you send a clear signal, the browsers obey, virtually all of the time.

The greatest variance by far, is in the default caching configuration of different web servers and application servers.

Some (e.g. Apache) are likely to serve known static file types with HTTP headers encouraging the browser to cache them, while other servers may send no-cache commands with every response – regardless of filetype.

…

So, first off, read some of the excellent HTTP caching tutorials out there. HTTP Caching & Cache-Busting
for Content Publishers was a real eye opener for me 🙂

Next install and fiddle around with Firebug and the Live HTTP Headers add-on , to find out which headers your server is actually sending.

Then read your web server docs to find out how to tweak them to perfection (or talk your sysadmin into doing it for you).

…

As to what happens when the browser is restarted, it depends on the browser and the user configuration.

As a rule of thumb, expect the browser to be more likely to check in with the server after each restart, to see if anything has changed (see If-Last-Modified and If-None-Match).

If you configure your server correctly, it should be able to return a super-short 304 Not Modified (costing very little bandwidth) and after that the browser will use the cache as normal.

More Related Contents:

  1. What does the question mark at then end of a css include url do?
  2. Why do browsers match CSS selectors from right to left?
  3. Disabled form inputs do not appear in the request
  4. css ‘pointer-events’ property alternative for IE
  5. Force browser to clear cache
  6. What is use of ‘initial’ value in CSS?
  7. issue with CSS media queries(scrollbar)
  8. How to disable CSS in Browser for testing purposes
  9. Force browsers to load CSS before showing the page
  10. How do I make Firefox auto-refresh on file change?
  11. Is there a way to tell browsers to honor the jpeg exif orientation?
  12. How to always show the vertical scrollbar in a browser?
  13. Which browsers support data URIs and since which version?
  14. Expand a div to fill the remaining width
  15. How to make an image center (vertically & horizontally) inside a bigger div [duplicate]
  16. Margin-Top push outer div down
  17. Add centered text to the middle of a horizontal rule [duplicate]
  18. Make wrapper take maximum width of child image? [duplicate]
  19. How can I display just a portion of an image in HTML/CSS?
  20. Make page to tell browser not to cache/preserve input values
  21. Why doesn’t CSS ellipsis work in table cell?
  22. CSS Float Logic
  23. Centering floating divs within another div
  24. How to center div vertically inside of absolutely positioned parent div
  25. CSS to line break before/after a particular `inline-block` item
  26. Center an image horizontally using CSS
  27. Alternate background colors for list items
  28. Styling HTML email for Gmail
  29. Change Bootstrap input focus blue glow
  30. CSS/HTML: How do I change the color of the check mark within the checkbox input? [duplicate]

Leave a Comment