JavaScript – detect support for background-size: cover

Most of the other solutions worked generally, but gave false negatives (e.g., IE9 does support it, but most test would indicate it did not). Here’s what seems to work so far, for me:

If you just use the second test (in the if block), old IE will report true – the first test is […]

HTML5 Audio – show duration before load

If you’re trying to display current time / time remaining / total time of an HTML5 audio element before it’s loaded, you can use the loadedmetadata listener. You can usually use the same listener that’s being used for the timeupdate handler.

Generally, framework event management should be fine as well, but I haven’t tried […]

Rendering speed

Back in the early 2000s, I was obsessed with performance tweaks – it was then that I first realized that writing massive numbers of elements with javascript was actually faster than having them written as markup – and when I learned that absolutely positioned elements were more quickly rendered than static or relatively positioned elements. […]

Minimum XHTML and HTML5 documents

I’m not sure if charset is required for either, but I think it’ll at least throw a warning… Otherwise, the minimum markup for an XHTML 1 Strict document is:

And the minimum for an HTML5 document:

Not exactly related, but worth pointing out is one feature of HTML5 that seems to be in […]

HTML5 Video (and fallback)

Video with HTML5 is extremely simple.

Since browser support for various video formats can be unpredictable, you can offer files of various formats usingelements as children:

Alternate content:

Most of it’s DOM methods are predictable (in a good way):

There are several significant attributes, like “controls” (to show browser-supplied play/pause buttons), […]

IE Conditional Comments – “If NOT”

Occasionally you might want to show content to all browsers except certain versions of IE. You can use a non-standard conditional comment to achieve that:

Flash Objects and Z-Index

If your flash object is overlaying other elements on your page, set the wmode param in the object markup to ‘opaque’

spend a few minutes on google if you want to know the internals – this post is just the upshot (!)

XHTML Flash Object – 100% Viewport with min-height

As relates to my previous posts on XHTML compliant flash objects here and here, occasionally you might want a 100% viewport flash application, but allow the browser to show scrollbars if the window is beneath a certain size. There are ways to do this using JavaScript of course, and in theory setting the min-height of […]

XHTML valid Flash Object – 100% viewport

My post on XHTML valid flash objects in general is here. The markup for an XHTML valid 100% width and height flash site follows. The catch is height in certain browsers (FF) – which will render at about 150 pixels if the height of the body and html elements aren’t explicitly set.

XHTML Flash Object

Despite a tremendous lack of XHTML compliant flash sites – it’s surprisingly simple to have a valid Flash based page. Step 1. XML Declaration, doctype and namespace.

Step 2. Title and Meta Data (in the HEAD element – both required to validate)

Step 3. Correct object markup (“embed” is NOT valid, nor necessary, […]