Blogging and All that Malarkey Stuff & Nonsense

Malarkey is Andy Clarke, a creative designer with a passion for accessibility and web standards. This is his personal website.

And all that (CSS) Malarkey

Covering <body> attributes, attribute selectors and pseudo-elements. Scattered thoughts written during the design.

<body> attributes

Applying id and (multiple) class attributes to the <body> element is a fantastic way to turn the same XHTML configuration into multiple design layouts without the need for adding different attributes to div elements. For example this XHTML,

<div id="nav-main"></div>
<div id="content-main"></div>
<div id="content-sub"></div>

Can be turned into a two-column layout with a left or right sidebar and top navigation or even a three column layout, without altering the XHTML. (Ed says: Please forgive our loose CSS 

<body id="stuffandnonsense-co-uk" class="left">
.left #nav-main { clear:both; }
.left #content-sub { float:left }
.left #content-main { float:right }


<body id="stuffandnonsense-co-uk" class="right">
.right #nav-main { clear:both; }
.right #content-sub { float:right }
.right #content-main { float:left }


<body id="stuffandnonsense-co-uk" class="three">
.three #nav-main { float:left; width:33%;}
.three #content-sub { float:right; width:33%;}
.three #content-main { float:left; width:33%;}

Attribute selectors

Using attribute selectors is a useful way of getting the best out of browsers with good standards compliance. It is also a useful way of screening out browsers with poor CSS support (they simply ignore the selectors). So instead of using,

div#content

I have chosen to use,

div[id="content"]

The new site makes extensive use of attribute selectors for that very reason. Not to be elitist or to discriminate, but to demonstrate what might be done for more modern browsers.

Some attribute selectors can make for some very useful techniques. So just for a laugh we might give comments by Andy Budd a different emphasis to my own ;).

<q cite="Malarkey">
q[cite="Malarkey"] { font-weight:bold;}


<q cite="Budd">
q[cite="Budd"] { display:none;}

Attribute selectors are also heavily used on my recommended reading page, for example to turn Amazon links into graphical buttons.

<a href="#" title="Buy at Amazon.com">Amazon.com</a>


div[class="toys"] a[title$="uk"] { rules }

A night at the Opera

In some cases I have needed to stick with plain 'ol div.editorial Opera does not (yet) support CSS3 sub-string selectors (shame) such as,

div[class$="editorial"] { rules }

Oh well :( Maybe after Acid2, and I've left the CSS3 in those sub-string selectors in my CSS file for that happy day.

:first-letter pseudo-element

One of the interesting things I discovered in a comment by Patrick Lauke on Anne Van Kesteren's blog was that the :first-child pseudo-element only applies to block level elements such as <hx>, <p> or <ul>, and not to inline elements such as anchors. Even setting an anchor to display:block; will not force the :first-child to apply.

So

p:first-letter { color : #333; }

works just fine, but

a:first-letter { color : #333; }

does not.

CSS markers

Damn that pesky Doug Bowman! ;) His informative article on making long CSS files easy to navigate came before mine. Although I differ widely from Doug's preferred ordering and grouping of CSS rules, his use of flags, common apparantly in programming, makes real sense. You can see it in action in my own CSS file.

Tortilla wrap

And that just about wraps it up.

Replies

  1. #1 On May 11, 2005 10:56 AM Dean Edwards said:

    You threw me for a second there! I think you mean :first-line/letter where you say :first-child.

    Your new site is gorgeous BTW. And it looks as pretty on the inside as it does on the outside. ;-)

  2. #2 On May 11, 2005 04:18 PM Yasuhisa said:

    Ah, new malarkey!
    Very interesting inside out. I am sure I will learn alot from this. Keep up good work.BTW I made new site (in japanese) which uses CSS2.1/3 selectors.

  3. #3 On May 11, 2005 04:21 PM Derek Featherstone said:

    The new site makes extensive use of attribute selectors for that very reason. Not to be elitist or to discriminate, but to demonstrate what might be done for more modern browsers.

    OK, Andy, here are my questions to you...

    If this were a site for a client, would you have done the same with your CSS? Would you have such a large difference between your modern version and your version that gets shown to IE users?

  4. #4 On May 11, 2005 04:28 PM Malarkey said:

    @ My mate Derek:

    If this were a site for a client, would you have done the same with your CSS? Would you have such a large difference between your modern version and your version that gets shown to IE users?

    Such a large difference, no.
    Subtle differences, absolutely.

  5. #5 On May 12, 2005 06:01 AM Duncan Heal said:

    Nice work but you've missed a semi-colon in the class three section:

    .three #content-main { float:left width:33%;}
    should have a colon after the 'left'
    .three #content-main { float:left; width:33%;}

    each selector is missing it. it just stuffs it up for those cutting and pasting and this is a fancy css site.

  6. #6 On May 12, 2005 08:06 AM patrick h. lauke said:

    cheers for the mention, andy...and yay, nice to see some fresh design going on here :)

  7. #7 On May 12, 2005 08:31 AM Malarkey said:

    @ Dean Edwards:

    I think you mean :first-line/letter where you say :first-child.

    @ Duncan Heal:

    each selector is missing it. it just stuffs it up for those cutting and pasting and this is a fancy css site.

    Thesegotchas are fixed now, thanks for catching them.

  8. #8 On May 17, 2005 12:52 PM Mike Stenhouse said:

    I'm a little late on this one but if you're interested I wrote up a little something related to your ' attributes' paragraph for an as-yet unfinished site: A CSS Framework.

    Loving the new site by the way... Arrows have been out in the cold for too long. I really like the rounded corners on these input elements too - nice touch.