Archive for the ‘Web Standards’ Category

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.

Internet Explorer 7 and Web Standards (The Ongoing Saga)

Monday, August 28th, 2006

Microsoft’s Chris Wilson, the Group Program Manager for IE, is interviewed by ZDNet regarding the issue of whether Microsoft’s latest web browser IE7 is - and will be - CSS and Web standards compliant. Some people are still skeptical.

The Difference Between <em> and <i>

Wednesday, June 28th, 2006

Way back, when I upgraded my personal site to WordPress 2.0 and began playing with the new WYSIWYG post editor, I noticed something about the bold and italic buttons in the tag helper bar: they say bold and italic but they output strong and em, respectively.

There’s been a push in the developer community to begin using markup that has more meaning, and in many cases <em> makes more sense than the presentational markup of the <i> tag, specifically when you want to give emphasis to the enclosed word or phrase. I mean, that’s the point of the <em> tag. Now many coders and developers are always using the <em> tag instead of <i>, falsely believing <i> and <b> to be deprecated (only <u> has been deprecated as of HTML 4.01).

But should we all go back into our code and change every isntance of <i> to <em>? I think not. There are plenty of perfectly good pieces of text that you would want to italicize, but you don’t necessarily want to emphasize.

Italics are used to indicate titles of longer works (albums, periodicals, television series, plays and films), foreign words that have entered English vocabulary (de rigueur, resume), and words or phrases used as themselves (the term computer, the letter A).

For example, I write a post about a certain book, perhaps a review. According to various guidelines for writing, titles of books written on the web should be in italics, since underlining is not only confusing, but a web standards faux pas.

I don’t want to emphasize the book’s title, but I do want to be grammatically correct. However, this brings up the debate over the practice of using presentational markup vs. separating style from content, and until we’re all writing XML and defining our own <booktitle> tags, I’ll keep using <i>.

When I originally posted this article to my website on 10 January 2006, someone commented that “[y]ou should use the cite tag for … citing the names of books and such.” However, I don’t know if the cite tag is appropriate, since I’m not citing a book or reference, just mentioning it. If I were to publish a research paper online, then I would use cite and blockquote quite often. This doesn’t seem the case to me here.