Tags:
create new tag
, view all tags
Many proponents of CSS have cited examples of how CSS works great. Some proponents also then demonstrate bad usage of CSS later on. This page will catalogue examples of what's wrong and why it went wrong.

Example 1: AppletBasedEditor

CSS Proponent: ArthurClemens

What went wrong: Text created that is virtually unreadable. (less than 2 millimetres, 1/14th of an inch tall) Why it went wrong: Usage of absolute pixel sizes rather than relative sizes, looking terrible on displays with resolution >144dpi. (Many modern laptops, flat screens, etc)

Screenshot (original diagonal is ~10 inches):
AppletBasedEditor.png


  • Michael, I just copied this from another Codev page. Changed now to relative font size. -- ArthurClemens - 26 Aug 2003

Example2: TWikiUsingCSS

CSS Proponent: MattWilkie

(About 1/2 way through page)

What went wrong: Borders too small. Why it went wrong: Usage of absolute pixel sizes

Source quoted as "good example":

#content {border: 1px solid #a9a9a9; margin: 2%; padding: 2%;}
#menu { left: 85%;margin: 2em;padding: 0 5px; }

Ironically this example also uses ems - which are nice relative scaling and more screen independent.

The border element was set to be as thin as possible without being actually invisible. The intent is to add subtle emphasis on the change from the solid background page colour to the content area. If the line is invisible to users with comprimised vision or a handheld computer no information is lost.

If the code was being used to for an embedded text box, a table of contents for example, it would indeed be poor use of css as the border element might be necessary to differentiate the separate texts.

-- MattWilkie - 15 Sep 2003

Example3: NiceSite

CSS Proponent: ColasNahaboo Added: http://twiki.org/cgi-bin/rdiff/Codev/NiceSite?rev1=1.18&rev2=1.17

