Downloading / Using CSS with JavaScript...?
Posted: Thu Nov 05, 2009 7:31 pm
This is probably one of those questions that you only ask when you think too deeply about something, but nevertheless, here goes nothing (and please bare with me)...
Is there a way to somehow store the contents of CSS files and only use it if a certain condition within a JavaScript logic block is met? Maybe somehow bundling everything using PHP and when it's output, somehow using JavaScript to indicate which CSS file should be dynamically placed within the markup HEAD element depending on the resolution? I know you can do this with classes or IDs on the client-side using only JavaScript, but I'm having problems trying to achieve this type of functionality with entire stylesheet files and I think it's because the files are being cached.
For example, if someone resizes a browser window to 800x600, then stylesheet 'A' would hypothetically be used, otherwise, stylesheet 'B' is applied and stylesheet 'A' is removed from the cache... I've been working on something to get this to happen and it only works if the browser window is refreshed--which means that all of the CSS files aren't being downloaded at once, but instead, only 1 at a time, hence only working via server-side calls... I guess I'm shooting for an Ajax approach at loading stylsheets, but loading only 1 at a time despite having every CSS file downloaded.
I'm pretty sure I'm not seeing things clearly because I have the tendency to over think things, but as it stands in my crazy mind, I'm trying to get every stylesheet downloaded but only used when needed by using JavaScript IF statements.
Could someone help me see through the clouds here? Can something like this be done? I apologize beforehand if this is a ridiculous post...
Is there a way to somehow store the contents of CSS files and only use it if a certain condition within a JavaScript logic block is met? Maybe somehow bundling everything using PHP and when it's output, somehow using JavaScript to indicate which CSS file should be dynamically placed within the markup HEAD element depending on the resolution? I know you can do this with classes or IDs on the client-side using only JavaScript, but I'm having problems trying to achieve this type of functionality with entire stylesheet files and I think it's because the files are being cached.
For example, if someone resizes a browser window to 800x600, then stylesheet 'A' would hypothetically be used, otherwise, stylesheet 'B' is applied and stylesheet 'A' is removed from the cache... I've been working on something to get this to happen and it only works if the browser window is refreshed--which means that all of the CSS files aren't being downloaded at once, but instead, only 1 at a time, hence only working via server-side calls... I guess I'm shooting for an Ajax approach at loading stylsheets, but loading only 1 at a time despite having every CSS file downloaded.
I'm pretty sure I'm not seeing things clearly because I have the tendency to over think things, but as it stands in my crazy mind, I'm trying to get every stylesheet downloaded but only used when needed by using JavaScript IF statements.
Could someone help me see through the clouds here? Can something like this be done? I apologize beforehand if this is a ridiculous post...