CSS for the LDP?

Saqib Ali asks: "Over at The Linux Documentation Project there is a lengthy discussion going on about whether to use CSS (Cascading Style Sheets) to improve the presentation of the documents. I support the use of CSS to improve the image/formatting of the document, and improve readability. I understand that content is more important than the presentation, but it can't hurt to improve both. There are others who think we should not get involved the presentation layer, and mainly concentrate on the content. Since, most Slashdot readers are Linux users, and might have visited the LDP once or twice, I would like to poll them on what they think about implementing and using nice CSS for the documents on the Linux Document Project website. I've written a CSS for this purpose that is available here, and some sample documents available in this weblog. Any thoughts? Any pros and cons on using CSS to improve presentation?"

Comments

Of course! But it may not help a ton

[Deraj DeZine]

Of course they should use CSS to make the pages look better.

Unfortunately, CSS won't solve the root of the problem: non-semantic HTML. I've re-done several sites to make use of the so-called semantic HTML tags (em, strong, etc.) and to get rid of nasty table-abusing layout tags. CSS is necessary to make this transition, but readability on non-desktop browsers (phones, terminals) can only really be improved by switching to layouts using semantic HTML tags and divs for layout.

One last point I'd like to get out there is that there are many console browsers (links, w3m, but NOT lynx) that do a fine job displaying abused table layouts. Unfortunately, the console usually has so few columns that everything just ends up looking squished, while as my div-layout pages are easy to read.

Re:What about Slashdot?

[Anonymous Coward]

How about this and this?

Gentoo docs are a good example

[urbieta]

You can see in gentoo's website that they have a very nice consistency in their documentation, it really helps the human eye find what's needed among all data, so Im all for it

you go ldp!

Re:Here is what needs to be done

[xeaxes]

The important thing to remember here is that the new CCS'ed documents should render well on older browsers. For example, if you use CSS to give a background color to the document or to a table cell, ALSO include the equivelant HTML tag. If you use CSS to give weight to text, also use the equivelant HTML tags (CSS always have precedence over tags). So for example, also include the FONT SIZE, bgcolor and Bold or Italics tags. Also, make sure you don't make make tables on CSS, use HTML markup for heavy layout stuff, because most of the browsers above won't be able to handle it.

No, this is an incorrect view. CSS is about separating CONTENT and PRESENTATION. That means no font, bold, or italic tags. This is all done in the style sheet. Additionally, font tags, etc always take precidence over style sheets.

By using proper XHTML (or HTML 4.0) and sticking to valid tags (heading tags, emphasis, lists) the page will automatically degrade nicely and be viewable in ALL BROWSERS. This includes lynx and other text only browsers.

The browsers that support CSS will use it, and it will look prettier for them, and browsers that do not support it will still display the content perfectly even though fonts, etc could be wrong.

Also note that by using CSS, the site will be easier to maintain. The removal of font, bold, italic, and underline tags will also make the site lighter and faster. Note that CSS is cached by the browser, so that file only has to be downloaded once.

Please look at The CSS Vault and CSS Zen Garden as great examples and references. CSS Vault has page after page that justify the use of CSS and valid XHTML. Also notice that if the browser cannot use CSS, the site still renders all the content properly.

An important additonal note: By using proper XHTML and CSS, the disabled will have access to the site in a much easier fashion due to the lack of tables being used for markup (tables only for data!), and the simpler code. This is for special screen reading browsers.

Re:Here is what needs to be done

[TheViewFromTheGround]

You won't believe it how many Linux/Unix users use Lynx and Links. So please, think of them.

Ahem. This is completely silly. Well structured documents--a prerequisite for good CSS--degrade *better* in browsers like Lynx because the underlying tag structure reflects the logical document structure.

The important thing to remember here is that the new CCS'ed documents should render well on older browsers. For example, if you use CSS to give a background color to the document or to a table cell, ALSO include the equivelant HTML tag.

Why would anybody do that? Modern browsers like Firefox are actually zippier, even on older hardware, than Netscape 4.xyz. A designer should think about how to make the page degrade because many of the browsers you mentioned choke on some CSS. But there are lots of tricks for hiding the CSS from those browsers, and if you do, then the user still gets a nice, logically structured document.

Anyway, CSS isn't all that hard to do right. I just did a site that looks really nice and polished and works in every browser (IE, Moz, Firefox, Safari, Camino, Konq, Opera, Lynx) on tons of platforms (Windows 98/ME/2000/XP, Linux, OS X, OS 9)...and it worked on the first try -- I didn't have to change a single thing (rsvp.uchicago.edu). I tested it on all possible combinations of those I could think of and it looked nice (and in the way I expected) on all of them.

Finally, I can't imagine a situation, except using minimal HTML 4, which would be silly, because it'd practically be XHTML at that point, where it would be heavier that the XHTML/CSS equivalent. Even if the stylesheet is relatively large, say 300-400 lines (I'm pushing 500 on a site I'm working on), it typically downloads once and then gets cached, at which point all subsequent pages that use that stylesheet will only download the nicely structured document.