On Fri, Jun 15, 2001 at 12:09:45PM +1200, Michael A. Koziarski wrote:
> > I believe that you deliberately refrain from such tricks but they work
> > and they _are_ clean CSS.
> >
> > If I'm missing the point please forgive me. :-)
>
> No you're not missing the point :)
>
> As I said when I started this work I am quite millitant on the issue of
> CSS compliance and Netscape4 should be considered broken and have CSS
> turned off. I realise that if we added
>
> """
> td, p, li, div, span, table, h1, h2, h3, h4 h5 .....
> { color: rbg(238,238,238) }
> """
> It will work *ok* in netscape 4 but I don't see the point. I guess I
> could be convinced that as a *temporary* measure the changes could be
> put in. However I'd be inclined to remove them at the moment it becomes
> difficult to maintain.
>
I absolutely agree with you.
However, there's a way to improve the maintainability of CSS. Get rid of
redundancy! Below are a few examples.
But first the remaining issues. This time I looked carefully in your CSS
and XHTML. I noticed the following:
a) You do not use XHTML correctly in some places and hence the problem
with black letters at the bottom of the page. The thing between two
<hr>'s should be inside <p>...</p>. If you used XHTML strict instead of
transitional the validator would've reported the issue.
b) The problem of non-serif bulleted items is related to the previous
colour problem and Netscape obtuseness. Read more below and notice use of
ul, ol, and dl below on the line where I define the fonts.
c) I'm said to say this, but your CSS is an example of _non-user_
friendly design. If you are so militant on the issue of compliance why
do you avoid to comply yourself? You use px and pt sizes all over the
place. The first rule of a good Web design (or any design for that
matter) is: "Give a choice to user." They will choose the preferred
size in their browser. CSS designer should use the relative sizes in em
units (width of a small letter m in a given font). See examples below
for headings.
Finally, I'm back to the issue of maintainability.
There are basically two approaches to writing CSS:
1. Put everything that belongs to an element together, as in:
body {
....
}
You are using that approach.
Advantage: everything related to an element is in one place.
Disadvantage: repetition of things that can be together (e.g. we
want all headers to be bold, why repeat 6 times?)
Hence,
2. Put everything common together. This is the approach that I and
some other people use.
Disadvantage: You have to use search feature of your editor to
find all parts related to a single element (not too difficult).
Advantage: You quickly find and change fonts, colours, weight.
Once all browsers work well with CSS (and there is currently none
that supports it completely -- give me one that supports dropped
capitals?), you can remove elements easily. There is no
redundancy in the code though.
_And it works in all browsers!_
Here's an example:
/*
* Fonts
*/
body, p, ul, ol, dl, address, td, caption {
font-family: "Georgia", serif;
}
h1, h2, h3, h4, h5, h6, th {
font-family: "Verdana", sans-serif;
}
tt, pre, code, kbd, samp {
font-family: "Andale Mono", monospace;
}
/* font sizes are defined below */
/*
* Page layout
*/
body, p, ul, ol, dl {
text-align: justify
}
body {
margin-left: 10%;
margin-right: 10%
}
h1 {
margin-left: -8%;
text-align: left;
font-size: 1.728em;
font-weight: bold
}
h2, h3, h4, h5, h6 {
margin-left: -4%;
text-align: left
}
h2 {
font-size: 1.44em;
font-weight: bold
}
h3 {
font-size: 1.2em;
font-style: italic;
font-weight: bold
}
h4, h5, h6 {
font-size: 1em;
}
h4 {
font-weight: bold
}
h5, h6 {
font-weight: normal;
}
h5 {
font-style: italic;
}
....
As you can see there is not a single repeated element above. You do
not need ul any more in font definitions because browsers work? Fine,
take it from that line and everything is OK. The other important
settings for ul still remain somewhere in the file:
ul.square {
list-style-type: square
}
*******************
To conclude, most browsers are dumb in regard to CSS. We have to provide
precise definitions for all elements instead of relying on inheritance.
To increase maintainability, decrease redundancy. Let's hope that one
day the browsers will understand CSS completely. Till that day we have
to ensure that majority of people can see our pages as we want them.
Unfortunately majority == IE on Windows, Netscape on Unix. And both are
pretty dumb. I remember that IE on Win2000 didn't recognise UTF-8 in the
first xml line of my strict XHTML doc.
And we have to be user-friendly :-)
*******************
> I've put the changes in at http://www.koziarski.org/LyX/www-user/ and
> www-devel but they've introduced other problems (ignoring requests for
> sans-serif fonts etc.)
>
> Does that look better to everyone else?
>
Looks better. You just need a few fixes above.
All the best and if you need any help drop me an e-mail.
--
Zvezdan Petkovic <[EMAIL PROTECTED]>
http://www.cs.wm.edu/~zvezdan/
