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: var cover = (function(){ var supported = (‘backgroundSize’ in; if(supported){ var temp = document.createElement(‘div’); = ‘cover’; supported = == […]

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. var displayTime = function(){ // use audio.currentTime and audio.duration to format and present that […]

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: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html xmlns=""> <head> <title>XHTML</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> </body> </html> And the minimum for an […]

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: no support… Most of it’s DOM methods are predictable (in a good way): var video = // get reference to video element; video.pause(); There are several […]

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: <!–[if gte IE 7]><!–>This content will be hidden for IE not at least version 7, but will display in all non-IE browsers (as well as IE7+)<!–<![endif]–>

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. Your Site

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) Your Site Step 3. Correct object markup (“embed” is NOT valid, nor necessary, […]