On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • If you change the HTML and the CSS of a page there is a decent chance that a user will get the new HTML but not the new CSS. This is especially true for sites with high usage and users that come back to the site several times a day.

    If they only get the new HTML but not the new CSS then the site will break, the user will get confused, and you will look unprofessional. On the development site of this the problem is already solved. Having a Dev server as a place to test code is standard practice but how does this translate to CSS?

    The problem is that the CSS is cashing on the client side and there isn’t an obvious way of telling the browser to un-cache it. Luckily the key word is obvious. Though it’s not in wide use there is a quick hack that will keep your CSS as fresh as your HTML.

    The trick is to pass a variable on the end of the CSS file like so:

    <link rel="stylesheet" xhref="http://www.stefanhayden.com/style.css?version=1" type="text/css" />

    more explanations on http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/
    • Very useful.
      Thanks smiley
        Wendy Novianto
        [font=Verdana]PT DJAMOER Technology Media
        [font=Verdana]Xituz Media
      • Geez, the way I edit, that could get up to style.css?version=742 pretty damn quickly . . .
          "I’d love to change the world but I can’t find the source code . . ."

          Custom ModX Templates
        • Awesome tip Nissai.
          thanks for posting that link. I’m-a go version my CSS right now!

          -sD-
            Husband, Father, Brother, Son, Programmer, Atheist, Nurse, Friend, Lover, Fighter.
            All of the above... in no specific order.


            I send pointless little messages
          • Is it xhref or href ? I tried xhref and hit problems with IE6 - href worked though, stefan doesn’t appear to be using it anywhere so I couldn’t compare the dtd.
            • The CSS does not cache with this method in my installation of Firefox 1.5.0.4, not sure about IE or Safari. See results for CSS file from Firefox’s

              about:cache?device=disk

              -

              Key: ****://x2.dev/assets/templates/default/css/main1.0.css?version=1
              Data size: 1099 bytes
              Fetch count: 5
              Last modified: 2006-06-10 09:15:03
              Expires: 2006-06-10 09:17:12

              -

              I think that a more reliable way of getting the new CSS rendered is to copy and then change the name of the CSS file to be edited.

              i.e.

              main1.0.css
              or
              main060622.1022.css

              Reference new edited CSS, archive the old version.

              You have to edit an extra file, but at least you get the speed benefits of CSS caching as well as a method of keeping track of changes within your style sheets.

              Quote from: Starbuck at Apr 06, 2006, 08:23 AM

              Is it xhref or href ? I tried xhref and hit problems with IE6

              xhref is not an attribute in any current w3c standard I think it is a typo.
              • Quote from: ram at Jun 10, 2006, 09:26 AM

                The CSS does not cache with this method in my installation of Firefox 1.5.0.4, not sure about IE or Safari.
                This "hack" is not about to get the CSS cached, it’s just the opposite, to "force" the client browser to get new css from server and not use the cached css file.


                  "He can have a lollipop any time he wants to. That's what it means to be a programmer."
                • What exactly is the advantage of caching the .css file btw?
                  • Hi scraf,

                    Caching the CSS can prove fundamental in some site designs, for example sites that, once they are developed, very rarely change. In those instances, massive bandwidth gains can be achieved.

                    What caching strategy is chosen depends very much on the usage and development of the site ...
                      Garry Nutting
                      Senior Developer
                      MODX, LLC

                      Email: support@modx.com
                      Twitter: @garryn
                      Web: modx.com
                    • Quote from: doze at Jun 10, 2006, 06:07 PM

                      Quote from: ram at Jun 10, 2006, 09:26 AM

                      The CSS does not cache with this method in my installation of Firefox 1.5.0.4, not sure about IE or Safari.
                      This "hack" is not about to get the CSS cached, it’s just the opposite, to "force" the client browser to get new css from server and not use the cached css file.

                      Yup, I understand the concept of the hack, but how often do you need to force an update? The rest of the time it should be cached. On a large complex site then CSS can get to 20KB, I don’t particaularly want the user to download this every time.

                      This hack messes up the last-modified/expires values. The only reason (IMHO) hat you should need this hack is if the CSS changes depending on a change of user preferences or small dynamic, regularly changing style sheets.

                      Copy and change the name of the style sheet and we can force an update to styles, keep track of changes and keep the benefits of caching.