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

Uhoh....

[c0dedude]

Error: Acronym overload! Danger, Will Robinson! Danger! Jesus christ.

Translations:
Cascading Style Sheets-Uniform visual format for web pages.
LDP-Linux Documentation Project: Produce documentation for linux. Quite helpful.

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.

I vote yes

[ChiralSoftware]

If you're going to do any formatting at all, especially for the LDP, it should be in CSS. This is why:

• All the main Linux browsers today support CSS.
• CSS looks better than the old style of using nested tables and spacer graphics.
• CSS is accessible. A CSS page looks ok on Lynx, whereas any other formatting system doesn't work on Lynx.
• Users who don't like formatting or CSS can turn it off and still access the sites.
• CSS formatted pages can be viewed on some wireless devices and can be transformed for all wireless devices. Ever need to look something up so you could get the computer on the net?
• It's easy to do. Just create the CSS sheets and then put in the link at the beginning of the documents and it should mostly work.

misses the point.

[Anonymous Coward]

The question shows a profound mis-understanding of CSS.

If anything, CSS reduces the effort on style in LDP, not increases.

CSS would be just one line,

<link href="ldpstyle.css" rel="stylesheet" type="text/css"/>

Thats it. And that could be put in by php elsewhere. Heck, you could even exclude it alltogether and let people set their own style.

the pages could then concentrate purely on content. Don't say font/i/b if its not needed, use pre/tt/em/strong tags. e.g content, not style (pre formatted, typewriter, emphasized, strong text).

Don't use tables, if it isn't a table you are describing. use div's (and class=..., ok one more css usage, but not required).

I can't tell you the number of times I have been annoyed when someone writing a webpage assumed style tags like font (+size, -size) should be used, it makes a blind assumption about the viewer of the page, their resolution, fonts available etc. Far better to use CSS, and avoid any style at all in your content, just use a separate, includable css page for the style.

Far too many pages on the web use content related tags to do style (table) and style related tags to do content (b, i, font=courier). I for one would be thrilled to see CSS used in LDP to reduce this horror.

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:What about Slashdot?

[Suppafly]

alistapart did complete transformation to css for slashdot a while back and I know there are some other efforts. noone bothers to send in patches to the slashcode people though. There needs to be a go between to coordinate between the webdesigners and the coders.

Re:Lack of CSS standardization

[manual_overide]

Lack of standards??? Have you ever heard of the W3C?! There is a standard. Learn it. Use it. Prof it. *chortle*

Seriously. If CSS1 is used exclusivly, and linked to the pages using @import, there should be no problems at all

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:Great examples as to why they SHOULD NOT use CS

[agurkan]

this is flamebait, but i'll reply just for the record. MS IE is not CSS compliant despite what MS says. the designs in those pages look beautiful in my galeon window, and i lose no content.

Re:Great examples as to why they SHOULD NOT use CS

[aftk2]

In all fairness, when it debuted, Internet Explorer for OS 9 was the most standards compliant browser on the web. It still does a pretty decent job. The trouble is that it's a dead browser, and will do an increasingly poor job at rendering the web, as web developers start using more advanced CSS techniques.

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.

Re:IE works just fine

[RedSteve]

Um...in fairness, the grandparent post was talking about IE5 for Mac. Seeing as how MS has abandoned IE for the Mac at that version...there isn't really any Microsoft alternative he can upgrade TO.

And yes, even the most recent version of IE for windows STILL does not handle CSS fully or appropriately in all cases. To wit -- if it were, why would this project exist?

Re:Great examples as to why they SHOULD NOT use CS

[jrexilius]

I would say that that was the design of that site, not something fundamentally wrong with CSS.

A light, simple, standards-compliant CSS sheet can render well in 98% of the browsers and add quite a bit to readability.

I am surprised there is this much debate around such a simple thing. CSS can save bandwidth and development time and add quite a bit to user experience. Yes, use it.

Re:Consistency, please

[Tin Foil Hat]

Perhaps I should have read the LDP website first. It appears that they insist that all documentation be submitted in XML or SGML DocBook formats. They even have a group of volunteers to help with that if the author is not able to provide DocBook.

A quick perusal of CPAN revealed eight modules specifically for dealing with DocBook. No doubt other languages have similar libraries.

Looks to me like more than half the work is already done. It shouldn't be a difficult matter to create a script to run the DocBook -> HTML+CSS conversions with predictable results.

Re:What about Slashdot?

[ashkar]

As a logged in user, you can select a version of /. made specifically for cases such as yours. I use it even to keep the formatting issues from cropping up in firefox and, after a few days, you grow quite attached to the lighter format. Go to preferences -> homepage -> check 'Light' -> profit!

Re:Don't use CSS. Use DocBook!

[Trejkaz]

They already write it in DocBook, dumb-dumb. ;-)

The question which is being asked, is when you convert it to HTML, should it be plain old boring HTML, or should it use CSS? IMO it should use CSS since the stylesheet for converting DocBook to HTML would be simpler.

Re:Done right, CSS can help multi-platform use.

[Rufus211]

Because firefox preloads all of the styles referenced. I'm not sure if this is a bug or intended but it causes massive bandwidth, especially with sites like this that have complex graphics for each style.

Re:What about Slashdot?

[xeaxes]

go through the effort for the very miniscule pay-off that comes from it.

The pay off is more than miniscule. Read the ESPN Redesign and see that they saved 50 KB per page and an estimated 730 Terabytes of bandwidth a year.

That is a HUGE cost savings. /. would likely have a similar cost savings due to the high traffic and the sheer number of nested tables on the site. I don't know how much ESPN's bandwidth and hosting costs are per GB, but they save on space and bandwidth. Estimating $5 per GB would put it at $365,000 per year in savings, but I bet it is even higher than that.