I just changed my CSS. I now have a Screen stylesheet, a and an Aural stylesheet. Just three (maybe two) to go: Base stylesheet (for Netscape Navigator 4.x), a Mobile stylesheet and a TV stylesheet. In my screen stylesheet I use absolute positioning to get everything right in the most browsers. Some parts of my CSS are quite interesting I think especially the CSS3 selectors (and some browser workarounds). First the screen stylesheet:
code[class]{
display:block;
width:90%;
overflow:auto;
text-align:left;
letter-spacing:normal;
white-space:pre;
}
This is not CSS3 but It's really cool (only supported by Mozilla). Every code element which contains a class will be converted into a block-level element. If this element gets to width I give it a horizontal scrollbar with overflow:auto;. It's really effective and looks good. Now some CSS3 (and workarounds):
background:#fff; opacity:.75; /* CSS3 */ -moz-opacity:.75; /* Mozilla */ filter: alpha(opacity=75); /* IE, ugly isn't it? */
I wanted that my little background image was shining through the background. In CSS3 it's easy, but it's possible already. Thanx to the IE and the Mozilla CSS Extension. Side note: Every CSS Extension should have a prefix, like -browsername-property:value;, as you can see IE does not. Only the MS Office extensions have that and the required prefix, in Office that's: -mso-.
About the Print stylesheet, first the code:
a[href]{
font-weight:bold;
}
a:after{
content:" [ "attr(href)" ] ";
font-style:italic;
}
/* The following rule is CSS3 [ http://www.w3.org/TR/css3-selectors/#attribute-substrings ]
and is therefore currently not supported */
a[href^="/"]:after{
content:" [ http://www.annevankesteren.nl"attr(href)" ] ";
font-style:italic;
}
This piece of code comes directly out of my source. All hyperlink are first hidden and then comes this set of rules. As you can see everything is hidden for IE, because that browser doesn't understand the advanced CSS2 selectors and it certainly doesn't understand CSS3, that why I kept away font-weight:bold;. For Mozilla and Opera it's very interesting. They both support CSS2 really good and this CSS3 selector is also supported. So what does it do? After every hyperlink (text) the URI is added. But if it's a relative hyperlink which should start with a slash (/), then my URI should be added before that / and that's wat CSS3 can do! Some other time I tell you about my Aural stylesheet.