| |
Synopsis: The Dynamic CSS utility
lets you offer multiple stylesheets for your web files.
The user selects one, and sets a cookie. After that,
all your files will use the stylesheet indicated by the cookie.
This is particularly useful for users with disabilties,
who can then pick the stylesheet that most easily accomodates
their needs.
Cascading Stylesheets (CSS) is an attempt to separate content
from presentation. This is normally considered a Good Thing,
because it makes later changes a lot easier. It also means
it's quite possible to apply different styles to the same
content, so that the same file can look a lot different
depending on a person's preferences or disabilities.
The Dynamic CSS utility is not about how to write a CSS file,
but rather how to associate a CSS file with an HTML page
on a per user basis. There are 3 main ways of associating
a CSS file with an HTML file:
- Embeded the CSS instructions in the <head> element
of the HTML file. Not very flexible. And the only way
to support multiple stylesheets would be to make
multiple HTML files, each with a different stylesheet
and url. Effectively, you'd have to have multiple
parallel websites, a real nuissance.
- The user can override your choice of stylesheet, and impose
his own. That's fine, but out of your control.
- Keep the HTML and CSS files separate. But in the <head> element
of the HTML file, you indicate the url of the stylesheet.
If this url always points to the same stylesheet, then the
user still doesn't get a choice of stylesheet. (But it's
better than the first option, because you can change the stylesheet
once, rather than once per html file.) However, the Dymanic CSS
utility uses this method, and lets the user point to one of many stylesheets,
becasue the stylesheet url is really a cgi script that chooses
the CSS file on the fly.
|
|
| |
There are 4 pieces to the puzzle:
- CSS files. First create a subdirectory and put your CSS files there.
Be sure the filenames look like style1.css or mystyle.css
or so on. They must end with the extension .css and the name can
only contain letters, numbers, or underscore or period. Don't
use spaces or other funny characters. This subdirectory must
be on the Web, on tigger or icarus. As an example, suppose
the directory is located at:
/usr/local/etc/httpd/htdocs/example/css
Then the url of style1.css would be:
http://www.uic.edu/example/css/style.css
By the way, if you create a css file called default.css
that will be chosen if no other choice is made. Without such
a file, the default css file will be blank. (Which is not
very stylish.)
- HTML files. Each HTML file must include a link to the stylesheets,
which is done indirectly through the css.cgi script. This link
goes inside the <head> element. In the example above,
it would be:
<link rel=stylesheet
href="http://www.uic.edu/htbin/css.cgi/example/css"
type="text/css" media="screen">
Note that the link to the css.cgi script includes information
both about the cgi script itself ( /htbin/css.cgi )
and about your css directory ( /example/css ).
Obviously use www2 instead of www if you are on icarus.
- Links to set cookies. In order to select a stylesheet,
the user must click on a link that will set an appropriate cookie.
These links can appear in any HTML file, where you put them
is up to you. The simplest link would choose a single
stylesheet, and the urls in this example would look like:
http://www.uic.edu/htbin/css.cgi/example/css?setstyle=style1
http://www.uic.edu/htbin/css.cgi/example/css?setstyle=mystyle
Clearly, the part after the = sign is the just file name of
the stylesheet, without the .css part. For another example
of using a select box to choose a stylesheet, see the full
example below.
- A response from setting the cookie. When the user
clicks to select a stylesheet (and thereby set a cookie), what
HTML page does he get in response? That's up to you.
He will get whatever index.html (or index.htm or index.asis)
you have put in your css subdirectory. That is, the response
is redirected to the url: http://www.uic.edu/example/css/
Be sure you put a file there, or the user will get a directory
listing and be very confused.
Caveat. The above works fine for departmental pages,
but not for personal pages (the ones with a tilde). For personal
pages on tigger, you must use the name tigger.uic.edu
rather than www.uic.edu, in all urls that reference css.cgi.
Tigger and www.uic.edu are not the same machine any more; sometimes
that doesn't matter, but it does matter here.
|
|
| |
This is a full example, but uses very simple CSS files.
All they do is change the color of <h2> headings.
The other thing is that I put the links to select stylesheets
on the response page, itself. This has the nice affect
that when you select a new stylesheet, you get the same
page back, rendered in the new style. However, this is
not at all required; you can put style selection links
on any page.
I created a css directory with 4 files:
I also created a main example page
to simulate the main page of your site. All it does is is point
you to the css selector. But it contains an <h2> and
is rendered by the stylesheet, even though it is not in the css directory.
|
|
