cross-browser

header/footer/nav tags – what happens to these in IE7, IE8 and browsers than don’t support HTML5?

Place this is the <head> section of your page, before any CSS files are loaded. <!–[if lte IE 8]> <script src=”https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js”></script> <![endif]–> html5shi(m|v) creates doc elements for all the html5 elements so the styles from your CSS can kick in. Default behaviour for IE is to ignore unknown elements. For more info see resig’s blog … Read more

Vertically and horizontally centering text in circle in CSS (like iphone notification badge)

Horizontal centering is easy: text-align: center;. Vertical centering of text inside an element can be done by setting line-height equal to the container height, but this has subtle differences between browsers. On small elements, like a notification badge, these are more pronounced. Better is to set line-height equal to font-size (or slightly smaller) and use … Read more

Testing for multiple screens with javascript

I didn’t find the answer I needed anywhere on StackOverflow, so responding late to the several related threads here. The solution is, first, check for secondary display with window.screen.isExtended. Then await window.getScreenDetails(), which returns an object that includes an array of screens. Very thorough explanation here: https://web.dev/multi-screen-window-placement/

How to display text in the browser status bar?

This can be done. Google Search is doing it, which can be seen when you hover over a Google link, the status bar shows the underlying site: Yet when you click it, it brings you to a location and user-agent dependent url that looks like https://www.google.com.sg/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CC8QFjAAahUKEwi4lP-Z4_rIAhVLk5QKHXRLAe8&url=https%3A%2F%2Fwww.example.com%2F&usg=AFQjCNFEbIRqDC65KFpmuak0aXKmnzjKVQ&bvm=bv.106923889,d.dGo. The url does Google tracking and whatnot before redirecting … Read more

Proper way to detect WebGL support?

The excellent Three library has, in fact, a mechanism for detecting the following: WebGL support File API support Workers support For WebGL, particularly, here is the code that is used: function webgl_support () { try { var canvas = document.createElement(‘canvas’); return !!window.WebGLRenderingContext && (canvas.getContext(‘webgl’) || canvas.getContext(‘experimental-webgl’)); } catch(e) { return false; } }; That code … Read more

How to detect supported video formats for the HTML5 video tag?

You can check codecs for different video types with HTMLVideoElement.prototype.canPlayType. There is also a great HTML5 feature detection library, Modernizr. var testEl = document.createElement( “video” ), mpeg4, h264, ogg, webm; if ( testEl.canPlayType ) { // Check for MPEG-4 support mpeg4 = “” !== testEl.canPlayType( ‘video/mp4; codecs=”mp4v.20.8″‘ ); // Check for h264 support h264 = … Read more

Find the exact height and width of the viewport in a cross-browser way

You might try this: function getViewport() { var viewPortWidth; var viewPortHeight; // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight if (typeof window.innerWidth != ‘undefined’) { viewPortWidth = window.innerWidth, viewPortHeight = window.innerHeight } // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) else if … Read more