Mark Irons

From CSS Discuss

Jump to: navigation, search



Not a follower of the Css Discuss List mailing list, but an occasional visitor to this wiki. Inexplicably taken with style sheets. Tends to be a Wiki Gnome who fixes grammatical errors and typos.

CSS-related accomplishments:

  • Managed to pervert style sheets again to allow an element following another to appear as a floated sidebar adjacent to the first element. It's handy if you have an

    note following an

    section. On non-CSS browsers, the note follows the body. It's an Tech Notes /short.notes.html#ACSSChallenge ugly, ugly hack. Never ever use it.

  • Wrapped every word on an HTML page in its own unstyled {{}} tag. Each {{}} has a one-word Template:Title having nothing to do with the visible word. By hovering your mouse over each word consecutively, you can read a completely different story than the one you see when the page first loads.
  • Hid an entire page's content behind a completely transparent GIF using Template:Z-index. VoilĂ , nothing on the page can be selected!

At the end of August 2004, I emancipated my site [1] from obsolete browsers (i.e., IE). Where appropriate, I will not hesitate to use PNGs with alpha transparency, generated content, and MathML. I should have done this a long time ago; it feels like a weight has lifted from my shoulders.

As of June 2006, I'm no longer an unqualified fan of CSS. It's fine for element styling, but it's awful at page layout. Over the past decade, "header + 2/3 columns + footer" has emerged as the most common page layout... but this most common case is surprising hard to do well in CSS [witness the many pages on the subject, and the use of the term "holy grail"] -- yet is trivial when done with tables. It's frustrating that an otherwise pretty good spec fails to make common cases simple. There's got to be a simple way to combine the advantages of both CSS & tables for layout. Any takers?

Contactable at Template:Half at proaxis dot com. Put the word "apophasis" in the subject to avoid antispam filters.

Rules of Thumb

Rants, Rantlets, and Questions

Rantlet: Positioning and Parentage

Who decided that absolute positioning should be relative not to an element's direct parent, but to the first parent element that is explicitly positioned? Grrr.

Rantlet: Defaults

I use CSS just infrequently enough to forget the default values of most properties. Hmm, is the default for this property Template:Normal, Template:None, Template:Medium, Template:Baseline, Template:Ltr, Template:Scroll, Template:Repeat, Template:Static, Template:Auto, Template:Inherit, Template:Visible, Template:Block, Template:Disc, Template:Outside, Template:Separate, or Template:Invert? Arrgh.

The one that always gets me is the default for Template:Font-size. I keep thinking the base size is Template:Default or Template:Normal, but no, it's Template:Medium. If only there had been a little more standardization.

I must investigate adding autocompletion to my text editor.

Rantlet: Default Font Size

I shouldn't have to say this, but most of a page's text should have Template:Font-size set to Template:Medium. It's the default value for a reason, people!

Rant: Partial Implementation

I use little 'new' and 'updated' icons to indicate changes to my site. (Yes, I stole the idea from Yahoo!.) For years the icons were images of text, which rankled because they didn't resize along with surrounding text. However, there wasn't a better way.

Then along came CSS, which let me replace the images with styled text. That's great, but what do I do about non-CSS browsers?

The answer:

  1. Keep the images, but add a Template:Style="display:none" attribute. This way the images won't appear on browsers that implement CSS.
  2. Wrap the Template:IMG element with a Template:SPAN element that has a special "new-icon" class.
  3. In the style sheet, define Template:Span.newicon:before to include the generated content "New". Style to taste.
  4. Optional, but good form: add a Template:TITLE attribute to the Template:SPAN, giving more info (e.g., "This page added on 8 Jan 2003").
  5. Don't forget the Template:IMG element's Template:ALT tag, for text browsers. (Not optional!)

Putting it all together gives:

<img src="new.gif" alt="[Added Jan 8]" style="display:none" />

And the style sheet: { content: "New"; background-color: #FFFFB0 }

The result: Mozilla shows the resizable "New" styled text, Netscape 3.04 shows new.gif, and Lynx shows "[Added Jan 8]". Spacing's a little strange on Opera, and IE... doesn't show anything at all. No resizable text, no image, no ALT text.

IE 5 & 6, y'see, don't implement the full CSS spec. They implement the Template:Display property, but not generated content. So IE is smart enough not to display the image, but too dumb to insert its replacement.

The lesson? If you're going to implement a spec, implement the whole thing.

Note: In Mozilla 1.2 and its derivatives, the "New" styled text isn't selectable. Looks like an as yet unreported bug.


When will CSS color specification be RGBA, not RGB?

Next version most likely:

Category Home Page

Personal tools