CSS - Including/caching External Css ?
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); 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'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. 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 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 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 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! Is there a way to include an image via CSS? For example, say, I have a form which I validate using jQuery. For every field that fails validation, I would like to display an error with the help of an external CSS file. In addition, I would also like to include an image - something like an alert sign - right next to the appropriate field. I have gotten the error message part done as shown below, but am stuck at the image inclusion part. Code: .error { color:#f00; display:inline; } Is there a way to automatically include the image for all elements that have the class 'error' assigned to them? Thanks much! Possible? hey guys, I want to have my header image and navigation buttons included in the CSS and not on pages so that I can just have the text for each of linked pages and just include the CSS for header and the nav buttons....how do I do this???? thanks... Hi, i have a computering, games blog and i wanted to change the layout by adding a foter and header ( it is a wordpress blog ) now you see that i included a header but it isnt centered and the body background keeps going to the top how can i change this? http:// filehut.5gigs. com And if it is possible i would like to insert that image ( yet turned around) in the footer Thanks for helping guys Hi folks- This may be a bit off the wall, but what the heck... Is it possible to set up a portion of a document, a "region", if you will, that acts like an external file? I have an E-mailed news service page that's set up using CSS to look and act like a three-column frameset. All three windows can scroll and load independently. I'd like the user to be able to click on an icon in the left column and load data into the column next to it. The hitch is that since this is an E-mailed document, it would be good to have all necessary data self-contained, if possible, rather than accessible remotely via absolute URLs (to avoid having to make the subscriber go to a web site and enter a user name and password). I know that I can load external files into a given "column" by referincing an absolute URL, but does anyone know if it's possible to load only a portion of the current document? (as opposed to simply jumping within the document to a specific point, as with a "name" anchor? Thanks in advance. - Tom Tedeschi I'm looking to make a semi-elastic layout using max- and min-width to keep the main container from dropping below about 750px or stretching above about 950px. I'm hoping that this would allow the layout to work nicely for those with 800x600 displays (I really wish people would stop using 800x600!), stretch out a bit for those with 1024x768 displays and then not stretch out more so as to maintain a decent line length. I know that IE for Windows doesn't support max- and min-width and if these are the only browsers that don't I can use a suitable workaround. However, if there are other browsers that don't support max- and min-width, I'll run into some problems. If anyone knows of any modern browser (i.e. not NS 4.7!) that doesn't support these CSS properties, I'd really appreciate knowing about it. I'd also really appreciate it if people could comment either way - i.e. please also mention if you believe it is only IE that doesn't support these properties. Thanks in advance for any comments! Hi, I have been working my way through the awesome 'Beginning CSS Web Development' by Simon Collison (highly recommended). I have also been studying and using other recourses online too. I am now toying with CSS and have created the following test page. consumer-review [dot] org [dot] uk [slash] test_lorum_ipsum [dot] html The External Style Sheet can be found at consumer-review [dot] org [dot] uk [slash] css [slash] default [dot] css I am pretty happy with it in Firefox 2. However there are three problems that no one has so far been able to help me with? Could you be the CSS genius that solves the problem? I hope so! 1) In IE6 the two floating elements (the smaller boxes on the right) don't appear where they should - they jump around the page and sometimes the content of them doesn't appear at all! Is there a simple code fix for this? 2) In Firefox 2 and Safari the links in the footer don't seem to be accessible (on my two PCs anyway), the pointer icon simply doesn't change to allow you to click! This is pretty strange! 3) In IE7 the titles/anchors that you jump to from the top of the page don't highlight. They highlight a nice yellow in Firefox! Is is possible for IE7 to highlight headers when they are jumped to via an anchor? I have been playing with this page for ages, there is probably plenty of redundant / clumsy code in the CSS sheet. Apologies for that, have only been learning for a few weeks and will neaten up when understand a bit more! I will also speed up the page loading. Thanks for any code suggestions / advice / assistance anyone can give. Good luck. Kind regards Theo. Hi, anyone an idea how to change both text color AND table cell bgcolor on rollover (using style sheets) ? thx Gerhard hi, it seems like my external css is not working... Code: <link href="print.css" rel="stylesheet" type="text/css"> if i convert it to a internal one, it working fine.... i'm using a ie browser .... so if you know what is the problem or how to slove this problem, please reply me... Thanks alot.... I was wondering what is best to use? I don't mean standard internal CSS that is hard coded but I would use PHP to build a template before it is spat out to the browser and it would make an external css file into part of the client side source code. I think this would be more efficient for rendering purposes than linking to external CSS files in a document? Any thoughts? It would also help us in building our cacheing engine. Is it possiable for me to add an external font family on a certain text? I mean.. Is it possible for me to use ttf fonts on css to modify my html page? P.S: I hope It makes sense.. because I'm tired First off, I am a noob, but i learn quickly... I have a cgi site (poor me) and it uses css and javascript, which i am just learning. I noticed that javascript tags refer to an exteral file, since the same fuctions are used on many different pages. The same css definitions are used over and over again also, but they are defined in each page (like 50 or 60 files). Can I create a css only file like my .js files and simply refer to it like i do with javascript? If so what does the format look like? Thanks, JOhn |