Categories
Web development

HTML 5 elements

While I started this blog with an HTML5 doctype, I have now also changed the appropriate divs to the more semantically-correct HTML5 elements, specifically header, footer, section, article, aside and nav.

Note that this practice is not recommended to people new to web design, large commercial websites, or…anyone else. The reason for this are the two browsers that have problems styling these elements, Internet Explorer (through IE8) and Firefox (2 and lower). Thus, I am using the document.createElement JavaScript hack for IE. Reliance on JavaScript for styling is reason #1 not to try this at home.

Firefox 2 treats unknown HTML elements as self-contained elements (like br and img), so the solution for that is to serve the page as XHTML, in which case it does work. That of course means making sure each page is valid XHTML, which is often a problem when dealing with HTML-enabled blog comments.

Since this can be a lot of work, and where failure results in unreadable pages for FF2 users, this is reason #2 not to use the new elements just yet. Also, since it has become apparent that XHTML (while having its uses) is not the true successor to HTML, it didn’t seem quite right to me to use this solution for this blog.

So what did I do? A find and replace to turn the elements back into divs with classes for browsers using Gecko 1.8.* or lower. This also means bloating up the CSS to deal with two versions of the site, though I plan on writing a replacement script for that too. The CSS file for these browsers is now auto-generated. Fun stuff, huh?

Many parts of HTML5 are usable without using these elements, and their current value on the web today is very low. Still, if you’re crazy and like living on the proverbial edge, you may want to give them a try today.

Categories
Web development

When can I use…

Preview of the 'When can I use' page

A few weeks ago I was trying to find out which browser supported exactly which experimental feature, be it CSS3, HTML5, or something else. I found a couple of useful pages, but nothing quite as detailed as what I was looking for. Since I enjoy graphs, charts, and showing the world how much IE6 really sucks, I went ahead and made what I was looking for.

Thus was born the “When can I use…” page, which shows tables of a variety of current and upcoming web technologies. For all major browsers (Internet Explorer, Firefox, Safari, Opera and Chrome), versions for four different eras (past, present, near and far future).

The page can be customized to show only certain browsers/features/eras, so you have the option to ignore lesser used browsers or for that matter the most used one (it’s a lot of fun to pretend Internet Explorer doesn’t exist). I’ve also included a summary at the bottom of the page, which shows what percentage of the displayed features are supported.

Most features were tested myself, to ensure that the information is accurate. Please let me know if you notice any mistakes. Keep in mind that a “supported” feature may not actually work 100%, as well as the fact that some of the specifications are not set in stone yet, so what may be supported today may not actually work in the future. However, it is likely that in most cases the browser will update its support as the spec changes.

The feature list includes anything I personally feel is of significant use to web designers, but still lacks support in at least one browser version. I am open to adding more features, but only if it’s of significant importance and not just a detailed subset of another feature.

I intend to update the page as new browsers are released, or at the very least once a year. Due to its popularity, the page is updated as soon as new information becomes available.

Categories
Opera blog post Web development

IE8 beta 1 first impressions

Anyone who cares has heared that IE8 beta 1 has just been released, with quite a bit of documentation.

Mark “Tarquin” Wilton-Jones offers a pretty good overview of the changes. Many are good, and I’m especially happy with the Acid2 support and the decision to make the IE8 rendering mode the default. It is also important to note that there is still “much more” expected in beta 2.

Categories
Opera blog post Web development

SVG Image and Background Image Replacer

It’s here! A working version of the SVG image replacement script.

Purpose

This script substitutes specified images and background images with SVG images for web browsers that support them. This makes it perfect for anyone who would like to start using SVG for their site design, but wants to make sure it will look okay for browsers that do not yet support it.

Features

  • Future-proof – Checks for actual support, no browser sniffing
  • Unobtrusive – Only affects browsers with support, uses fallback content without support or if javascript is disabled
  • Simple to use – Just include one javascript file to your pages and use the appropriate image names
  • Small file – Only 1.8 KB!