Posts tagged "meaningful-markup"

So, you're about to style an unordered list of some sort…

<h1>TXJS 2011 Speakers</h1>
<ul>
  <li>Brendan Eich</li>
  <li>Alex Russell</li>
  <li>Douglas Crockford</li>
  <li>Paul Irish</li>
</ul>

You've decided upon hanging square bullets in a light grey – nothing too distracting…

ul {
  list-style: square outside;
  color: #ccc;
}
li {
  color: #000;
}

This should do the trick, but doesn't for some reason! How the heck does one target the bullets and only the bullets? As far as I know it's not possible.

Conventional hack

<h1>TXJS 2011 Speakers</h1>
<ul>
  <li><span>Brendan Eich</span></li>
  <li><span>Alex Russell</span></li>
  <li><span>Douglas Crockford</span></li>
  <li><span>Paul Irish</span></li>
</ul>

<style>
  ul {
    list-style: square outside;
    color: #ccc;
  }
  li > span {
    color: #000;
  }
</style>

This gets the job done, but those spans are ugly – there are ways to achieve the desired visual effect without hacking the markup.

Background image technique

ul {
  list-style: none;
}
li {
  margin-left: -12px;
  background: url(bullet.png) no-repeat 0;
  text-indent: 12px;
}

This requires very little CSS. To avoid incurring the overhead of an extra HTTP request, one could Base64-encode the image in a data URI.

Pseudo-element technique

ul {
  list-style: none;
}
li {
  position: relative;
}
li:before {
  position: absolute;
  top: 8px;
  margin: 8px 0 0 -12px;
    /* accommodate Camino */
    vertical-align: middle;
    display: inline-block;
  width: 4px;
  height: 4px;
  background: #ccc;
  content: "";
}

So it's possible to fashion square bullets of any colour with just a handful of straightforward declarations. Nice!

Prefer round bullets? No problem. :)

  ...
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  ...

This post has been a long time coming.

Reminder message, dated 18 January 2010

It's unacceptable for any website or web application to output dates and times using an arbitrary time zone. Displaying dates and times in UTC/GMT is only slightly better: dates cannot be relied upon, and users must perform mental gymnastics in order to localize date–time combos.

On the Web it's not uncommon to see characters with no inherent meaning used for stylistic reasons. A good example is the Read more » link. Perhaps the directionality of the "»" is suggestive of travelling to another page, or perhaps the letterform is included solely for its aesthetic appeal. Whatever the case, one thing is certain: links do not require right-pointing double angle quotation marks in order to function.

The inclusion of such a character is therefore a design decision. It is decoration, not content. It belongs in a style sheet, not in a page's markup.

Chris Coyier has done it again. Compelled me to stay up all night, that is (it's 7am as I type this). In Chris's latest screencast, CSS Image Switcher, he demonstrates how to create an "image switcher" using CSS. The problem, though, is that his process is wrong.

Incorrect process

1. What effect or experience do I want to create?
2. How can I achieve this using CSS (and JavaScript if necessary)?
3. What can my markup do to help me?

Correct process

1. What effect or experience do I want to create?
2. What is the most correct and meaningful way to describe the content?
3. How can I achieve the desired effect or experience (or something close to it) without altering my markup?

In my post titled Captions over images I advocate the use of definition lists for captioning images. Earlier today I was asked whether this meaningful markup could be used in conjunction with an "image slider" such as Easy Slider 1.5.

I had a look at the Easy Slider source code and decided to write my own image slider using Prototype rather than hacking someone else's code to pieces. It's a proof of concept rather than a full-blown "plugin", but it demonstrates that such functionality is achievable using elegant, meaningful markup.

Check out the Prototype image slider demo to see the code in action.

This is my response to Chris Coyier's screencast titled jQuery Part 3 – Image Title Plugin which I watched a couple of days ago. Something didn't sit right with me at the time, and I've now worked out what it was: JavaScript is not required!

I'll present a JavaScript-free approach for displaying captions over images that uses truly meaningful markup.