While most of the hype surrounding HTML5 has been around new tags like <video> and <canvas>, there are a lot of less dramatic enhancements available in the latest browsers that can help developers solve common problems more simply and elegantly than had been previously possible. (I’m using the term HTML5 in its buzzword sense — not the literal sense — so this includes other web technologies such as CSS3.) Some of these smaller improvements, while not nearly as cool as <video> or <canvas>, can have more effect on the day-to-day problems of web developers than those more popular Flash-killing tags.
Placeholder text
One of the original purposes of HTML5 was to improve HTML forms. HTML5 introduces a large number of additional input types and attributes, many of which have uneven implementations in browsers in the wild. But the lowly placeholder attribute has nearly universal support in modern browsers.
It implements a common UI pattern in which the text field contains some hint text to let the user know what to enter there. Once the input gains focus, the text disappears. Here’s what it looks like in Chrome, along with the code:
<input type="text" placeholder="Type something">While this is pretty simple to handle with JavaScript, you’d still have to make sure you handle edge cases correctly. E.g. if the user clicks “Submit” without entering anything in the field, you’d have to make sure you don’t submit the placeholder text as the data for that field. But one simple HTML attribute eliminates all that messy JavaScript, and it works in all modern browsers, without affecting older browsers.
text-overflow: ellipsis
This is another little gem that would normally require some JavaScript to duplicate. Say you have a long block of text content, but your design only has space for a single line -such as a title bar or a pull quote.
Once again, you could write some JavaScript to handle this, but why not let CSS handle it instead?
A typical Javascript implementation would involve estimating how many characters can fit within the space available, then truncating the string to that length. But with a variable width font, and words of varying lengths, this is always going to be a rough estimate at best. There are going to be edge cases in which you trim too much or too little, and then things will get ugly.
So, you have a choice: Forget about the edge cases and just accept that your graphic design will be ugly in those cases, or spend a bunch of time writing the perfect algorithm to truncate sentences correctly.
Or use text-overflow: ellipsis and let the browser do the work.
<style>
#long-text {
background-color: #c9c;
padding: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<div id="long-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a nisl ut justo cursus luctus eu at enim. Praesent et nunc nec enim porttitor eleifend.
</div>
Neither of these little features are going to make or break an application, and you could ultimately accomplish something similar in JavaScript. But by keeping this kind of presentational logic out of your JavaScript you can keep your application code focused on business logic, with less work and less code.
