

No-Bullshit Guide to Detecting Everything in HTML5 - uggedal
http://diveintohtml5.org/everything.html

======
Kilimanjaro
Here, check your browsers:

<http://mylittlehacks.appspot.com/html5>

~~~
Kilimanjaro
Checking IE6 is not even funny :-(

~~~
mgcross
Unfortunately, IE8 doesn't do much better.

------
mbenjaminsmith
Excuse my ignorance, what's the !! for?

~~~
kaptain
It's to magnify the emotion expressed. In the olden days, before emoticons,
people used a larger vocabulary to express themselves, but often times that
failed to express the magnitude of their feelings. They used !! for that
purpose. Of course, today we see the abuse of the !! quite rampant. I LOVE
YOUR HTML5!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! is an example of this. Note that
this is a post-fix operator.

~~~
j79
Hah! I am guilty of over using exclamation marks in posts/texts. I eventually
found myself re-reading messages and stripping them out! Unfortunately,
nowadays, it's emoticons I overuse. :)

------
fortes
Useful. Sadly, I don't see detection for @font-face -- perhaps because it's
not very simple?

<http://paulirish.com/2009/font-face-feature-detection/>

~~~
MarkPilgrim
Modernizr (linked at the bottom of my guide) can detect support for @font-
face. It is decidedly non-trivial.

<http://github.com/Modernizr/Modernizr>

~~~
ableal
Thanks, and a note: under FFox3.5/Linux, I noticed a small delay before the
title fonts (Agnes Nutter style ;-) loaded over something simpler. More
interestingly, I cannot select the words "Appendix A" to copy elsewhere. I
checked the source, and see they're in style ( h1:before{content:"Appendix
A:"} ).

Curiously, under Konqueror 4.3 I can highlight those words, together with the
rest of the title, but pasting (either X or ^c^v) also misses them ...

~~~
MarkPilgrim
Ah, the oddities of CSS. The first issue is because I'm using custom fonts via
@font-face. Firefox has made some... design decisions... that cause the effect
you're seeing. I've actually just recently discovered a way to reduce the
number of dynamic fonts I'm loading, but the underlying issue is still that
Firefox wants to paint the page before the dynamic fonts are finished loading.

The second issue is CSS generated content. I honestly don't remember why I
chose to put chapter numbers and appendix letters in CSS and the rest of the
title in content. Purity? Really? That doesn't sound like me. ;-) It would
probably be simpler to move it all into the h1.

------
not_an_alien
Related -- <http://html5test.com/>

------
icefox
css3 transition support. You could probably make something smaller, but this
does work.

function checkForTransitionSupport() { var cssTransitionsSupported = false;
var div = document.createElement('div'); div.innerHTML = '<div style="-webkit-
transition:color 1s linear;-o-transition:color 1s linear;-moz-transition:color
1s linear;"></div>'; cssTransitionsSupported =
(div.firstChild.style.webkitTransition !== undefined) ||
(div.firstChild.style.OTransition !== undefined) ||
(div.firstChild.style.MozTransition !== undefined); delete div; return
cssTransitionsSupported; }

------
tibbon
I'm constantly confused by 'HTML5', because many of these examples look more
like Javascript than a markup language. I've used HTML5 a bit here and there,
but just as the next version of XHTML, using things like the <article> tag.

~~~
Sidnicious
HTML5 is a set of enhancements to HTML and to the JavaScript DOM API. This
page is actually a great summary of HTML5 features that developers are likely
to care about. For instance:

\- The <audio> and <video> elements

\- The <canvas> element

\- Form validation (without JavaScript!)

\- New <input>s for data like dates, times, numbers, ranges, and colors, for
which the UA can provide OS-native controls

\- An API for cross-domain communication between windows

\- An API for providing and accepting drag and drop within, between, into, and
out of browser windows

\- Web Workers for computation in the background

\- Web Sockets for efficient communication with your server

\- A persistent local database

...and much more!

This page focuses on detecting support for many HTML5 features in JavaScript,
so that a developer could, say, swap in their own datepicker if the browser
doesn't offer one.

------
watty
Wow, it's so intuitive.

~~~
Nwallins
Yes, it screams for a wrapper library. Might take all of 10 minutes to design
the API.

~~~
MarkPilgrim
Modernizr (linked at the end of my guide) can detect some of these features,
plus a few others:

<http://github.com/Modernizr/Modernizr>

My longer chapter on detecting HTML5 features (
<http://diveintohtml5.org/detect.html> ) explains the detection patterns, and
shows how to detect things with or without Modernizr. I've been working with
the Modernizr developers to expand their detections, and at the same time some
of the code in this guide is taken directly from Modernizr.

------
daredevildave
So is there a handy table showing the results of all these tests in all*
browsers?

*within reason obviously...

~~~
Nekojoe
For something like that, it's best to read PPK's excellent Quirks Mode site -
<http://www.quirksmode.org/compatibility.html>

------
nym
This will be useful for writing those "Regressive Enhancements".

------
perpetuity
FUCAKING ADOBE HATERS!

~~~
perpetuity
This crowd has zero sense of humor. This post was meant to be seen in light of
all the Flash gnashing and public war with adobe... Sigh. Thanks for the neg
karma.

