HTML5 and CSS3

Develop with Tomorrow's Standards Today

The Mimimal HTML5 page.

February 19, 2012 at 3:28 pm in HTML5

According to this very informative article, the amount of code you need for a valid HTML5 page is quite small. In fact, it’s as simple as

<!DOCTYPE html>
Smallest HTML file!

Modern web browsers will actually automatically fill in the rest the details for you. I believe it’s still good practice to include all of the proper HTML markup in your document. Just because browsers can rewrite your document for you doesn’t mean you should let them.

No comments

Revenge of the self-closing tags!

April 4, 2011 at 5:51 pm in HTML5, video

Developers who’ve been working with XHTML for a long time tend to feel a little awkward when they first notice the lack of self-closing tags in HTML5 markup. But HTML5 isn’t derived from XML, so it’s not going to conform to the same rules that XHTML did. However, the sepcification says it’s fine to have self-closing tags in our HTML5 markup.

The problem with self-closing tags in documents served with the text/html mimetype is that browsers start stripping off those self-closing tags. After all, HTML documents never had self-closing tags, and XHTML documents are supposed to be served with a different MIME type which is unfortunately incompatible with IE 6,7, and 8.

But because of browser inconsistencies, we’re starting to see some self-closing tags make their way into valid HTML5 documents again. One placei n particular is the source element in HTML5 video.

 <source src="http://video-js.zencoder.com/oceans-clip.mp4" 
               type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

It seems that due to some strange parsing bugs, the video element doesn’t load properly unless the source tag is self-closed.

It’s an unfortunate side-effect of ten years of exceptions upon hacks upon exceptions.

No comments

iOS 4.2 and HTML5, Sitting In A Tree…

November 29, 2010 at 8:17 pm in CSS3, HTML5, Uncategorized

Devices running iOS 4.2 now support Web Sockets in Mobile Safari. This is great news for services that want to use Web Sockets and can’t rely on a Flash fallback.

iOS 4.2 also now supports TrueType Fonts and they look pretty snazzy.

The iOS devices have had great HTML5 and CSS3 support. LocalStorage works quite well, as do things like CSS3 transformations, pseudoclasses, and multi-column layouts. Offline support works great too, so it fou’yre looking for a neat way to build an offline mobile app for the iPad, you’ve got all the tools you need.

No comments

The “Death” of Web SQL Databases?

November 22, 2010 at 10:31 pm in HTML5, Mobile, Offline, Web SQL

Recently, the W3C’s working group announced that it will no longer advance the specification for Web SQL Databases. Mozilla has taken the stance that they won’t implement the specification mainly because they don’t like the fact that it relies on SQLite’s implementation of SQL. So does this mean that Web SQL Databases are dead?

Hardly. All of the WebKit-based browsers have implemented this technology, and no current browsers implement the proposed IndexedDB solution which the W3C is now focusing on. Mozilla won’t ever implement Web SQL Databases, it’s unlikely that Opera and Microsoft ever will either, but considering that all iPhones, iPods, iPads, and Android devices currently do support this specification, it’s not going away any time soon.

Building an offline application for the iPad? Web SQL Storage is pretty nice stuff, especially when you combine it with HTML5′s offline browsing capabilities. In the book, we focus on that very example.

It’s far from dead. In fact it’s quite stable. The specification even provides transactions, so it’s good enough. Far better than some of the other specifications that many browser makers actually “agree” on.

No comments

Todo List with Backbone.js and LocalStorage

October 26, 2010 at 5:34 pm in HTML5, Javascript, Web Storage

HTML5′s Web Storage API lets us store data on the client’s machine without using cookies. You can use this to build complete client-side applications using HTML and JavaScript. One of the neatest examples of this so far is this simple To-Do list application which uses the Backbone.js framework. As a bonus, the source code for the application is annotated!

http://documentcloud.github.com/backbone/docs/todos.html

What a great way to demonstrate the usefulness of localStorage!

No comments

Polyfills

October 8, 2010 at 1:31 pm in CSS3, HTML5

Well, it seems I’m a little late to the party – Remy Sharp has beaten me to the punch and posted a great post explaining the sudden popularity of polyfills. You should read that too.

Over the last few days, people have been talking about “polyfills.” According to Paul Irish, a polyfill is

A shim that mimics a future API providing fallback functionality to older browsers.

Throughout the book, we discuss many different polyfills, even creating our own at times. As more developers implement more of the interesting HTML5 and CSS3 features, more interesting polyfills are emerging.

One of the most well-known polyfills is Remy Sharp’s html5shim which lets us use the new sectional markup in our pages in browsers like IE 8 and earlier. Others like Socket.IO go beyond simple polyfills and provide both server and client-side fallbacks for Web Sockets.

The Modernizr wiki has a huge list of various shims and polyfills you can use in your work.

Creating usable fallback solutions is the only way we can use these new APIs and features on our sites today. HTML5 and CSS3 provides a fallback solution for almost every topic covered.

No comments

Sections and Articles

September 20, 2010 at 12:51 pm in HTML5, Semantic Markup

The <code>section</code> and <code>article</code> elements are two new elements we can use to more clearly define our content when we use HTML5. There’s a lot of confusion about how these should be used, so let’s try to clear it up.

Sections are logical regions. A newspaper may have a “Sports” section. That sports section may, in turn, have many subsections, like the socres page, a section for football, hockey, baseball, and even another section for local sports. Sections can be nested within other sections, and that’s how you use them in HTML5 too.

The sports section also has many articles. Articles contain syndicatable content that can stand on its own. That’s the key phrase though – the article <em>must be able to stand on its own.</em>.

So sections are really logical separations, whereas articles describe real content. It gets a little more complicated because articles themselves can be divided up into sections too.

No comments