On Thursday 16 July 2009, Patrick Doyle wrote:
> > Unless your stylesheets are prohibitively large, I suggest you
> > don't actually switch stylesheets. Instead, set the class of the
> > BODY element and and add the appropriate classes to your style
> > rules.
> >
> > Michael
>
> Hmmm.... I'm inheriting the stylesheets from another project, so I
> don't know if that would work or not, but I can look into it.
>
> I am curious, being quite the CSS newbie, how/if it is possible to
> change the style rules dynamically. I was under the impression (from
> having seen what was done before) that I would have to load different
> stylesheets depending on what style (large font, small font, high
> contrast, normal contrast, etc...) I wanted my pages displayed.
Well, that's a way, of course.
> Are you saying that its possible to globally change the style rules
> programatically somehow?
Yes:
<body class="large-font">
<div class="whatever">...</div>
</body>
.large-font .whatever { font-size: 200%; }
.whatever { font-size: normal; color: #000; }
Both rules apply to the inner div, thus you get black text, but as the
first rule is more specific, its font-size supersedes the one defined in
the less specific rule.
> Oh wait a minute... are you suggesting I apply the
> "large-font-high-contrast" style to the body element from within the
> application template? I see how that could work.
Not quite. I suggest something like this
<html>
<head>
...
<script type="text/javascript" src="javascripts/prototype.js" />
<script type="text/javascript" src="javascripts/switcher.js" />
</head>
<body>
...
</body>
</html>
switcher.js: Here the magic goes. Check window.location.href or the
cookie specify any particular style. If they do, change the class of the
BODY element
Element.addClassName(document.body, 'large-font');
> What is the
> benefit of doing that as compare to the way I've seen it done (on
> another, PHP, project) of loading one stylesheet or another at the
> time the page is served?
You can apply changes dynamically without a round-trip to the server. If
you currently have pages that are static, but for the style-switching,
you can make them completely static, i.e., they can be served by the web
server without any processing by Rails.
Michael
--
Michael Schuerig
mailto:[email protected]
http://www.schuerig.de/michael/
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Talk" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---
