Login Register

Interesting HTML/JS/DOM/CSS Hacks

In web development, a polyfill (or polyfiller) is downloadable code which provides facilities that are not built into a web browser. It implements technology that a developer expects the browser to provide natively, providing a more uniform API landscape.


Code fallbacks are the perfect solution for compromising with your many unique visitors. Not everybody on the web is using the same operating system, web browser, or even physical hardware. All of these factor into how your web page will actually render on screen. When working with new CSS or JavaScript tricks you’ll often run into such technical bugs and compatibility issues, so you need to use some fallback techniques to fix them.

[CSS] @supports - use it, be cautious

Feature detection has always been a good practice, but unfortunately we could only do that kind of thing using JavaScript. But not anymore.
CSS Feature Queries allow authors to condition rules based on whether particular property declarations are supported in CSS using the @supports at rule.
For now it's available in FF 22+, Opera 12.1+, and Chrome 28+.

[API] Vibration - use it, be cautious

Vibration enables web apps access to a supporting device's force feedback motor.
The Vibration API is specifically targeted towards the gaming use case, and not intended for activities such as notifications or alerts on a user's mobile phone for example
Being a mobile-based feature, the unprefixed feature is supported in Firefox for Android,Firefox OS, Chromium 32, and so in Chrome 32+ on Android and Opera 20+ on Android. Safari Mobile and IE mobile do not support it yet.

[HTML] WebP - use it, be cautious

WebP is an image format that's designed to be provide high quality photographic imagery through smaller filesizes than JPEG. It's supported natively in Chrome, Android, and Opera.
WebP alpha support is available in Chrome 22 (along with lossless). You can detect alpha support with a onload/onerror handlers.
For now, Modernizr detects WebP support and you can manage your own fallback to jpeg.
Recommended polyfills: WebPJS

[API] Web Workers - you can use it, with fallback

Web Workers can parallelize computationally heavy operations, freeing up the UI thread to respond to user input. For browsers that do not support web workers, depending on your use case, you may choose not to offer the feature that web workers provide or to chunk it up (http://www.nczonline.net/blog/2009/01/13/speed-up-your-javascript-part-1/) and put it on the UI thread.

[API] WebGL - use it, be cautious

There are polyfills and plugins to enable WebGL for IE, but you probably shouldn't use them. Use WebGL if it's present, else point the user to get.webgl.org.
WebGL is used to make game like Minecraft and android games.. in the Browser (OpenGL for the Web)

[HTML] <track> - you can use it, with polyfill

The <track> element
provides a mechanism of showing captions/subtitles and/or associated metadata with <audio> or <video>. The file format the <track> element uses is called WebVTT. Browser support for both is in progress: complete in IE10pp4, ongoing in Webkit, unknown in Opera. A polyfill is a wise choice; Captionator is the most complete and well supported. More at Sylvia Pfeiffer's blog.
Recommended polyfills: captionator.js

[HTML] <ruby> - you can use it, with fallback

If you are using the Ruby element you don't need a script-based fallback, but you can provide a CSS-based set of good defaults.
Recommended polyfills: Cross-browser Ruby

[API] requestAnimationFrame - you can use it, with polyfill requestAnimationFrame is recommended for animation as it's battery and power friendly and allows the browser to optimize the performance of your animations.
The spec has gotten some fixes and settled down. All major browsers currently supportrequestAnimationFrame. If you need full browser support, be sure to use the lightweight polyfill.
An interesting usecase: If you have vertical parallax that changes on scroll, you can consider using rAF instead of binding to a window's scroll event. In this way, you'd just ask forwindow.scrollTop on your rAF callback and take action. This will give you the smoothest animations possible.
Recommended polyfills: requestAnimationFrame polyfill

[CSS] regions - avoid

CSS Regions is in active development. As a result, the syntax is in flux. A polyfill based on an older syntax exists, but we recommend you hold your horses till this spec sees some stability and 3 or more implementations.

[CSS] position: sticky - you can use it with polyfill, be cautious

position: sticky combines aspects of relative and fixed positioning. Elements to which it is applied initially act as though they are position: relative, but switch to acting likeposition: fixed when they reach a specified position relative to the viewport. This behavior is often useful for section headings or navigational sidebars.

Almost all answers are about Javascript hacks, so i'm putting together a small list of some CSS hacks that i know and use:

The calc() function:

    /* property: calc(expression) */
        width: calc(100% - 80px);
        width: calc(100% / 6);

There are really a lot of uses for this function and it will make your life a lot easier. Its supported by most modern browsers to my knowledge, but it doesn't hurt to put a fallback for it just in case.

Child Selectors:

Selectors are widely used these days, but most people don't know the extent of their power:

    /* Basic uses */
    /* More advanced uses */
    /* Very advanced uses */
    .test:not(p){          /* Style all the elements that are not a <p> */
    p:last-of-type{        /* Style the last element of type <p> */
        border-bottom:1px solid #ff0;
    tr:nth-child(even){    /* Style all the elements that have an even index */
        background: #CCC
    tr:nth-child(odd){    /* Style all the elements that have an odd index */
        background: #fff
    /* Select a range of children */  
        background:#fff /* will selects only children 3, 4 and 5. */

Selectors that most people don't know about or use:

    :disabled Selects every disabled <input> element.
    :empty Selects every <p> element that has no children (including text nodes).
    :first-letter Selects the first letter of every element.
    :first-line Selects the first line of every element.
    :lang(fr) Selects every element with a lang attribute equal to "fr" (French).

There are a lot of other selectors but i assume that most well versed developers already know about them.

Cross-browser transparency:

Adding a transparent div sometimes is needed in a website but its a pain because most the known property are not cross-browser, by implementing this code it become cross-browser.

        -khtml-opacity: 0.5;     
        opacity: 0.5;

Set color of the selected text:

I don't know about the browser compatibility for this one, but its a pretty cool trick:

        background: #ffb7b7;

Conditional Style-sheets:

    <!--[if lte IE 8]><link rel="stylesheet" href="lte-ie-8.css"><![endif]-->
    <!--[if lte IE 7]><link rel="stylesheet" href="lte-ie-7.css"><![endif]-->
    <!--[if lte IE 6]><link rel="stylesheet" href="lte-ie-6.css"><![endif]-->

This is a very useful trick, its somewhat known and for HTML not CSS, but i decided to add it, just in case.