Web development

Ready for use: CSS3 Template Layout

Example of template layout system

I’m happy to announce the latest project I’ve been working on:

A jQuery plug-in to provide support for the CSS Template Layout Module. For those of you unfamiliar with this specification, it provides a relatively easy way to make a table-like layout using CSS. Until recently it was known as the “CSS Advanced Layout Module”.

The spec is still a “working draft”, so it can still change significantly. But while that status hasn’t stopped browsers from implementing other CSS3 modules, so far none have tried implementing this one.

Inspired by Eric Meyer‘s Call for a layout system as well as his suggestion that many CSS features can be made to work using JavaScript, I went to work. Why wait for browsers to implement something when we can have JavaScript take care of it today?

The advantages to using this system include:

  • Source independence, so there’s lots of possibilities with the same markup
  • All the benefits of a table-like design without the drawbacks
  • Instant overview of how the basic layout works just by looking at the CSS
  • No need for div-heavy CSS frameworks just to accomplish a simple design
  • Easy rearranging for different media (print, mobile)

The disadvantage to using JS rather than native support means of course that those with JavaScript disabled won’t see the intended layout. However, considering the HTML content can me put in almost any order, there is still a lot of flexibility in how it will appear to non-JS users.

The script has been tested and confirmed to work in the following browsers:

  • Internet Explorer 7+
  • Firefox 2+
  • Opera 9.6+
  • Safari 3.1+
  • Chrome 1+

For download, demos, and usage, see the Project page. Contributions welcome!

Web development

Apple’s extensions: Good or bad for the open web?

Some interesting twittering earlier today on the subject of Apple actually being worse than Microsoft for the Open Web. Seems like quite a provocative statement to me, and a concept worth discussing.

Web development

Search “When can I use…” tables

Search option for WCIU
I’ve added a search box for the “When can I use…” browser support tables. Just start typing a word like “corner”, “SVG”, or “attribute” and only the matched tables will appear.

Other minor updates include the addition of HTML5’s contenteditable (to throw IE a bone) and more unofficial features by Webkit, including CSS Transforms, CSS 3D Transforms, CSS Transitions, CSS Animation, CSS Gradients, CSS Canvas Drawings, CSS Reflections and CSS Masks. I’d be happy to add more non-Webkit features, but other browsers seem to prefer to keep their experimental features apart from their official builds.

Web development

Direct URLs to browser support table selections

The “When can I use…” page now makes URLs based on selections. For example, I made the following links:

Just selecting the options at the top of the page will immediately generate the URL.