Archive for February, 2009

Get CSS3 Techniques Today with jQuery

Tuesday, February 24th, 2009

Noupe has a great article on some of the most-wanted CSS3 techniques, and how you can replicate them in most browsers using jQuery.  These techniques include:

  • Rounded Corners (border-radius)
  • Border Image (border-image)
  • Multiple Backgrounds
  • Drop Shadows (box-shadow and text-shadow)
  • Alpha Transparency (opacity)

5 CSS3 Techniques For Major Browsers using the Power of jQuery

HTML5 Canvas Cheat Sheet

Monday, February 23rd, 2009

If you’ve been following HTML5, you know that the canvas element is a big part of the new spec.  If you’d like to play with canvas, Jacob Seidelin has put together a great cheat sheet with pretty much everything you need to know about the canvas API.

HTML5 Canvas Cheat Sheet

via Ajaxian

Make HTML5 code work in most browsers

Monday, February 16th, 2009

One thing I can’t wait for in HTML5 is the new structural tags, such as <header> and <nav>.  What I didn’t know, is that with a little work you can actually use them right now.  Because most browsers have support for unknown tags, you can just use them as normal.  There are a couple issues, but they can be addressed with a few lines of code.  The first is that all unknown elements are treated as inline, so you have to style them.  The second is that unknown elements aren’t added the the DOM correctly in MSIE, but a quick document.createElement will fix that.  Here’s a code snippet that shows you how to put it all together:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5</title>
<style type="text/css">
  section, header, footer, nav, article {
    display: block;
  }
</style>

<!--[if IE]>
<script type="text/javascript">
function(){
  var e = ["section","header","footer","nav","article"];
  var i = e.length;
  while (i--) { document.createElement(e[i]) };
}();
</script>
<![endif]-->

</head>

I’ve only enabled a few basic tags.  For a minified javascript file that enables them all, check out Remy Sharp’s HTML5 enabling script.  You’ll also have to style all the elements you plan on using.

I haven’t tested this technique a whole lot, and my guess is it could introduce other issues (for example, some browsers would handle it in “almost standards” mode), but it’s worth playing with.

When can I use…?

Wednesday, February 11th, 2009

Lately I’ve been wondering what a “Web standards” group really means.  It’s 2009, and most of us get the picture: use CSS and valid markup (unless you shouldn’t—but I won’t get into that right now).  Though there are plenty of non-designers who are still putting together table-based junk, the Web design community has mostly moved on (or at least us in Philly have).  Designing With Web Standards is an important part of our history, but we get it!

So lately I’ve been looking into upcoming standards like HTML5 and CSS3, micro formats, SVG, ECMAScript4, etc and thinking, “this is the stuff we should be talking about.”  We need to look forward, to standards that can excite designers and developers, and we need to explore how those standards might affect us today.  Hopefully I’ll get a chance to explore some of these topics soon.  In the meantime, I came across a fantastic Web site that makes it easy to measure where we stand right now, and what we can look forward to in the near (and not so near) future.

Screen shot of site

Basically, you choose the features you’re interested in and can view when they will or won’t be supported by the major browsers out there.  I see this as a fantastic resource for us “standards geeks” out there.

When can I use…