A nice and small plugin to create a semanticly step list.

Javascript

(function($) {
  $.fn.extend({
    steps : function() {
      $(this).find('li').each( function ( i ){ 
        $(this).prepend('<span class="step">'+(i+1)+'</span>');
      })
    }
  });
})(jQuery);

$('ol.steps').steps();

CSS

ol.steps li { 
  float: left;
  padding: 5px;
}
ol.steps li span.step { 
  border: 1px solid red;
  -webkit-border-radius: 20px;
  -moz-border-radius: 10px;
  line-height:18px;
  width: 20px;
  height:20px;
  margin-right: 5px;
  display:inline-block;
  text-align:center;
  color:#fff;
  font-weight:bold;
  background-color:#f00;
}

As we all know, or should know, the usage of inline JavaScript is not done. For various reasons, it blocks the rendering of your page, it is bad for maintenance and so on.

There is however, one notable exception to this rule. Sometimes it can be usefull to know if you have JavaScript enabled, so you can hide certain elements that depend on a user action. For instance, you have a login button that, when clicked, shows you a box for your username and password with a login button. You don't want to hide this with CSS, so you would do that with javascript. Which you have put at the bottom of your html, just as sir Souders ordained. So at document ready the script kicks in and hides the right element. As this is not noticable on a fast site, sometimes the user can see a Flash of Unstyled Content.

So to countermand that, you can set a class on the HTML element to let the CSS know that it has to hide the correct stuff.

<script type="text/javascript">
	document.documentElement.className += ' js-on';
</script>

With this in place you can write CSS to rely on the JavaScript and not have a Flash of Unstyled Content. In my opinion this is the only correct usage of Inline JavaScript.

Here is a simple help to get you to choose the right method of prototyping a website:

Prototype method

Is this site being made for the internet?

yes no

HTML Photoshop

• HTML
• CSS
• Test page
• Question

I recently came across a tweet from a friend of mine Roy with an interesting take on marking up discounted product.

How do you guys feel about using - from <del>€ 27,70</del> for <ins> € 25,00</ins> for discounted products?

As I agree upon his approach, I had an extra option for it. In dutch we differ in writing and speaking of currency. In writing the € symbol comes before the amount, in speaking it comes after. So I thought about screen readers and came up with a solution.

Let's always put the € in full, so not as a symbol, after the amount and use CSS to present it in a proper manner.

So I propose we do this:

HTML

<p>
	from
	<del class="money">
		25.99
		<span>euro</span>
	</del>
	for
	<ins class="money">
		15.99
		<span>euro</span>
	</ins>
</p>

CSS

del {
	color: #666;font-style:italic;
}
ins {
	font-weight: bold;
}
.money {
	position: relative;margin: 0 6px;text-decoration: none;
}
.money:before {
	content: '€ ';
}
.money span {
	position: absolute;
	left: -9999em;
}

Test

I made a small example page for you to check out. Yes I know some things a quirky in IE, but for this example I don't care.

It looks quit nice and is in semantically correct, or so I think.

Question

What I am wondering is, is there anybody that reads this that can tell me what my proposed solution does to screen readers and the like. Is this more or less accessible, I think so, but I don't know. My knowledge of assistive techniques is not as good, as I would like it to be.

So please, let me know if I am right or wrong in the comments. I would love to hear your comments, here or on twitter.

• Introduction
• Code HTML CSS
• Results
• Screenshots
• Conclusion
• test page

I recently encountered something in my work that kinda baffled me. Apparently some (make that lot) people don't know one fundamental thing about inline and block-level elements.

The fact is that you are not allowed to nest them.

This seems to be a small matter, but it has all sorts of consequences for the styling of the front end. What a lot of people don't get is that if you serve the browser invalid html, which is what you do if you nest a block-level element ( div) inside an inline element (span), you are at the mercy of it. A browser, and lets not name names, has a though job as it is when rendering valid html. What it is supposed to do with invalid code is anybody's guess.

So to test this I created a small test page with some invalid HTML and some simple CSS. What I did is that I nested a block-level element, in this case a div, inside an inline element, a span. Below that I swapped the div with the span. Both examples got a unordered list with one li.

HTML

<span class="foo">
		<div>
			<ul>
				<li>list item</li>
			</ul>
		</div>
	</span>

	<div class="foo">
		<span>
			<ul>
				<li class="">list item</li>
			</ul>
		</span>
	</div>

CSS

I than gave it some simple css, which is below:

	body {
		margin: 0 auto;
		width: 40em;
		font-size: 1.2em;
		font-family: helvetica,arial,sans-serif;
	}
	#test {
		border: 4px dotted #ccc;
		width: 200px;
		height: 200px;
		margin-top: 5em;
	}
	.foo {
		border: 1px solid red;
		padding: 1em;
		position: relative;
	}
	.foo div,
	.foo span {
		background: #dee2ee;
		margin-bottom: 1em;
		padding: 1em;
	}
	span.foo li {
		background-color: #ccc;
	}
	.foo li {
		position: absolute;
		left: 100px;
		top: 5px;
	}
	div.foo {
		border-color: blue;
	}

The results

The results where surprising, some browers tried to interpret the css and succeeded ( in a way ), while others failed in nice and surprising ways. Mind you, I am not blaming browsers here. Let me repeat that:

I AM NOT BLAMING BROWSERS HERE
not even ie6, really not this time.

If you serve a browser invalid HTML, you get everything you deserve, in my not so humble opinion

Screen shots

Let's get on with the screen shots, which I will present without any comment. Again, if you serve a mess to a browser, you deserve all the trouble you get...

• 

  Safari 4 XP and Safari 4 os X

• 

  Opera 10 os X

• 

  Camino 1.6 os X

• 

  Firefox 3.5.3 XP

• 

  Firefox 3.5.3 os X

• 

  Internet Explorer 8 XP

• 

  Internet Explorer 7 XP

• 

  Internet Explorer 6 XP

Conclusion

Always validate your code, it will help you. I know that proper front end developers will do this without thinking and I will agree that using stuff like WAI-ARIA tags will invalidate your code, but when you do that stuff I hope you know your basics. Stuff like this I see primarily in html rendered by some back end system put together by someone who doesn't know what they are doing. I will tell (and have told) you what you're doing, you're overly complicating the work of the front end developer.

I mean, we could work around these quirks, but why should we work to correct mistakes easily avoided? It would only mean adding extra lines of code to the css, thus making it harder to maintain...

My proposition is that we, as front end developers, simply refuse to work with invalid code. It is only a source of trouble and will cause more work which will cut into the budget and so on.

Now my question to you all, do you see this and/or have any nice examples you would care to share in the comments or tell me about on twitter I would love to see them.