CSS - Renaming Css Files To Disable Caching In An Svn Setting
Whenever I roll out a new feature (including new layout) to the production version of a website I am working on, I know that it won't properly work until a user downloads a new version of the relevant CSS files. For new users this happens automatically, but existing users have to wait or hit refresh. The result is that the pages look bad for some users when I make changes.
I would fix this problem by renaming the CSS files whenever I make changes, but this can get a bit unwieldy since I use SVN for source code management. I would have to make a revision to other source code files solely to reflect a change in the CSS file. Another idea is to control the name of the CSS file from a constant or from my database, but each has its downsides (complexity, performance in the case of the db calls). Is there any easy way to have caching of CSS files, but somehow break through that cache when I make changes? I am guessing not since the cache is based on expiration settings set by Apache, which to be meaningful need to be long. But if you have encountered this issue before, I'd love to hear what you did! Similar TutorialsHello, I seem to have a problem whereby IE6 isn't caching images called from my external CSS file/s at http://www.dragonflyoffice.co.uk/. In FF, if you visit the site and go elsewhere or close the browser before returning to the site, the page loads instantly but IE seems to download pages and images each time. I'm afraid this is hampering the expeience for users without high speed connections. Does anyone else know about this? I've trawled the web and found nothing Does anyone know if when a browser loads a stylesheet, it loads all linked images into the cache - even if they are hidden from view initially? Or do browsers in general wait until the image is required to download it? I'm intrigued because I'm using :hover to do a background image swap. Cheers Hi, we've been having a problem since about the start of this year, and i was wondering if someone could help us? When we make changes to our styles sheets they appear to be cached, and the changes dont appear for sometime, clearing the cache of either IE or FF doesnt seem to help, ctrl-f5 doesnt seem to help. A few things that can sometimes help are navigating to the stylesheet itself, press ctrl-f5 then navigating back to the site, but that does not always fix the issue. Also switching between a firefox and ie tab in firefox with the IEtab extension sometimes helps. We are have 3 dedicated servers 1 internal, 2 external, all 3 servers have had the same problem. We have spent several years developing sites on 2 of those servers without problems. No other types of files seem to cache but style sheets are the only files we reguarly change (one of the benefits of moving away from table layouts ). Any help will be greatly appreicated. I am working on a site, http://callagy.netdbs.com It seems when ever I open a page, make a change, it works just fine insofar as the change is made. BUT, if I make a change to the style sheet (style.css), the change is not effective in the site until I save it as something else,then change the ref. to it in a given page. I then need to go back and save the css file back to style.css so I can see the chagne site wide. Tom Can you cache external css files (to make pages that use the same css file load faster)? If so, how? BTW, here is how I currently load my css (from zen garden): Code: <STYLE type=text/css media=all>@import url(/main.css); i have <meta http-equiv="cache-control" content="no-cache" /> in my head, but i DO want people to cache my .css file because that means less loading time for them. HOWEVER, only if it is not new. is that possible? I'm writing an application that uses stylesheets to display certain items. The user can alter the positioning etc. of these items (which then rewrites the stylesheet for future use), and then reloads the page. Unfortunately the old coordinates are still apllied to the elements in question until I manually hit the browser's reload button, then the new values are used. I'm guessing the style is being cached somewhere? If so can anyone advise how to stop this? thanks p.s. Its just a basic refresh that sorts it out, not a *hard* refresh. ================== I've come up with a fix of sorts. If I write the style out dynamically within the div itself each time then my problem is solved. In what order are CSS/html files loaded? Concurrently? What about browser rendering? Must all CSS be loaded before any html is rendered? Also aside from serverside compression / css whitespace (file) compression, removing redundant classes, and using relative paths, is there any other ways to speed loading of CSS? Would it be of benefit splitting my css file into smaller chunk files - would they all load concurrently and therefore faster? Does anyone have a good solution for forcing the cache of css files, but not the html calling the css? Thanks in advance! Ross Hi. Is it possible in the same page to use a css and in the middle of the page, disable it and use another for the rest page another? I know that if i include two similar css the last override the first in the whole page. Can i use them both ? Hi there, In my stylesheet I've written a style for the table tag: Code: table { width: 500px; margin: auto; text-align: left; border: 1px solid #999999; font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif; line-height: 140%; margin-bottom: 10px; padding-bottom: 15px; font-size: 14px; padding-left: 10px; } All the main tables on my site need to be this exact style. I now need to create a table which shouldn't use the table style above. I could have just pasted the stylesheet info directly to the page (and delete the css link at the top of the page), and then delete the table info, but can't do this because the stylesheet link location is dynamic (my new site design will alternate a stylesheet every 24 hours). Anyone know how I can tell the css to not apply the style to an element? Thanks, saj Can you use a stylesheet to effectively disable the link, so that you can't click on it; that it will appear simply as text? Thanks Is it possible to disable JavaScript with CSS? For instance, I need to disable a JavaScript popup on this site. The popup is triggered if the searched word isn't found in the dictionary. This site isn't mine, but I'd like to load it in a kind of frame. is there a way to disable the 3d shadowing effect on form fields? so i can just have a border. Hello I would like to change the cursor when it is over on a link with an defined file extension. It does not work well: the test.zip link is OK while the test.ZIP link does not have any effect. How can i disable the case sensitive in the following code so that work? Thank you PHP Code: <html> <head> <style type="text/css" media="screen"> a[href*=".zip"] {cursor:help;} </style> </head> <body> <a href="http://www.abc.com/test.ZIP">test.ZIP</a> <a href="http://www.abc.com/test.zip">test.zip</a> </body> </html> Hi, I need a class, that if I apply to a DIV tag (which has login form), It makes the background of that div a dull colored. Also I want to know if I need to force the user to first close that div before any other action outside the div. I hope this make sense. I am not sure if it can be done only with CSS or it also needs javascript. I would like to prevent safari from highlighting the field that has focus. Is this possible? I'm doing a similar effect on my site and it looks bad when they are combined. Thanks anyway to disable a user from viewing your css source? not particular for me but, i think there might be a way with php in the css file, but it still displays the code when i go to the file I'm fighting with this for a while now. I want to change my table layout into div based one, but keeping all the positive features of table design. The layout is based on percents and em (the liquid philosophy) The problem: Make div resize like table cell with minimal width equal to width of widest unbreakable element. I don't want my "verylongunnecesaryword" stick out of menu div nor dissapear partaily when resizing the window. I basically want the menu to always stay wide enough to accomodate the longest word and resize dynamically with window and fonts. There is no such problem when using tables, cells automatically resize to fit content and never become so small that content sticks out or disappear. Setting the min-width with either em, px nor percent is a no go, because it's impossible to tell what size will the biggest element be. No javascript either. Also keeping it IE6 complaint would be good. I still think that tables are the best idea and unless someone shows me how to fix this problem with div and css, I'm just sticking with tables till the end of world. shortened HTML: Code: <div class="menu"> menu here </div> <div class="contents"> the rest of page </div> shortened CSS: Code: .menu {float: left; width: 20%; padding: 1%; } .contents {float: left; padding: 1%; width: 76%; } Forms are needed to submit values, of course. But they may also change the formatting on a page when included. If I want to include a form just to contain hidden input fields, or even include it otherwise for some other reason, it will affect formatting. Is there a way to disable all presentational effects caused by inserting a form tag? I'm assuming this would involve CSS. Skolem Coding my site up, and I've hit a stump. I've got a box div that I'm putting text in. I try adjusting the height, and it works fine in Mozilla/Firebird, but IE just seems to ignore it (which is causing me problems). Anyone familiar with this? |