What went wrong: Started a box out that captured the rest of the page Why it went wrong: Closed </div> failed - probably due to nesting upon nesting of other HTML tags in between. (likely to be overlapping tags - Konqueror's pretty strict on that)

Screenshot:
NiceSite.png

-- MichaelSparks - 23 Aug 2003

Debate

Colas Nahaboo point of view

Well, for me these examples are not examples of bad CSS, I would even claim that 1 & 2 are exemples why CSS is good! If style is expressed in a page with fonts not suitable for your display, then just override this with a user stylesheet!

That is the point of CSS: isolating presentation issues in a separate formalism that you are then free to ignore if you disagree on the looks. If this information is mixed with HTML, your browser will not be able to make intelligent decisions.

As for example 3, forgetting closing a tag is not a CSS issue, but an HTML one. It would be exactly the same problem if I used %GREEN% and forgot the %ENDCOLOR%, too. This is the kind of errors you get in a system where you hand-edit text, see also XhtmlConsideredHarmful smile

A side remark: in real life, most commercial web sites on the internet use pixel size for fonts. Even our company (http://www.ilog.com). We tried to make them use a "clean" CSS, but it does not work well as soon as you have images on your pages, since image sizes are in pixel (we were not able to give them a "clean" CSS ensuring a proper corporate look on all browsers). Thus browsers adapted, and most browsers can zoom the page, so this text in pixel size is not an issue in real life.

So for me this are not CSS issues, just HTML ones. CSS is just used in your example to "factorize" HTML properties, and the problems are in the HTML styling concepts, not in their CSS translation

-- ColasNahaboo - 24 Aug 2003 (uploaded now - 08 Sep - as twiki.org was too slow before)


I have no doubt there are examples of poor CSS written by yours truly in numerous locations on twiki.org. The one given however is not one of them -- in my opinion of course. smile

I've elaborated on my viewpoint above in the relevant section.

-- MattWilkie - 15 Sep 2003

One of the problems in adding CSS is that the markup emitted by the TWiki scripts does not mean what people seem to think it means. In particular, the <p /> is a complete empty paragraph, and the text that typically follows it is not inside a 'p' element at all, so any style that mentions 'p' will not be applied to it.

I don't see much hope for CSS until markup generated from TWiki shorthand conforms to XHTML Strict rather than Transitional. Is there any good reason for generated markup to be Transitional rather than Strict? I can think of one - allowing the obsolete elements that are understood by old browsers that cannot cope with style attributes or stylesheets. I don't see that as a good reason for being lenient about where character data may occur.

-- OwenRees - 25 Sep 2003

<p /> is not a complete empty paragraph. It is invalid XHTML strict markup. A complete empty paragraph is <p></p>.

-- TomKagan - 25 Sep 2003

Owen's main point should not get lost: it would be much better, IMHO, to have paragraphs marked as such (i.e., enclosed in <p> </p> tag pairs), than to have something (the <p />) separating paragraphs with no markup.

-- RandyKramer - 25 Sep 2003

TWiki can use CSS and still use XHTML Transitional. The issue of using CSS is not quite related to TWiki generating incorrect (non-standard) html, unless you want to write a specific style for topic paragraphs - but your needs can be covered by creating a default style for <body>. I do agree that we should strive for correct HTML and XHTML Strict in the near future. In the medium term we should go for full accessibility support too.

-- ArthurClemens - 25 Sep 2003

I concurr with everything Arthur said. As for "Is there any good reason for generated markup to be Transitional rather than Strict?" : yes. As of yet I don't think there is anybody in the community who really understands what the differences between the document types are let alone how to change twiki to conform.

-- MattWilkie - 25 Sep 2003

<p /> is actually invalid XTML transitional, too (I got out the mental floss wink ). As it stands now, there are a lot of areas to consider when trying to make TWiki even XHTML transitional. There are too many "default" pages and search formatting with handcarved HTML which do not comply.

For starters, how about putting into all default templates which link to WDG HTML validator and/or W3C validator?

An interesting point about the about two online validators is they don't pick up on the fact that <p /> is invalid! Of course, those validators will give the thumbs up to this:

<img src="http://twiki.org/p/pub/TWiki/TWikiLogos/twikiRobot46x50.gif" border="fred flintstone" alt="TWiki home" width="fred flintstone" />

TWiki home

-- TomKagan - 25 Sep 2003

In redesigning the default templates, W3C validation is certainly an issue to target.

I am reading Designing with web standards by Jeffrey Zeldman (from http://www.zeldman.com). I was encountering too many strange situations with CSS due to my lack of knowledge, so I figured I needed some education. Its a very good read so far. It targets Michaels fears about browsers not being able to read CSS, shows how to make CSS sites accessible to non-CSS browsers and handhelds, explains the doc types and its history, and gives tips and tricks how to use relative font sizes (example 1 above) and how to make sites accessible to users with a handicap (no, not blind users per se, also motorically disabled or just elderly people).

Accessibility becomes an issue when TWiki is used in a government (federal department and agencies) setting. See AccessibleTWiki.

Thus browsers adapted, and most browsers can zoom the page, so this text in pixel size is not an issue in real life.
Unfortunately, all but two browsers adapted. The two are IE5/Win and IE6/Win. So 95% of all users can't zoom the page...

But it doesn't mean you have to stick with absolute font sizes I just learned, or that relative font size have to look bad. Take for instance http://www.stopdesign.com/. Does it show it is designed with relative font size? It shows it can be done.

About the DOCTYPE: this tag was created to let browsers decide what rules should be applied to the page:

  • DOCTYPE Transitional means that the browser operates in backward-compatible 'quirks' mode (so called because old-school sites are authored to the quirks of variously incompatible browsers) -- Designing with web standards, p. 259
  • DOCTYPE Strict: the browser displays the page as W3C specs say it should
Also called DOCTYPE switching: switch to turn W3C standards on or off. See more info at http://developer.apple.com/internet/html/doctype.html and http://www.alistapart.com/stories/doctype/

-- ArthurClemens - 25 Sep 2003

One of the problems with XHTML is that it seems to create opportunities for confusion, and it is difficult to create a stylesheet if the structure of the markup is difficult to understand. My earlier suggestion of going for "strict" markup is somewhat over the top, but I think that "transitional" allows in too much confusion.

On the specific point about the meaning of <p />, it is valid XHTML, and means exactly the same as <p></p>, but the HTML compatibility guidelines http://www.w3.org/TR/xhtml1/#guidelines advise against using it. This way of writing empty elements is a general feature of XML (which also advises against using it for elements not declared to be always empty).

On the subject of the construct Tom gave:

<img src="http://twiki.org/p/pub/TWiki/TWikiLogos/twikiRobot46x50.gif" border="fred flintstone" alt="TWiki home" width="fred flintstone" />

This is valid HTML, but does not mean what most people think. The '/' closes the tag, leaving the '>' as character data. SGML validators working from the DTD undertand this, and it can lead to confusion if you do it in the HEAD (e.g. on a META), where the character data implicitly closes the HEAD and opens the BODY.

I have never yet seen a proper SGML/DTD based validator make a mistake about the syntax. Every time one has given an answer I did not expect, I have found some obscure feature of SGML or the DTD that means that the validator was right.

-- OwenRees - 29 Sep 2003

Edit | Attach | Watch | Print version | History: r17 < r16 < r15 < r14 < r13 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r17 - 2003-09-29 - OwenRees
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.